How can I dynamically adjust the aspect ratio of a map?

Adjusting the look of a map to fit a specific shape can be done with a handy JavaScript function. This function helps you customize a map's size to match another or set a specific shape. This is particularly useful for making your maps look cohesive when adding them to a website.

JavaScript Function:

Here is a JavaScript function named constrain that facilitates the dynamic adjustment of a map's aspect ratio:

   //makes the aspect ratio of the secondary map match the primary map
  var constrain=function(target, constraint){
    var iv=target.initial_view;
    var civ=constraint.initial_view;
    var r=(civ.x2-civ.x)/(civ.y2-civ.y);
    var w=iv.x2-iv.x;
    var h=iv.y2-iv.y;
    if ((w/h)<r){ //add whitespace to the right and left
      var ws=.5*((r*h)-w);
      iv.x-=ws;
      iv.x2+=ws;
    }
    else{ //add whitespace to the top and bottom
      var ws=.5*(w/r-h);
      iv.y-=ws;
      iv.y2+=ws;
    }

    return {x: iv.x, x2: iv.x2, y: iv.y, y2: iv.y2}
  }

Fixed Aspect Ratio:

To set a fixed aspect ratio (e.g., 1:1) for a map, use the following example:

constrain(window['simplemaps_countrymap.mapinfo'], {'initial_view': {x: 0, y: 0, x2: 1, y2: 1}});

Remember to run the script before manually loading the map, as explained in our manual loading guide.

If you encounter any difficulties or have further questions, feel free to contact us.