Chapter 13 Leaflet Map Templates
While beginners appreciate the drag-and-drop map tools and tutorials described earlier in this book, Google My Maps and Carto, more advanced users may wish to customize their visualizations, add more complex data and interactivity, and control exactly how and where their work appears on the web. A more powerful and relatively easy-to-learn solution is to use code templates built with Leaflet https://leafletjs.com, an open-source library, which you can modify and host on GitHub, as described in this book.
22.214.171.124 Working with Leaflet
- Open-source code, which anyone can freely use online, download, modify, or expand with plugins
- Easier for beginners to understand than some other map code libraries
- Must host your own code repositories to publish to the web (with a free service such as GitHub Pages)
- Must rely on open-source community of developers to maintain the core code or specific plugins
Leaflet Map Templates
|Template||Best use and tutorial chapter|
|Leaflet Maps with Google Sheets
||Best to show points, polygons, polylines, or point table data. Upload your GeoJSON data and modify settings in linked Google Sheet (or CSV) and GitHub repo.
Template with tutorial: Leaflet Maps with Google Sheets
|Leaflet Storymaps with Google Sheets
||Create a scrolling narrative with points, text, images, and links.
Template with tutorial: Leaflet Storymaps with Google Sheets
|Leaflet Maps with Socrata API
||Create a Leaflet map powered by data from any Socrata data portal.
Template with tutorial: Leaflet Maps with Socrata
Inside Leaflet code templates
The templates featured below vary from simple to complex, but all of them include three basic types of code:
- HTML: to structure content on the web (example: index.html)
- CSS, or Cascading Style Sheet: to shape how content appears on the web (example: style.css)
Also, these templates refer to other types of code:
- library: link to online instructions to complete routine tasks (examples: Leaflet, jQuery)
- basemap tiles: link to online background map (example: Carto Positron, a light-gray street map)
- data: content to appear on map, typically in CSV or GeoJSON format (examples: data.csv, data.geojson)