Leaflet Map Templates
by Ilya Ilyankou and Jack Dougherty, last updated March 21, 2017
While beginners appreciate the drag-and-drop map tools and tutorials described earlier in this book, such as BatchGeo, 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.
- Pros of working with Leaflet (https://leafletjs.com):
- 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||Best use and tutorial chapters|
|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
** TO DO ** - more template links to come. . .
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)