Leaflet Thematic Polygon Map with Clickable Info Window template
By Jack Dougherty and Ilya Ilyankou, last updated March 17, 2016
View demo in new page
-Insert internal references to prior steps in this book. See the Edit and Host Code Templates section in this book. - Requires a free GitHub account to host your own version on the web.
Create Your Own: Fork a copy of the code template on GitHub
- Remember, if you have already forked one copy, go to your GitHub repository Settings to rename it, or create a new GitHub repo and use GitHub Desktop to upload template Files
Obtain a polygon boundary map in GeoJSON format
- Find open data repositories to download maps in geojson and other formats
- If map is in shapefile or KML or other format, convert with http://geojson.io or http://mapshaper.org
- Import polygon map into http://mapshaper.org. In this example, map filename is: ct-towns-simple.geojson
- See tutorial on Mapshaper.org to delete unwanted data columns or simplify file size
- Export as CSV to create generic spreadsheet of polygon names. In this example, column header is “town”
Prepare your spreadsheet data and join with the polygon map
- Open CSV with any spreadsheet tool to view data column of polygon names.
- Download or prepare your new spreadsheet data in rows to match polygon names.
- Insert columns of data into the CSV sheet. Use VLOOKUP function if needed.
- Save CSV with new name. In this example: ct-towns.csv
- Import ct-towns.csv as second layer into MapShaper.org.
- Use the drop-down to select the polygon map (ct-towns-simple.geojson) as the active, displayed layer.
- Click the Console and enter command to join the CSV table to the GeoJSON polygon, where the matching data columns are both named “town”
-join ct-towns.csv keys=town,town
- Export the newly joined map with a new filename in GeoJSON format
- Change the file suffix from .json to .geojson to avoid confusion. The new joined map data file is now named: ct-towns-density.geojson
Upload your map data and edit template in your GitHub repo
- The GitHub repo you created in the first step contains these files:
- ct-towns-density-2010.csv (the spreadsheet joined into the polygon map)
- ct-towns-density.geojson (the joined map data file)
- index.html (the primary web page)
- script.js (code to operate the map, to be modified below)
- style.css (code that styles the map)
- README.md (edit to insert a link to your own version)
- Upload your own map data geojson file
- Recommended: upload your own CSV spreadsheet file to
- In the script.js file, look for code comments labeled “Edit” to change references to geojson map data and its column headers, and also colors and ranges for the polygons and legend
- In GitHub, go to Branches and delete the existing “gh-pages” branch
- In GitHub, go to drop-down menu for Master branch, and type “gh-pages” to create new branch
- Content in the gh-pages branch will be hosted on the live web
Edit the README.md link to point to your own gh-pages branch, in this format: