Chapter 10 Leaflet Map Templates
TODO: Rewrite chapter
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.
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
TODO: add and clean up Leaflet Map CSV https://github.com/HandsOnDataViz/leaflet-map-csv to serve as a fuller tutorial for Leaflet Maps, and explain how this will teach more principles of modifying Leaflet code. …then geocode and upload more data points:
TODO: convert to R code-chunk iframe: https://handsondataviz.github.io/leaflet-map-simple-instructor-sample/
|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 Open Data API
||Create a Leaflet map powered by an open data repository application programming interface (API), such as a Socrata data repository endpoint.
Template with tutorial: Leaflet Maps with Open Data API
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)