Leaflet legend with Maki Markers

Question

Using Leaflet 1.0.3, I'm trying to create a legend with L.control() and Leaflet plugin MakiMarkers. Can't seem to get the Maki Marker icon to show up with description. Pretty sure it's my lack of proficiency with HTML and innerHTML. Any help would be great, I've spent way to much time on this.

//Maki Markers, markers are declared globall,

var greenTree = L.MakiMarkers.icon({
    icon: "park",
    color: "3F9110",
    size: "s"
});

var redTree = L.MakiMarkers.icon({
    icon: "park",
    color: "F04441",
    size: "s"
});

var blueTree = L.MakiMarkers.icon({
    icon: "park",
    color: "442DB5",
    size: "s"
});

// Legend Control

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

legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'legend');
div.innerHTML +=  '<img src="greenTree">' + '<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);

Answer 1

From jseppi on github, the author of Leaflet MakiMarkers, he suggested downloading the icons via curl:

you'll need to sign up on Mapbox for an access code, well worth it.

curl "https://api.mapbox.com/v4/marker/[email protected]?access_token=your-access-token"

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/[email protected]?access_token=your-access-token.

Then I used them in the following code:

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

legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'legend');
    div.innerHTML +=  '<img src="assets/img/newGreenTree.png">' + '     BCT Owned Land' + '<br>'
    div.innerHTML +=  '<img src="assets/img/newBlueTree.png">'  + '     Conservation Restriction on Private Land' + '<br>'
    div.innerHTML +=  '<img src="assets/img/newRedTree.png">'   +  '     Conservation Restriction on Town Land'

    return div;
};

legend.addTo(map);

Answer 2

I'm not an experienced Leaflet user, but it strikes me that you have no locations (coordinates). Also you haven't defined map or maybe you have in legend.onAdd. Or maybe you haven't shown us everything. The landing page of leafletjs.com shows a simple map. Maybe go back to that as a start.

Show us more of what you've create might help.