how to make my leaflet map zoom when icon is clicked

[Mike]

Is there anyway to make my leaflet map zoom to the location of the icon when it's clicked?  Right now when you click one of my icons all that I can make happen is the pop up window.  IS this possible to make the map zoom towards the location of the icon when it's clicked?  Let me know, any help is greatly appreciated.

Thanks in advance.

[Mike]

and when I say zoom I mean zoom closer to the icons location.

[Prateek Saxena]

On the click handler of the marker you could panTo [1] its LatLng [2]
and then then either zoomIn [3] or setZoom [4] based on your
requirement.

—prtksxna

[1] http://leafletjs.com/reference.html#map-panto
[2] http://leafletjs.com/reference.html#latlng
[3] http://leafletjs.com/reference.html#map-zoomin
[4] http://leafletjs.com/reference.html#map-setzoom

[Mike]

I'm sorry, what exactly would I do?  What would I alter?  I don;t understand what the click handler is.

I just learned about leaflet maps the other day but I'm learning fast.

I attached my file, if you can alter whatever you were talking about to make it happen to one of my markers I'm sure I can pick up with you did and do it with the rest of my markers.  Thanks and I really appreciate your help.

[Pat Keller]

It sounds like you need to hook up a event listener for the click event. See the event-objects documentation on the main leaflet site for some examples and background.

Your marker creation will probably look something like this:

L.marker([52.2792, -1.5847], {icon: greenIcon}).bindPopup("Warwick Castle.").addTo(map).on('click', function(e) { alert(e.latlng); // e is an event object (MouseEvent in this case)

map.panTo(e.latlng).zoomIn(1); });

[Mike]

That worked, thank you.  Here it is in action -please note that I am not working anymore on this page

http://grantcleveland.com/photography/zoom-when-clicked.html

I'm working on a new file so that page will not get updated anymore than what you see now.   Thanks so much!  I really appreciate it.

Mike