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 27 to:

27
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 Vaccinated and Non-Vaccinated 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 = {
    "Vaccinated <svg height='10' width='10'><circle cx='5' cy='5' r='4' stroke='black' stroke-width='1' fill='red' /></svg>": vaccinated,
    "Non-Vaccinated <svg height='10' width='10'><circle cx='5' cy='5' r='4' stroke='black' stroke-width='1' fill='blue' /></svg>": nonVaccinated
}

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?

Legends are an element of cartographic (mapmaking) that 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!

Cartographic Design Principles

You can read more about color, type, and other cartographic design principles here:https://saylordotorg.github.io/text_essentials-of-geographic-information-systems/s13-cartographic-principles.html.