Zoom and center marker on click in leaflet

Question

I have a problem with my leaflet map. I have some markers on my map and when clicking on one, the marker is centered. Now I want when clicking on one marker it is not only centered but I want to zoom in to the marker. When I add this

    map.setZoom((16), {animate: true});

to

    map.on('popupopen', function(centerMarker) {
        var cM = map.project(centerMarker.popup._latlng);
        cM.y -= centerMarker.popup._container.clientHeight/2
        map.setZoom((16), {animate: true});
        map.panTo(map.unproject(cM),{animate: true});
    });

my code the centering doesn't really work because it zooms in but it doesn't center the marker. But all the other markers are centered if I'm in the expected zoom level (16). What can I do that the map zooms to the marker AND the marker is centered as well if I'm outside the zoom level 16? I'm quite new to leaflet and jquery...

Conformist

Answer 1

Instead of using setZoom and panTo, you can use single method setViewwith zoomoption.

map.on('popupopen', function(centerMarker) {
        var cM = map.project(centerMarker.popup._latlng);
        cM.y -= centerMarker.popup._container.clientHeight/2
        map.setView(map.unproject(cM),16, {animate: true});
    });

Driest

In fact, that solution works only sometimes. Depending on in which zoom level I am, the zoom does not always work and center the marker.. the marker is often out of the view (somewhere at the bottom) and the popup is open. I'm just wondering why.. – Conformist

How big is your popup? By default the map will pan the marker to fit the popup inside map. the workaround is to set autopan:false in popup. – Driest

the described problem only appears when the zoom level is quite high (for example 18). then the marker is completely away. If it is map.setView(map.unproject(cM),15, {animate: true}); it works well. The popup is normal, there's only one word in it. – Conformist

I think it is because this line cM.y -= centerMarker.popup._container.clientHeight/2. What is it supposed to do? You might be interested in leafletjs.com/reference.html#icon-popupanchor – Driest

Answer 2

What I did to center the icon popup on my screen was devide the clientHeight by zoom and it centered the popup:

mymap.on('popupopen', function(centerMarker) {
  const zoomLvl = 13;
  let cM = mymap.project(centerMarker.popup._latlng);

  cM.y -= centerMarker.popup._container.clientHeight / zoomLvl
  console.log(mymap.unproject(cM));
  mymap.setView(mymap.unproject(cM), zoomLvl, {animate: true});
});

Grampositive

Answer 3

All solutions Apart, here is basic and auto zoom on point solution:

const map = L.map("map", { layers: [osm], minZoom: 13 });
map.setView([latlng[0], latlng[1]], 13);

latlng[0], latlng[1] are points coming from your db object or from REST api.

this will automatically zoom at center of point.

Lasso