jseppi / Leaflet.MakiMarkers

Leaflet plugin to create map icons using Maki Icons from Mapbox.
MIT License
140 stars 39 forks source link

MakiMarker in legend #17

Closed geomajor56 closed 7 years ago

geomajor56 commented 7 years ago

Sorry to bother you but I'm having difficulty displaying an icon within a legend. I'm creating an icon as follows: var greenTree = L.MakiMarkers.icon({ icon: "park", color: "3F9110", size: "s" });

`if (feature.properties.OWNER_TYPE === "A") {
            return L.marker(latlng, {
                icon: greenTree,
                title: feature.properties.BCT,
                riseOnHover: true
            });`

This works fine as a map marker but I'm pretty much clueless displaying the var greenTree within a legend within a custom control panel using innerHTML:

var legend = L.control({position: 'topright'});

legend.onAdd = function (map) {  
   var div = L.DomUtil.create('div', 'legend');
   div.innerHTML +=  '<not sure what to put here>' +   '<p>BCT Owned Land</p>'
   div.innerHTML +=  '<img src="blueTree">'  + '<p>Conservation Restriction on Private Land</p>'
   div.innerHTML +=  '<img src="redTree">'   + '<p>Conservation Restriction on Town Land</p>'

return div;
};

legend.addTo(map);`

Any help would be greatly appreciated. If I had the skills, I'd make some kind of plugin.

jseppi commented 7 years ago

See the Mapbox documentation about the URL format for their standalone markers: https://www.mapbox.com/api-documentation/#retrieve-a-standalone-marker

It'll be a URL that looks like https://api.mapbox.com/v4/marker/pin-s-park+3F9110@2x.png?access_token=your-access-token.