Scholten Work Portfolio

Getting to and from in Chicago

Data source:Chicago Data Portal

This project is the culmination of lessons and techniques learned in MAP 673, 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, and data formats 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)

See the map: Getting to and from in Chicago

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.

Utilize a technology and software flow the included Bracets as my text editor and GitHub to store my data in repositories and serve as a version control.

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, and data formats 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

See the map: 2019 Road Trip

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.

Software, tools, and data formats 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.

See the map: Devils Tower

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 or-counties.json file.

Used the drawMap() function which uses GeoJSON data to create a L.GeoJson object with basic styles, add it to the map, and then fits the map view to the extent of the layer.

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 using 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

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, and data formats 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)

See the map: Map of Oregon Unemployment by Counties

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, and data formats 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)

See the map: Map of Homeownership Characteristics by County

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 encode visually the amount of power produced from a particular fuel source.

Allow the user to compare three distinct 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, 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:

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

Built a nested looping structure to loop through one of the Json objects properties, and for each time that is performed looping through all the properties of the second object.

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.

See the map: Map of power plants using coal, solar, and nuclear power as power sources

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:

Outlined a web mapping technology flow process

Worked with Leaflet web-mapping library

Used marker clustering to consolidate large numbers of point locations

Converted data into GeoJSON format

Worked with plugins (Leaflet Markercluster, Turf.js, Leaflet Omnivore, Chroma.js)

Incorporated basic user interaction features

See the map: Map of Locations of Electric Refueling Stations Throughout the U.S.

Walkability and Recreation in Dupage County, IL

The focus of this project was to show some select recreational points of interest such as parks and bike trails in relation to other key geographic locations important to outdoor activity such as public bathrooms and cafes in Dupage County, a western suburb of Chicago.

Software, tools, and data formats used:

GitHub (repository hosting service)

Brackets (text editor)

GeoJSON (data format for representing geographic features)

Qgis (open-source GIS software)

Key concepts:

Worked with Open Street Map to acquire local/regional micro data

Performed geoprocessing (e.g. spatial analysis) using the buffer tool

Used QuickOSM to acquire OSM tags to expedite the data acquisition procress by querying key values of map data

Used QuickOSM Processing Toolbox to remove unnecessary data fields

Refined the symbology process of point, line, and polygon features by exploring the tools and methods in Qgis

Created vector data layers such as points, lines, and polygons using Qgis tools (Layer>Create Layer)

Used the 'Select by Location' tool to locate cafes, bathrooms and other points of interest in the general area that intersect one mile buffers around each park. Using this tool for this process preserved key attribute information which would have been lost if the clip or intersection tool were used.

Effort was also spent creating the proper visual hierarchy for the maps and ensuring an attractive map product. Coordinate Reference System: NAD83(HARN)/Illinois East (ftUS) EPSG:3443. Basemap: Open Street Map.

See the map:Map of Dupage County

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

Map of Home Ownership in Kentucky Counties

This map was shows the geographic distribution of home ownership in Kentucky by county.

This map was created using JavaScript, Leaflet, CSS, and HTML.

Map features include:

Pan and Zooom

Tooltip on point location provides percentage of households that either own their home or have mortgages

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 process flow

Worked with Leaflet web-mapping library

Converted data into GeoJSON format

Used JQuery library to apply style rules to HTML elements and handle user interaction events

Used JQuery to load data into the map document for use by Leaflet map

Incorporated basic user interaction features

Classified and colored ranges of data

See the map: Map of power plants using coal, solar, and nuclear power as power sources

Balancing Habitat Preservation with Transportation Needs in Centre County Pennsylvania

The goal of this map is to visualize those areas in Centre County, Pennsylvania that meet specified criteria. More specifically, the analysis will be used by the Centre County Planning Office to explore a proposed biological reserve system within Centre County. Areas that meet specific criteria would be protected based on a variety of factors including the number of different plant and mammal species and habitat quality. The map produced from this geospatial analysis will assist the decision making process of government officials in evaluating the proposed biological reserve system. This map illustrates multiple variables related to land use, habitat population, and transportation planning

One of the challenging, but also practical elements of this lesson was working with both vector and raster data. Vector data include such phenomena as points (specific locations), lines (highways and roads), and polygons (park boundaries, habitat areas, zoning districts). Raster data represent a continuum of some phenomena such as temperature, climate, or elevation and are represented by cells that have some value and comprise a grid or matrix-like layer. Working with raster data requires an understanding that the cell size of a raster layer can affect the analysis process and can affect the granularity of the level of detail of layers.

Numerous GIS methods were used in compiling the results of this map. Among them were:

Joining a table (specie rich) with no geographic attribute to a shapefile (Study Areas) based on a unique field (BLOCK_ID).

Using the Select by Attribute and Select by Location operation in the attribute tables of several layers

Adding new fields to several attribute tables (e.g. areas with 70 or more species)

Using the Field Calculator to compute new data based on existing fields in several attribute tables

Observing commonly accepted cartographic principles such as visual hierarchy, inclusion of north arrow and scale bar, and proper use of space around elements

Creating buffers around transportation centerlines (e.g. roads, highways, interstates) using the buffer tool in the Analysis/Proximity toolbox

Using the Union tool to combine multiple buffer layers for each of the three road types into one layer (Unioned_Buffer_Within_SpeAre1)

Using the reclassify operation to create categories of different data types (Reclass_10 percent slope)

Project criteria were defined as:

Greater than 70 bird and mammalian species combined

Less than 10% of each study area occupied by buffered roads, highways, and interstates

High habitat potential

Publicly-owned land

Forested areas

Slope less than 10%

The map was created using ArcGIS as well as U.S. Census and Pennsylvania state and county level data.

See the map: Map of Centre County Pennsylvania

The Best Two Hour Bike Ride in Dane County, WI

This map was built using Javascript code drawing upon the Leaflet Javascript Library as well as CSS and HTML styling rules, and converting a Google travel route to GeoJSON format.

Map features include:

Pan and zoom

Mouse-in and out of point locations

Tool-tip information upon hovering over point locations

Key concepts:

Outlined a web mapping process flow

Worked with Leaflet web-mapping library

Incorporated Leaflet tooltip markers

Converted a Google travel route by copying and pasting the map URL into the web tool Maps to GPX and Converting it into a GeoJSON format

Incorporated basic user interaction features.

See the map: Project 5 Map of the best two hour bike ride in Dane County, WI