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...
Instead of using setZoom
and panTo
, you can use single method setView
with 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});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With