Leaflet is an open-source JavaScript library for highly interactive, mobile-friendly maps.
There are two ways to use Leaflet:
- Leaflet for plain JavaScript projects.
- react-leaflet, which is for React projects. See our documentation for some guidance on how to use it.
The Leaflet library is a tool to use when:
- you need a "slippy map"
- your map has a lot of interactions, more than you can manage with an SVG
- you have some GeoJSON or custom geographical features
The Leaflet documentation is the best place to learn the basics of Leaflet.
Leaflet with vanilla JavaScript can lead to an unorganized and hard-to-use codebase. If you have a map that might have a lot of extra functionality, then we'd recommend using react-leaflet.
Their accessibility docs describe some features that come built into Leaflet. These are:
- the map is keyboard navigable by default, and
- the strong recommendation to add alt attributes to markers
Although not described in their docs at the time of writing, sifting through issues on Leaflet’s repo shows there is a feature where polygons with tooltips are meant to have screen-readers read those tooltips as the shape's alt attribute. When testing the map on the homepage of the Chicago Recovery Plan's dashboard with VoiceOver, this feature was cumbersome. Each shape was read aloud as “graphics symbol” instead of something like “Fuller Park”. Through a series of commands, you can eventually get it to read the tooltip, but doing that for each area isn't ideal.
There is a possibility that this is a VoiceOver specific issue, but we would need access to some other screen readers to be sure.