CODEWITHSUNDEEP
jqueryleafletmarker
user3671746
user3671746

Reputation: 291

Zoom and center marker on click in leaflet

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...

Upvotes: 8

Views: 15035

Answers (3)

optimists
optimists

Reputation: 201

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.

Upvotes: 0

James Brown
James Brown

Reputation: 846

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});
});

Upvotes: 1

neogeomat
neogeomat

Reputation: 359

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});
    });

Upvotes: 13

Related Questions