How to Control Map Size

There are times when a developer wants to implement a simple feature, and discovers finding the solution was not so simple. There are other times when a developer once had the solution, but with changing times, the solution is outdated. I was having one of those times recently, when trying to do what I thought was a simple thing - control the size of a map! What if I wanted my map to go full screen? What would happen if I resize the map? Despite once having the answers to these, times have changed. So let's explore the answers to these questions.

Map Size

When using our JavaScript APIs, you will likely notice that many of our examples include an element in HTML that looks like this:

Copied

        
<div id="map">

The div element is a container for the map. When the map is initialized in code, you will often see this approach in many of our examples:

Copied

        
var map = new H.Map(document.getElementById('map'),
  defaultLayers.vector.normal.map,{
  center: {lat:50, lng:5},
  zoom: 4,
  pixelRatio: window.devicePixelRatio || 1
});

In the first line of code, a map is initialized with where it will reside visually on the page - in the element with and id of 'map'. However, if no information is provided regarding the size or dimensions of the div, the map will not display. A simple fix to this to provide static dimensions to the page, such as:

Copied

        
<div id="map" style="width: 800px; height: 600px" >

This approach will do exactly what is expected - to load a map into an 800x600 container on the page. Simple. Now how about going full screen?

Full Screen Map

To make a map go "full screen" in the context of the browser, use the following to style the div:

Copied

        
<div id="map" style="width: 100vw; height: 100vh" >

The above styling instructs the div element to display 100 percent to the width and height of the browser. By the way, this is the "simple" feature I could not find in our documentation. Most of our examples are using fixed sized containers. I previously had another solution to this, but changing browser specifications lead to using the CSS styling used above.

You may need to implement more styling to make sure the map is clean of gaps and scroll bars by making sure the body element is styled with no padding or margins like so:

Copied

        
<body style="padding: 0; margin: 0;" >

Of course all the inline styling in this post can be done in a style element or in a linked stylesheet.

Resizing

A final word of advice on map sizing is making sure the map behaves as you would expect when a browser window is resized. Just make sure to implement the following line of code which is found in many of our examples:

Copied

        
window.addEventListener('resize', 
	() => map.getViewPort().resize());

The above code will capture the resize event of the browser and instruct the map to resize to the new window dimensions.

Summary

Maps require dimensions, whether static or based on the size of the browser screen. Make sure you have a strategy for how the map should behave if the browser resizes. For a quick demonstration of these topics, check out the video below!

How to Control Map Size

Map Size

Full Screen Map

Resizing

Summary

Michael Palermo

Have your say

Sign up for our newsletter

HERE