Leaflet mouseout event on marker

Question

I wrote this code to change the icon of a marker on mouseover an change it back on mouseout but the mouseout event never seems to get triggered after the mouse over.
I also referred to this question (Leaflet Mouseout called on MouseOver event) but I dont know if that is the issue here. How should I resolve it if that is issue.

    L.marker([20.123,40,234],{icon:icon}).on('mouseover',function(e){
        this.setIcon(highlight);
    }).on('mouseout',function(e){
        this.setIcon(icon);
    }).addTo(map);

Edit 1: Here is the complete code :

    var map = L.map('map').fitWorld();
    L.tileLayer("https://api.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",{           
        id:'mapankit.137364c3', 
        accessToken:'pk.eyJ1IjoibWFwYW5raXQiLCJhIjoiY2lramo5anZoMDdjMnVjajdjYWtqbXZ3eiJ9.uR_6t2C2f5Ib9qOPnt_l8Q'}).addTo(map);

    var icon = L.divIcon({
        html : '<svg width="12px" height="12px"><g><path class="outer" d="M-5 0 A5 5 0 0 1 5 0 A5 5 0 0 1 -5 0" style="stroke-opacity: 1; stroke-width: 2; fill: white; stroke: rgb(0, 198, 228);" transform="translate(6,6)"></path><path class="inner" d="M-2.5 0 A2.5 2.5 0 0 1 2.5 0 A2.5 2.5 0 0 1 -2.5 0" style="stroke-opacity: 1; stroke-width: 0; fill: white; stroke: white;" transform="translate(6,6)"></path></g></svg>',
        className : 'foo',
        iconAnchor : L.point(6,6)
    });

    var highlight = L.divIcon({
        html : '<svg width="25px" height="25px"><g><path class="outer" d="M-10 0 A10 10 0 0 1 10 0 A10 10 0 0 1 -10 0" style="fill: white; stroke: rgb(0, 198, 228); stroke-width: 2;" transform="translate(12,12)"></path><path class="inner" d="M-5 0 A5 5 0 0 1 5 0 A5 5 0 0 1 -5 0" style="fill: rgb(0, 198, 228); stroke: rgb(0, 198, 228); stroke-opacity: 1;" transform="translate(12,12)"></path></g></svg>',
        className : 'bar',
        iconAnchor : L.point(12,12)
    })

    L.marker([20.123,40,234],{icon:icon}).on('mouseover',function(e){
        this.setIcon(highlight);
    }).on('mouseout',function(e){
        this.setIcon(icon);
    }).addTo(map);

Yes you are right, it does not work with DivIcon (but it works with Icon) — YaFred, May 24 '16 at 10:26
I have dynamic content to be used as icon hence I am using divIcon so that I can give the HTML directly — Srinidhi Nagendra, May 24 '16 at 10:39
Is there any way i can give html to icon and not use divIcon at all? — Srinidhi Nagendra, May 24 '16 at 11:05
SVG UI events might not be properly handled. Have you tried to use non-SVG content in the `DivIcon`? — IvanSanchez, May 24 '16 at 11:08
Yup That works perfectly fine. I tried giving svg as file to icon that worked. But in my use case I cannot create files for every new icon that i create. — Srinidhi Nagendra, May 24 '16 at 11:10

score 2 · Answer 1 · answered Jan 25 '17 at 20:33

I know that this question is pretty old, but I too had this problem and have come up with a pretty good solution. Rather than adding the event listeners to the DivIcon directly, apply them to the element.

var map = ...

var normal = ...

var highlight = ...

function updateIcon(marker, icon) {
    marker.setIcon(icon)
    $(marker.getElement()).on({
        'mouseenter': (e) => { updateIcon(marker, highlight); $(this).off() },
        'mouseleave': (e) => { updateIcon(marker, normal);    $(this).off() }
    })
}

var marker = L.marker([20.123,40,234]).addTo(map)

updateIcon(marker, normal)

This worked really well for me. My setup is a little different because it's all inside of VueJS, but the general mechanics are the same. Let me know if it needs any adjustment.

score 1 · Answer 2 · answered May 25 '16 at 08:18

1

You can't do this, setIcon doens't work dynamic in L.DivIcon only with L.Icon. but if one is a icon you can make to work:

var highlight = L.divIcon({
        html: '<svg width="25px" height="25px"><g><path class="outer" d="M-10 0 A10 10 0 0 1 10 0 A10 10 0 0 1 -10 0" style="fill: black; stroke: rgb(0, 198, 228); stroke-width: 2;" transform="translate(12,12)"></path><path class="inner" d="M-5 0 A5 5 0 0 1 5 0 A5 5 0 0 1 -5 0" style="fill: rgb(0, 198, 228); stroke: rgb(0, 198, 228); stroke-opacity: 1;" transform="translate(12,12)"></path></g></svg>',
        className: 'foo',
        iconAnchor: [12, 12]
    });
    var myIcon = L.icon({
        iconUrl: 'my-icon.png',
        iconRetinaUrl: 'my-icon@2x.png',
        shadowUrl: 'my-icon-shadow.png',
        shadowRetinaUrl: 'my-icon-shadow@2x.png'

    });

    var x = L.marker([20.123, 40, 234], { icon: myIcon }).addTo(currentView);
    x.on("mouseover", function () {            
        this.setIcon(myIcon);
    });

    x.on("mouseout", function () {
        this.setIcon(highlight);
    });

answered May 25 '16 at 08:18

HudsonPH

1,838
2
22
38

Is there any particular reason for it not being dynamic? – Srinidhi Nagendra May 25 '16 at 08:25
beecause the setIcon it is a method that needs Icon to work, when you use DivIcon you broke the logic. in my exemple i broke the logic and after a do restoration :P – HudsonPH May 25 '16 at 08:35
But `divIcon` is nothing but an extend on `icon`. `L.DivIcon = L.Icon.extend({ options: {` from the source [link](https://github.com/Leaflet/Leaflet/blob/master/src/layer/marker/DivIcon.js) – Srinidhi Nagendra May 25 '16 at 09:03
inst about this, it is about how the marker work, icon is a new L.Icon when you call divIcon you change the options, when you call Icon you restaure the options. I do not how I can explain it in other words D: – HudsonPH May 25 '16 at 09:23

Leaflet mouseout event on marker

2 Answers2