Skip to content
Leaflet thematic polygon (choropleth) map, with hover info window, using GeoJSON data
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
ct-towns-density-2010.csv
ct-towns-density.geojson
index.html
script.js
style.css

README.md

leaflet-map-polygon-hover

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

Demo

Benefits

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

Compare with

Credits

Create your own

See tutorial in the Leaflet Template section of Data Visualization for All book http://DataVizForAll.org

####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 http://MapShaper.org. 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 MapShaper.org.

  • 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 http://colorbrewer.org

You can’t perform that action at this time.