Dynamic map sizing

Sometimes you need to size the map dynamically based on the screen proportions, minus the header height.

Use cases:

• Fullscreen map for the desktop website version
• Change the map width/height ratio on mobile devices to "portrait" orientation

To resize the map dynamically, give it the same width/height ratio as the current window size, and keep that ratio on window resize or mobile device rotation — add the following code to MapSVG / Menu / JavaScript / Map / afterInit event handler:

function(event){
  const { map } = event
  // replace "wpadminbar" with ID of your toolbar element (if you have it)
  var toolbarElemId = "wpadminbar"
  // get toolbar height
  var toolbarElem = document.getElementById(toolbarElemId)
  var toolbarHeight = toolbarElem ? toolbarElem.clientHeight : 0
  // function that resizes the map
  function resizeMap() {
    map.viewBoxSetBySize(window.innerWidth, window.innerHeight - toolbarHeight)
  }

  // resize map on window resize event (or mobile device rotation)
  window.addEventListener("resize", function() {
    resizeMap()
  })
  // initial resize
  resizeMap()
}

Changing map orientation from landscape to portrait on mobile devices

If you want a map that has a "landscape" orientation, and you want to change the orientation to "vertical" on mobile devices, you can check the MapSVG.isPhone parameter and then do the adjustment (the code is also for the "afterLoad" event handler):

function(mapsvg){

  function resizeMap() {
    if(MapSVG.isPhone){
      // Resize the map on mobile devices only
      mapsvg.viewBoxSetBySize(window.innerWidth, window.innerHeight - toolbarHeight)
    }
  }

  // resize map on window resize event (or mobile device rotation)
  window.addEventListener("resize", function() {
    resizeMap()
  })

  // initial resize
  resizeMap()
}