[GIS] 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/pin-s-car+f44@2x.png?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/pin-s-park+3F9110@2x.png?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);