Search code examples
javascriptleafletzooming

leaflet.js ImageOverlay zoom changes marker position

Am using ImageOverlay to use an image as a map, using Leaflet.js - but when changing the zoom the markers change position.

Have followed guideance in this tutorial and a code pen example is here.

// Markers 
var markers = [{"title":"OneOcean Port Vell","description":"Super yacht marina","link":"http:\/\/www.oneoceanportvell.com\/","x":"68.28125","y":"68.443002780352178"}]; 

var map = L.map('image-map', {
  minZoom: 2,
  maxZoom: 4,
  center: [0, 0],
  zoom: 2,
  attributionControl: false,
  maxBoundsViscosity: 1.0,
  crs: L.CRS.Simple
});

// dimensions of the image
var w = 3840,
    h = 2159,
    url = 'map.png';

// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);

// add the image overlay, 
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);

// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);

// Add Markers  
for (var i = 0; i < markers.length; i++){
    var marker = markers[i];

    // Convert Percentage position to point
    x = (marker['x']/100)*w;
    y = (marker['y']/100)*h;

    point = L.point((x / 2), (y / 2))
    latlng = map.unproject(point);

    L.marker(latlng).addTo(map);
}

In the codepen, change zoom to 4 to see the markers lose their position.

Ideally I'm trying to change the zoom to allow for different screen sizes and to get more of the map visible on mobile devices.

Also perhaps related, I can't see to get the zoomSnap feature to work to allow for fractional zooming.

Any pointers greatly appriciated.

Solution

  • map.unproject needs the zoom value at which you want the un-projection to be applied.

    You correctly specify your static imageZoom value to unproject when computing your bounds and center, but not for your markers positions.

    If the zoom parameter is not specified, then unproject uses the current map zoom level, i.e. what you have defined in your zoom variable. That is why when you change its value, unproject for your markers uses a different value, and they are positioned in different locations.

    You even had to divide your x and y values (relative to your image) by 2, to account for the fact that in your initial situation, they are correct for an imageZoom of 4, but since you do not specify the zoom for unproject, the latter uses the current zoom (i.e. 3), so coordinates should be divided by 2 to be "correct".

    Updated codepen: https://codepen.io/anon/pen/pLvbvv