The official repository for my interactive map published on www.ntpep.org. This project includes JavaScript, SVG, Python, and JSON. How it works: There are two events that the user can perform. The first is a click event. Upon being clicked, each SVG state shape triggers the display of that state's contact information in a text field below the m…
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
EventHandlerConditionals.txt
README.md
exploreMap.html
exploreMap.js
exportedSVGShapes.svg
google9e4040c4c64a21d5.html
makeDropdown.py
ntpepData
ntpepData.xlsx
ntpepInfo
ntpepInfo.xls
ntpepInfo.xlsx
processed_data.json
productMenu.html
productMenu.js
productTypes.csv
scriptCleanForContacts.py
stateInfoList.json

README.md

exploreMapPy

NTPEP stands for the National Transportation Product Evaluation Program. It is public-private partnership run by the American Association of State Highway and Transportation Officials (AASHTO). My name is Lindsay Brown. As a Web Development Specialist at AASHTO, I developed this interactive map that sits in an iframe on http://ntpep.org. Its purpose is to empower NTPEP's state DOT members and private industry participants to retrieve product type information about every state DOT that participates in NTPEP simply by selecting a product type from the drop down menu. When the user makes a selection, the state shapes that use NTPEP to evaluate the selected product type turn white. Also, upon clicking on any state shape, the text box below the map displays contact information for the subject matter experts for the clicked 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 NTPEP?" I conducted the survey to gather the relevant information from the 52 state DOTs and exported the results into an Excel worksheet. I wrote a Python script that read from the Excel worksheet and wrote to a specifically-structured JSON file.

This is 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 the 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; or, to save time, they called AASHTO. Prior to the publication of either version of my interactive map, NTPEP's website provided 15 or so static maps on separate web pages to convey the product usage information, but without the contact information, which is now displayed in one, user-friendly interactive visual graphic.

For any who are interested, the first version of my interactive map with hover functionality is published on my WordPress blog: denotetoday.com. It employed Adobe's createJS framework and wrote to the HTML5 canvas element.