change size of marker in leaflet

Question

I have one marker on the map in leaflet:

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

I want to change the size of that marker on click.

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

Solution 1

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

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

Solution 2

Use setIcon on the marker, providing a new icon with the same image but different size and anchors.

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 somewhat sloppy settings for the center and shadow etc):

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

Solution 3

Although it is an old question, but in case someone is looking for another possible option other than the answered ones.

L.marker([coord.latitude, coord.longitude], {
    color: 'red',
    icon: getIcon(), 
    data: coord
}).addTo(myMap).on("click", circleClick);

function getIcon(total_dead_and_missing) {
    var icon_size = [50, 50];   //for dynamic icon size, 
    var image_url = '1.png';        //for dynamic images

    L.icon({
        iconUrl: image_url,
        shadowUrl: 'leaf-shadow.png',

        iconSize:    icon_size , // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
}

Resource : https://leafletjs.com/examples/custom-icons/

Solution 4

As per @m13r's suggestion, I am posting a new answer about how to create a large size copy of icon.

/// Returns a scaled copy of the marker's icon.
function scaleIconForMarker(marker, enlargeFactor) {
  const iconOptions = marker.options.icon.options;

  const newIcon = L.icon({
    iconUrl: iconOptions.iconUrl,
    iconSize: multiplyPointBy(enlargeFactor, iconOptions.iconSize),
    iconAnchor: multiplyPointBy(enlargeFactor, iconOptions.iconAnchor),
  });

  return newIcon;
}

/// Helper function, for some reason, 
/// Leaflet's Point.multiplyBy(<Number> num) function is not working for me, 
/// so I had to create my own version, lol
/// refer to https://leafletjs.com/reference.html#point-multiplyby
function multiplyPointBy(factor, originalPoint) {
  const newPoint = L.point(
    originalPoint[0] * factor,
    originalPoint[1] * factor
  );

  return newPoint;
}

The usage is simple:

  marker.on("click", function () {
    // enlarge icon of clicked marker by (2) times, other markers using the same icon won't be effected
    const largeIcon = scaleIconForMarker(marker, 2);
    marker.setIcon(largeIcon);

  });

This way you only enlarge the icon for the marker you clicked, other markers will remain unchanged after a refresh.

View more solutions

Comments

[jgillich]

It is not supported in the API, you have to delete and add the marker again.

[flup]

Try setIcon, set the same icon but with different size?

[vaibhav shah]

tried setIcon but not working for me . Any other suggestion

[flup]

Have you tried the answer? If so, what is not working?

[Daniel Hu]

I prefer this answer over @m13r's because by creating a brand new var bigIcon, it won't effect the original copy of icon, hence can help you to avoid some undesired behaviours.

[Daniel Hu]

This answer is valid but use it with caution, because this will modify the icon size of the original icon, and it may effect other markers using the same icon. If you don't want to modify the original icon and only want to change THIS pin's icon size, you can create a branch new icon by doing const newIcon = L.icon({ iconUrl: url, iconSize: newSize, iconAnchor: newAnchor }), and centerMarker.setIcon(newIcon)

[m13r]

thanks @DanielHu for pointing that out, maybe you could explain your approach in a new answer? It is not clear to me how to get a copy of this icon with this small snippet... How do you set the parameters iconUrl and iconAnchor accordingly?

[Daniel Hu]

Thanks for you suggestion, I posted my own answer, it's under this question. Or you can click this link: stackoverflow.com/a/70690009/9182804