Project 3: Leaflet

Watercolor Leaflet Map | Buffalo, NY

The "slippy map" (tiled web map) seen above was created using Leaflet, an open-source JavaScript mapping library. The teardrop marker, indicating the location of the University at Buffalo North Campus, was added by use code to create a marker at the appropriate latitude and longitude coordinates. The stylized watercolor basemap, provided by Stamen design, was made possible by making reference to their javascript file in my own Leaflet map file.

Interactive Vacancy Leaflet Map | Buffalo, NY

The map seen above, also created using Leaflet, incorporates GeoJSON point data indicating vacant lots in Buffalo, NY. A shapefile of vacant land parcels in Buffalo was converted from polygons to centroids. The shapefile was then to GeoJSON format in QGIS; this GeoJSON file was then converted into Javascript format. The GeoJSON points were added to the map, and the Javascript variable was used to create an interactive popup indicating the land value of each of the vacant properties. The grayscale basemap, provided by Stamen design, was made possible by making reference to their javascript file in my own Leaflet map file.

Choropleth Population Map | United States

The map seen above, also created using Leaflet, was created using a GeoJSON file containing data about the shape and population of US States. The GeoJSON file was added to the map to indicate state shapes; these outlines were then transformed into a choropleth density map by using code within Leaflet to return a color based on population density. The grayscale basemap, again provided by Stamen design, was made possible by making reference to their javascript file in my own Leaflet map file.

Watercolor Basemap seen in first map courtesy of maps.stamen.com.

Grayscale Basemap seen in second map courtesy of Stamen.TonerLite.

Grayscale Basemap seen in third map courtesy of Esri.WorldGrayCanvas. Map 3 created following tutorial on Leaflet.com; United States GeoJSON data available here.