2

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);
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);

enter image description here

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.