The materials that are featured here illustrate my cartographic and geo-spatial work both as they currently exist and as I continue transitioning into the field of web-based geospatial analysis and web-mapping.
Content on this page will change as I develop and create more maps showing a variety of geo-spatial topics. Stay tuned and visit this page often!
Caldwell, ID Community Assessment
This assessment examines the City of Caldwell, Idaho for areas (e.g. Census Tracts) with need for greater assistance and support for citizens that live in those locations. In some cases there may be a lack of some resource such as healthy food sources, high speed internet, transportation options and educational opportunities for all ages. Conversely, some areas of the city might have more of some phenomena or social condition such as neighborhood cohesion, violent crime, traffic accidents, and capital investment.
Storymap features include:
Map interaction that allows paning, zooming in/out, and pop-up boxes when a location or featured is selected
Clicking on point locations triggers a information box that contains additional information
Storymap that provides narratives on the assessment background, demographic features (by Census Tract),
Software, tools, methods, and data used:
GitHub (repository hosting service)
Open Street Map
ArcGIS Online
ArcPro
ESRI Storymaps
Grand Rapids Community Assessment
This assessment examines the City of Grand Rapids (Michigan) for areas (e.g. Census Tracts) with need for greater assistance and support for citizens that live in those locations. In some cases there may be a lack of some resource such as healthy food sources, high speed internet, transportation options and educational opportunities for all ages. Conversely, some areas of the city might have more of some phenomena or social condition such as neighborhood cohesion, violent crime, traffic accidents, and capital investment.
Storymap features include:
Map interaction that allows paning, zooming in/out, and pop-up boxes when a location or featured is selected
Clicking on point locations triggers a information box that contains additional information
Storymap that provides narratives on the assessment background, demographic features (by Census Tract),
Software, tools, methods, and data used:
GitHub (repository hosting service)
Open Street Map
ArcGIS Online
ArcPro
ESRI Storymaps
Baltimore Community Assessment
This assessment examines the City of Baltimore, Maryland for areas (e.g. Census Tracts) with need for greater assistance and support for citizens that live in those locations. In some cases there may be a lack of some resource such as healthy food sources, high speed internet, transportation options and educational opportunities for all ages. Conversely, some areas of the city might have more of some phenomena or social condition such as neighborhood cohesion, violent crime, traffic accidents, and capital investment.
Storymap features include:
Map interaction that allows paning, zooming in/out, and pop-up boxes when a location or featured is selected
Clicking on point locations triggers a information box that contains additional information
Storymap that provides narratives on the assessment background, demographic features (by Census Tract),
Software, tools, methods, and data used:
GitHub (repository hosting service)
Open Street Map
ArcGIS Online
ArcPro
ESRI Storymaps
Fox Valley Park District
Map features include:
Several interactive elements that give the user the ability to select various data attributes and have the map dynamically update. User interaction is one of the most important differences between traditional static maps and web-based maps and the ability to change the map not only offers new possibilities for understanding the information, but It also makes engaging with a map more interesting and rewarding: it's fun!
Clicking on point locations of pharmacies, hospitals, and grocery stores calls up a pop-up box that provides the name and address of the specific location.
An information panel, available when interacting with features, which will display more information than space allows within the popups or tooltips.
Software, tools, methods, and data used:
GitHub (repository hosting service)
Open Street Map
ArcGIS Online
ArcPro
ESRI Storymaps
Getting to and from in Chicago
This project is the culmination of lessons and techniques learned throughout the coursework for my graduate certificate in ineractive web-mapping at the University of Kentucky, Design For Interactive Web Mapping. The map includes a wide variety of user interaction elements that include check boxes to turn on/off specific point location layers, marker clustering which aggregates large numbers of locations into one marker at a given scale, ability to drop a marker to designate a travel starting point, and the ability to click on a second point location to determine the distance (in miles) and time (by walking, biking, driving) to travel to the destination point.
Map features include:
Several interactive elements that give the user the ability to select various data attributes and have the map dynamically update. User interaction is one of the most important differences between traditional static maps and web-based maps and the ability to change the map not only offers new possibilities for understanding the information, but It also makes engaging with a map more interesting and rewarding: it's fun!
Clicking on point locations of pharmacies, hospitals, and grocery stores calls up a pop-up box that provides the name and address of the specific location.
Because of the large number of point locations that cluster in the City of Chicago, a Leaflet plugin was used
Leaflet marker cluster. This plugin clusters the markers and shows the number of items in each cluster, and as the user zooms in, the map adjusts the clusters based on the current view. This not only makes the map easier for the user to understand, it’s also a more efficient form of displaying dense concentrations of data points.
An information panel, available when interacting with features, which will display more information than space allows within the popups or tooltips.
Key concepts:
Used the drawMap() function which uses GeoJSON data to create a L.GeoJson object with basic styles, adds it to the map, and then fits the map view to the extent of the layer.
Used the AJAX tool to load an external file containing GeoJSON data. These data contained both the geometry information for drawing SVG elements on the map and the attribute data.
Loaded GeoJSON data using the JQuery method .getJSON(). The callback function executes and accesses the GeoJSON data which has been parsed by JQuery and preserved in the same JSON structure
Created and used the Leaflet L.GeoJson object method
Invoked Leaflet methods on layer groups and individual layers
Used a Leaflet layer control to manage multiple data layers
Loaded GeoJSON data stored as a JavaScript object and saved within an external file into the script
Used the Leaflet L.geoJson() method to draw point-level data to a Leaflet GeoJson layer
Software, tools, methods, and data used:
GitHub (repository hosting service)
Used Mapshaper.This site enables editing map data in shapefile, GeoJSON, TopoJSON, DBF, and CSV formats.
Used Convert CSV files to Geojson.This site converts Comma Separated Values (CSV) and Excel files into Geojson (and other formats) by loading or a CSV or Excel file, or loading from an external web page. This tool runs on the client-side using Javascript, so data never leaves a local computer. Saved the output by copying or use the "Download Result" feature.
Used Leaflet marker cluster.This not only makes the map easier for the user to understand, it’s also more efficient.
Brackets (text editor)
GeoJSON (data format for representing geographic features)
Leaflet (open source Javascript library for web-mapping apps)
2019 Road Trip web page with interactive map
This project synthesized a variety of tools, techniques, and methods throughout MAP 671, Introduction to New Mapping.
Key lessons learned include:
Creating a process to export Google location data from my Google account into a usable format for mapping. This involved:
Exporting data from Google location history located on cell phone. Because Google allows only exporting in monthly time frames, I had to export each day for the time frame that I wanted as a .KML file.
Upon exporting each day's data, I then uploaded that data to Geojson.io where I was able to see and verify all point locations.
Next, I was able to export all 15 days of individual .KML files as one geojson file which was then uploaded to Mapbox
Two duplicate files were made of this dataset to show a line segment of my travel route and a second to show point locations
These two datasets were then styled with color and size to create a visually appealing map features.
Working with numerous CSS and HTML refinements to create a visually and interactively pleasing map. Specific elements that I explored and used include:
Resizing large (both in pixels and megabytes) photos
Placment of photos within a two column web page
Inserting a Mapbox map within the web page
Creating hyperlinks that provide readers with a convenient way to gain additional information on the location or site that was visited.
Styled datasets in Mapbox for point locations, line segments, and feature labels.
A seperate geojson file was created of a smaller set of locations to highligh key areas that would help to provide reference on the map.
Web page and map features include:
Details for selected points of interest that were visted on the trip including an image/photo of the location.
Paragraphs providing a synopsis of the points of interest
Hyperlinks (in blue text) that directs the user to an external web source of additional information on the point of interest
Initial web map (created in Mapbox studio) that shows the specific travel route based on location data. Points of interest are labeled that changes based on user zoom and panning actions.
A link to the interactive map in Mapbox
Software, tools, methods, and data used:
GitHub (repository hosting service)
Used Mapshaper.This site enables editing map data in shapefile, GeoJSON, TopoJSON, DBF, and CSV formats.
Used Convert CSV files to Geojson.This site converts Comma Separated Values (CSV) and Excel files into Geojson (and other formats) by loading or a CSV or Excel file, or loading from an external web page. This tool runs on the client-side using Javascript, so data never leaves a local computer. Saved the output by copying or use the "Download Result" feature.
Brackets (text editor)
Qgis (open-source GIS software)
GeoJSON (data format for representing geographic features)
Mapbox web service
Devils Tower National Monument
This project involved creating a web page to feature and describe Devils Tower National Monument in northeastern Wyoming. In addition to a two-column layout that provided text and graphics describing the geologic and historical nature of the landmark, the web page includes a dynamic map created using Mapbox Studio. This project involved initially acquiring data from the United States Board of Geographic Names (GNIS), working with Mapbox Studio to create a baselayer, add custom layers (points), specifying the map position, and styling the label visualization with data conditions.
See the map: Devils Tower
Software, tools, methods, and data used:
GitHub (repository hosting service)
Brackets (text editor)
Qgis (open-source GIS software)
Created elevation contours with Qgis GDAL (an open-source computer software library for reading and writing raster and vector geospatial data formats)
Used Qgis tools to clip raster by extent and extract elevation contour lines
Used Qgis raster and field calculators
Worked with MapBox to import raster and vector layers as well as to style layers for color and visual appearance
Styled and published map of Devils Tower showing the spatial extent and contour lines based on the USGS 1/3 arc-second DEM (Digital Elevation Model).
Used Qgis GDAL to convert raster elevation units and create contours.
Map of Oregon Unemployment by County
The focus of this project was to provide multiple user interaction elements to explore the data within the spatial and temporal context of unemployment rates in Oregon counties and more broadly, the entire state.
Map features include:
Choropleth map displays state and county-level unemployment rates by year.
Several interactive elements that give the user the ability to select various data attributes and have the map dynamically update.
A slider bar for the user to change the year of data that updates both the choropleth map and the information panel.
A popup/tooltip allows the user an interactive experience to retrieve specific values (e.g. unemployment rate and county name) from individual counties
The ability to switch between data sets using a slider bar to change years and have the map dynamically update to reflect these changes instantly.
An information panel, available when interacting with county features, which will display more information than space allows within the popups or tooltips.
Key concepts:
Used a JQuery .getJSON() method to make an AJAX request and load the json file.
Used Papa Parse, an in-browser CSV data parser, to load CSV data and convert it to JSON format.
Used AJAX to load an external file containing GeoJSON data. These data contained both the geometry information for drawing our SVG elements on the map (e.g., Oregon counties) and the data attribute data (e.g., unemployment rates for each county).
Loading GeoJSON data using the JQuery method .getJSON(). The callback function then executes, and accessing GeoJSON data, which has been parsed by JQuery and preserved in the same JSON structure.
Created and used the Leaflet L.GeoJson object
Created the classification breaks one time within the script using the entire range of data values.
Invoked Leaflet methods on layer groups and individual layers after creation
Used a Leaflet layer control to manage multiple data layers
Used the Leaflet L.geoJson() method to draw point-level data to a Leaflet GeoJson layer
Software, tools, methods, and data used:
GitHub (repository hosting service)
Papa Parse (Javascript .csv parser that converts .csv files to Json)
Brackets (text editor)
GeoJSON (data format for representing geographic features)
Leaflet (open source Javascript library for web-mapping apps)
AJAX (a collection of technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script)
Map of Kentucky Homeownership by County
The focus of this project was to provide user intaction elements to explore homeownership data within the spatial context of Kentucky counties.This map was built using custom Javascript code drawing upon the Leaflet Javascript Library as well as CSS and HTML styling rules.
Map features include:
Several interactive elements that give the user the ability to select various data attributes and have the map dynamically update.
Display housing characteristics (e.g. owned, owned with mortgage, rented) by county
A user interface element allowing the user to choose a new data attribute to dynamically update the map and legend.
An information panel, available when interacting with county features, which will display more information than space allows within the popups or tooltips.
The popup/tooltip allows the user an interactive experience to retrieve specific values from individual counties
Provide the user the ability to switch between data sets and have the map dynamically update to reflect these changes
Key concepts:
Introducing map elements of user interaction such as drop down layers, tool tip display on map of counties that is also linked to and updates an information panel.
Declaring functions (drawMap, getClassBreaks, getColor, drawLegend)
Refactoring a function for dynamic updating which involves executing blocks of code once and blocks of code that are executed repreatedly.
Creating and using the Leaflet L.GeoJson object
Invoking Leaflet methods on layer groups and individual layers after creation
Using a Leaflet layer control to manage multiple data layers
Setting universal styles and layer-specific styles using the L.GeoJson style option
Loading GeoJSON data – stored as a JavaScript object and saved within an external file into the script
Using the Leaflet L.geoJson() method to draw point-level data to a Leaflet GeoJson layer
Software, tools, methods, and data used:
GitHub (repository hosting service)
Brackets (text editor)
GeoJSON (data format for representing geographic features)
Jquery (JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation)
Leaflet (open source Javascript library for web-mapping apps)
Map of power plants displayed using propotional symbol sizes to visualize the amount of power produced from a particular fuel source (i.e. coal, solar, nuclear)
This map was built using Javascript code drawing upon the Leaflet Javascript Library as well as CSS and HTML styling rules.
Map features include:
Display power plant power generation using proportional symbol size to show the amount of power produced from a particular fuel source.
Allow the user to compare three different fuel sources (of any amount of generating capacity) by visually encoding the proportional symbols with distinct colors (i.e., make the symbol for each fuel source a different color).
A layer control to toggle on and off the visibility of various power plant data layers.
Styling the label text within the layer control to correspond with the color used to encode a specific power fuel source when the user clicks on the map once, the map display will change to only show plants within 500 km of the click event after the user clicks on the map to filter by distance and then clicks on any power plant currently visible, a popup will show specific information about the plant. this information should include the plant's name, its fuel source, and the distance from the plant to the the click point.
Software, tools, methods, and data used:
GitHub (repository hosting service)
Brackets (text editor)
GeoJSON (data format for representing geographic features)
Leaflet (open source Javascript library for web-mapping apps)
Key concepts:
Created using the Leaflet L.GeoJson object
Invoked Leaflet methods on layer groups and individual layers
Used a Leaflet layer control to manage multiple data layers
Setting universal styles and layer-specific styles using the L.GeoJson style option
Loaded GeoJSON data – stored as a JavaScript object and saved within an external file
Used the Leaflet L.geoJson() method to draw point-level data to a Leaflet GeoJson layer
Used L.GeoJson()options: pointToLayer to convert default Leaflet markers to circleMarkers, filter to show only features meeting specific criteria, and onEachFeature to bind Leaflet Tooltip objects to the features and attach additional event listeners such as mouseover and mouseout and using techniques for code refactoring.
Locations of Electric Vehicle Refueling Stations Throughout the U.S.
This map was created using JavaScript drawing upon the Leaflet Javascript library, Leaflet, CSS, and HTML, Leaflet's marker cluter library, and GeoJSON.
Software, tools, and data formats used:
GitHub (repository hosting service)
Brackets (text editor)
GeoJSON (data format for representing geographic features)
Leaflet (open source Javascript library for web-mapping apps)
Map features include:
Pan and Zooom
Tooltip on point location provides station name, city, hours, phone, address
Point locations expand or consolidate based on zoom in/out
Data source(s): National plugIn electric vehicle infrastructure analysis
Key concepts:
Outline a web mapping technology flow process
Work with Leaflet web-mapping library
Use marker clustering to consolidate large numbers of point locations
Convert data into GeoJSON format
Work with plugins (Leaflet Markercluster, Turf.js, Leaflet Omnivore, Chroma.js)
Incorporate basic user interaction features
Greenhouse Gas Emissions in Wisconsin (2015)
This proportional symbol map shows the relative magnitude of green house gas emissions (GHG) in 2015 by large facilites in Wisconsin. Data are shown by fuel combustion and process emissions. The use of proportional symbols was the better choice to illustrate the amount of Co2 since this is based on an exact point location. Proportional maps are also best suited when showing magnitudes, or amounts of some numerical phenomena relative to other locations.
This map was built using Javascript code drawing from Leaflet Javascript Library as well as CSS and HTML styling rules.
Map features include:
Pan and Zooom
Tooltip on point location provides station name, city, hours, phone, address
Point locations expand or consolidate based on zoom in/out
Software, tools, and data formats used:
GitHub (repository hosting service)
Brackets (text editor)
GeoJSON (data format for representing geographic features)
Leaflet (open source Javascript library for web-mapping apps)
Key concepts:
Outlined a web mapping technology process flow
Worked with Leaflet web-mapping library
Data wrangled .cvs data into GeoJSON format, using Leaflets CircleMarker to provide a visual affordance when mousing over a location, and incorporated basic user interaction features.
Data source(s): U.S. EPA FLIGHT
See the map: Map of greenhouse gas emitters in WI