Skip to content

Interactive map of USA. Written with JavaScript, SVG, Python. Data is JSON. User clicks an SVG state shape, which triggers the display of that state's contact information in a text field below the map. Or, user selects a product type from the drop down menu causing the states that contain that selection to get filled white on the map. Events ope…

LindsayDenotes/exploreMapPy

Repository files navigation

exploreMapPy

My name is Lindsay Brown. When I worked as a Web Development Specialist at AASHTO (the American Association of State Highway and Transportation Officials), I developed this interactive map to empower state DOT employees and private industry manufacturers to retrieve product type and contact information about every state DOT.

I created and implemented this single page web application from concept through to implementation in order to reduce the high volume of phone call inquiries to AASHTO staff. Questions often entailed "Who should I talk to about my product? Do you have their phone number?" and "Which state DOTs will care whether or not my product gets certified by your program?" I conducted the survey to gather the relevant information from the 52 state DOTs and exported the results into an Excel worksheet.

This repository holds the code for the second version of the interactive map. I completed it in July 2015. Each state shape is a scalable vector graphic (SVG) group element with a unique ID that corresponds to a key in the JSON. There is click functionality as opposed to hover, and select functionality on a new drop down menu feature. The first version of the map had no drop down menu, forcing users to click on each of the 52 state shapes one-by-one to find out which state DOTs used a certain product type. Prior to the publication of my interactive map on ntpep.org, NTPEP's website had 15 or so separate static maps on separate web pages to convey the product usage information, but without the contact information. The map puts all that information in one, user-friendly interactive visual graphic.

The map is archived on my WordPress blog: denotetoday.com.

About

Interactive map of USA. Written with JavaScript, SVG, Python. Data is JSON. User clicks an SVG state shape, which triggers the display of that state's contact information in a text field below the map. Or, user selects a product type from the drop down menu causing the states that contain that selection to get filled white on the map. Events ope…

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published