Zoom and center marker on click in leaflet
Solution 1
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});
});
Solution 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});
});
user3671746
Updated on July 02, 2022Comments
-
user3671746 almost 2 years
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...
-
user3671746 almost 10 yearsIn 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..
-
neogeomat almost 10 yearsHow 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. -
user3671746 almost 10 yearsthe 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.
-
neogeomat almost 10 yearsI 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