Creating a Web-Based Choropleth Map from Scratch

Using QGIS, GeoJSON object layers, and Leaflet's JavaScript API.

A Browser-Based Choropleth Map made from Open Data and Leaflet's JS API

This was a laboratory assignement for my Web-Based GIS course. In it, we created a choropleth mashup map using open data from various internet sources and a mapping platform called Leaflet. I chose to map homelessness rates across Washington Counties.

To complete this assignment, I first gathered my data. The county shapefile layer is from the US Census Bureau's MAF/TIGER Database (Master Address File/Topologically Integrated Geographic Encoding and Referencing - MTDB for short). This information is available for download from data.gov. I also used homelessness data from the Washington State Department of Commerce's Homelessness Management Information System (or HMIS for short).

Once I had my data gathered, I used a free, open source GIS program called QGIS to combine the data using a spatial join, and then exported it as a GeoJSON file. Using an open source JavaScript mapping API called Leaflet, I then constructed a mashup inside an HTML document using my GeoJSON on top of a Mapbox basemap. This type of API allows for a fully-customizable map using whatever data, symbology, and interactive features you chose. Take a look at my map below, or click here to view it in a new window.