Skip to content

Legendary Additions!

Let’s start by making our legend not collapsable:

Change the L.control.layers(null,layers).addTo(map) on line 33 to:

33
L.control.layers(null,layers,{collapsed:false}).addTo(map)

We can do better though and add an actual legend. Notice the let layers ={} object right above the L.control that we changed. The properties in there English as First Language and Non-English as First Language are actually HTML content that controls how the layers are displayed.

We will add a <svg> which is an svg element. Our layers object should look like the following:

let layers = {
    "English as First Language <svg height='10' width='10'><circle cx='5' cy='5' r='4' stroke='black' stroke-width='1' fill='red' /></svg>": englishFirst,
    "Non-English as First Language <svg height='10' width='10'><circle cx='5' cy='5' r='4' stroke='black' stroke-width='1' fill='blue' /></svg>": nonEnglishFirst
}

A much more useful legend should appear. As mentioned before, I’m not a big fan of the Leaflet legend, as there are many more user friendly ways to display a legend, like having the a different <div> on the page.

Why are legends important?

They help to provide context into what is represented on the map. This makes sure as we construct our narrative that people know what is represented on the map and do not have to guess what is being shown.

Since legends are so important, many people have implemented different versions of a legend on Leaflet.