Different zoom level for desktop and mobile

Hey there! Nice idea but I think it’s maybe a bit much to add this much detail into the editing area. This is kind of the purpose of the “fit map to features” so that it snaps no matter the user’s device.

I would actually recommend making a custom script for this (https://wpmaps.mapster.me/documentation/maps#custom-scripts) as it’s a fairly simple thing to do code-wise. You’ll make a function something like

function zoomMapForUser(map, features) {
  if(window.innerWidth <= <mobile-width-desired>) {
    map.setZoom(4);
  } else if(window.innerWidth <= <mobile-width-tablet>) {
    map.setZoom(5);
  }
}

Add this to a file loaded onto your map page. Then, add the zoomMapForUser into the custom scripts textbox on the Map editor page, and it should call it and rezoom appropriately!

Hi,

thank you for the script.
It works very well and the feature “custom scripts” is nice for a js developer.

About the “fit map to features” I’ve tried to use it a few days ago but I think you need to calculate some offset otherwise you could have locations on the edge of your map or under the search bar.

Thanks, yes, actually we had that before, but in order to load the map initially on the bounds (without resizing), we had it load the bounds directly. After looking again at initialization options in Mapbox, I see there is fitBoundsOptions I can pass during initialization of the map. I’ll update this with a padding of 20 in the next update!

Thanks.