Get leaflet marker from a layer

Question

I'm new to leaflet and am trying to implement a set of markers with different CSS-styles.

So, I am aware that after adding a marker to a map I can access different CSS-attributes by calling getElement() on my marker for example:

    marker.addTo(map);
    marker.getElement().style.borderColor = '#000';

This works just fine, but when adding a marker to a layer, this can no longer be used since a TypeError occurs (getElement() is undefined). Here is the example code where the error occurs:

    myLayer.addLayer(marker);
    marker.getElement().style.borderColor = '#000';

Am I overlooking a simpler way to set CSS-Attributes for markers and divicons that are added to layers or is there a similar way to access layer-added markers and divicons in JavaScript?

DemandingBoyfriend DemandingBoyfriend · Accepted Answer · 2017-05-20T18:31:18

So I found a solution that is working for me. The idea is to extend the function that is used to create the icon. Last answer here github.com/Leaflet/Leaflet/issues/5231 helped a lot.

    var borderSize = ...;
    L.DivIcon.Custom = L.DivIcon.extend({
        createIcon: function(oldIcon) {
               var icon = L.DivIcon.prototype.createIcon.call(this, oldIcon);
               icon.style.borderSize = borderSize;
               ...
               return icon;
        }
    })
    var icon = new L.DivIcon.Custom({
        ...
    });        
    var ll = L.latLng(entry.Longitude, entry.Latitude);
    var marker = L.marker(ll, {
      icon: icon
    })
    this.myLayer.addLayer(marker);

Get leaflet marker from a layer

2 Answers