Geek Answers Handbook

Change marker size in leaflet

I have one marker on the map in the leaflet:

var centerMarker = L.marker(centerPoint, { title: 'unselected' }).bindLabel(schools[i][0]); centerMarker.on('click', selectMarker); centerMarker.addTo(map);

I want to resize this marker when clicked.

I know that we can change the icons, but I just want to resize the same marker icon.

+4
source share
2 answers

You can get the old icon from the marker itself, resize the icon, and then call setIcon with the icon changed:

 var icon = centerMarker.options.icon; icon.options.iconSize = [newwidth, newheight]; centerMarker.setIcon(icon);
+8
source

Use the setIcon marker by specifying a new icon with the same image but with a different size and snapping.

 var centerPoint = L.latLng(55.4411764, 11.7928708); var centerMarker = L.marker(centerPoint, { title: 'unselected' }); centerMarker.addTo(map); centerMarker.on('click', function(e) { centerMarker.setIcon(bigIcon); });

Demo (using a few sloppy settings for the center and shadow, etc.):

http://jsfiddle.net/pX2xn/4/

+3
source

More articles:


All Articles