How can I prevent the map legend from overlapping the map on mobile devices?

You can prevent the legend from overlapping the map on mobile devices by adding the following code to the mapdata file in the "main_settings" section:

legend_position: "outside",

This will force the legend to go below the map instead of over it. Here is an image for reference:


Additionally, you can add/subtract extra space at the bottom of the map by manipulating the "inital view" setting. To find the "initial view", please follow these steps:

  1. Go to the "Code" tab and scroll down further on the webpage (not within the mapdata.js file).
  2. Look for the "Advanced" section.
  3. Select "Overwrite mapinfo."
  4. Within the displayed options, you'll find the "initial view" where you can access the relevant values. For adding or reducing space at the top and bottom of the map, adjust the y and y2 values respectively. Similarly, for altering the space on the sides of the map, modify the x and x2 values.


3b48ef6df059380fdf23e204e56bb8b0.png

@simplemapsusa To avoid the overlap of the legend with the map, consider adding extra space at the bottom of the map! 🗺️🗾📍 #SimpleMaps #Maps #CustomHTMLMaps #USMAP #custommaps #InteractiveMaps ♬ Tutorials - FASSounds