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

Pros:

  • 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
  • Compact code library (less than 40 KB) that runs on JavaScript in all modern web browsers

Cons:

  • 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)
  • JavaScript: to create the map and interactivity (example: script.js)

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)