Make your map responsive | Documentation

With the advent of tablets and smart phones, webmasters can no longer safely assume that their visitors are using a desktop computer with a popular screen resolution.  This has led to the popularity of responsive web design:  the effort to make a web page accessible across a wide range of devices.

At Simplemaps, we are dedicated to providing HTML5 interactive maps that can be viewed on as many devices as possible with the best experience possible.  That's why our maps automatically detect touch devices and provide mobile-friendly navigation for those users.  To make your the width of your map responsive to your users device, here is what you need to do:

1. Set width: 'responsive', in the main_settings of the mapdata.js file. It should look like this:

   

2. This will make the map expand or contract to fit the width of its parent div. The map will resize itself if the browser is resized or the orientation or a mobile device switches between portrait and landscape.

   The state of the map will remain constant as the map scales. For example, if a user is zoomed in on "South America" and the map is resized, the user will not be zoomed out like he/she would be if the map was reloaded.

3. Make sure that you are using a responsive web design!
   The map can only expand to fill the space available to it. If it is contained in a div with the CSS attribute max-width: 400px; the map will never exceed this size.

That's it! Your map is now responsive.