Skip to content
Leaflet thematic polygon (choropleth) map, with hover info window, using GeoJSON data
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Mar 14, 2016
ct-towns-density-2010.csv upload all Mar 14, 2016
ct-towns-density.geojson upload all Mar 14, 2016
script.js modified code for mobile Apr 10, 2016
style.css upload all Mar 14, 2016


Leaflet thematic polygon (choropleth) map, with hover info window, using GeoJSON data



  • This GeoJSON version is simpler for novices to understand, since they can create and join GeoJSON data file in
  • Works in iOS and Android mobile devices

Compare with


Create your own

See tutorial in the Leaflet Template section of Data Visualization for All book

####General overview of steps below

  • Join a GeoJSON polygon map with spreadsheet data
  • Modify color ranges and info box text & variables as needed
  • Upload all files to a forked or new GitHub repository, create GitHub pages branch for live web host

####Detailed steps:

  • Start with GeoJSON polygon map with no numerical data, such as: ct-towns-borders.geojson

  • Import polygon map into Simplify to reduce size as needed.

  • Export as CSV to create spreadsheet of polygon names. In this example, column header is "town"

  • Open CSV with any spreadsheet tool. Insert columns of data into the CSV sheet. Use VLOOKUP function if needed.

  • Save CSV with new name: ct-towns.csv

  • Import ct-towns.csv as second layer into

  • Use the drop-down to select the polygon map (ct-towns-borders.geojson) as the active, displayed layer.

  • Click the Console and enter command to join the CSV table to the GeoJSON polygon

    -join ct-towns.csv keys=town,town
  • Export the newly joined map with a new filename in GeoJSON format: ct-towns-density.json)

  • Change the file name suffix from .json to .geojson to avoid confusion

  • Fork this GitHub repository, or create your own, with these files (or equivalent):

    • index.html
    • script.js
    • style.css
    • ct-towns-density.geojson (the data file)
  • in index.html, adjust the reference to the data file

  • in script.js, adjust the hover info box text and references as needed

  • in script.js, Adjust the ranges with

You can’t perform that action at this time.