Add data attribute to leaflet.js marker element

Question

GOAL: Add data-attribute to leaflet.js marker element markup

I have a project with a map and a 'spotlight' area.

The map is populated with locations using leaflet.js

When I click a pin on the map, I want to have it's corresponding image and information appear in the spotlight area.

I did a preliminary test with no map: http://codepen.io/sheriffderek/pen/yOmjLV Where I used data-attributed to connect the 2 sides of the coin. ( one set of data is spit out by PHP and the map data is an API ajax call )

I took for granted that it would be an accessible option to add classes or Id's or data or rel etc. Here's the meat of it:

// Purveyor types - for query endpoints
var bar = 4;
var retailer = 3;

// Create the "map"
var onSiteMap = L.map('on-site-map').setView([34.0758661, -118.25430590], 13);

// Define the pin (no SVG?)
var onSiteIcon = L.divIcon({
  className: 'my-div-icon' // this gets one class name as far as I can tell
});

// Setup map "Look"
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(onSiteMap);

// Grab the data
$.ajax( {
  url: 'http://xxxxxx.com/wp-json/wp/v2/purveyor?purveyor-type=' + bar,
  success: function ( data ) {
    var purveyorData = data;
    for (var i = 0; i < data.length; i++) {
      var ourLat = purveyorData[i].acf.purveyor_latitude;
      var ourLong = purveyorData[i].acf.purveyor_longitude;
      var ourSlug = purveyorData[i].slug;
      // create the markers
      L.marker([ ourLat , ourLong ], { 
        icon: onSiteIcon,
        slug: ourSlug // creates an extra option... but...
      }).addTo(onSiteMap);
    }
  },
  cache: false
});

I can add an 'option' and a unique value for that - to the object, but that doesn't help me get something into the markup.

The element for the markers ends up like this:

<div 
    class="leaflet-marker-icon my-div-icon leaflet-zoom-animated leaflet-clickable" 
    tabindex="0" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; transform: translate3d(276px, 140px, 0px); z-index: 140;"></div>

Trying to get something more like this:

<div 
    id='possible-id-237'
    rel='possible-rel'
    data-name='this-slug'
    class="leaflet-marker-icon my-div-icon leaflet-zoom-animated leaflet-clickable" 
    tabindex="0" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; transform: translate3d(276px, 140px, 0px); z-index: 140;"></div>

I've researched a bit - and most questions were 2014 or older. Hoping there is something I'm missing in the new docs.

Answer 1

I can add an 'option' and a unique value for that - to the object, but that doesn't help me get something into the markup.

That's right - Leaflet won't magically turn options into HTML data attributes.

First: read the leaflet code! It's easy to understand if you spend a bit of time in it. For markers, the HTML is really built in L.Icon, not in L.Marker.

Once you've done that, you'll notice the code in src/layer/marker/icon.js does something like:

_setIconStyles: function (img, name) {
    var options = this.options;

    if (options.something) {
        img.style.something = something(something);
    }
},

If you then read Leaflet's plugin guide, you'll then realise you can make a plugin in the lines of:

L.Icon.DataMarkup = L.Icon.extend({

    _setIconStyles: function(img, name) {
        L.Icon.prototype._setIconStyles.call(this, img, name);

        if (options.slug) {
            img.dataset.slug = options.slug;
        }
    }

});

You should be able to work it out from there.