For the 2017 North Shore district event I decided to create an interactive map that would show where the different teams attending our event are coming from.
Right off the bat I determined that I wanted to collect data from the different teams attending our event using a service provided by thebluealliance. This service has an amazing REST api that using a simple "event code" provides a JSON payload containing all the information I will ever need about a team.
To plot this data I considered using services like HamsterMap, however, I decided against this because:
The Script First Take
The JSON I got from thebluealliance looked something like this:
Great! Now all I need to do is access this JSON in a script, geocode the addresses using Google Maps' Geocoding service, and using the latitude and longitude that are spit out place markers on the map. I won't bother posting the whole JS script for reasons that will become clear.
Awesome! That means we are do— Uh oh wait a second. What's this?
Errors everywhere! After looking at the google apis dashboard I quickly found out that this was because I enabled the wrong API and needed to enable the geolocation service when loading google maps. This explained that I needed to append the GET parameter "&libraries=geolocation" to the link I was using. With this fix applied I ran into another problem. The browser window began to crash and slow down.
I removed geocoding from my JS and plopped it right into the original python script. Luckily there was already a very good implementation of the API for python (here is the library I used). I later made the decision that it would be nice if I could calculate using the latitude and longitudes of the markers what the bounding box of all teams were. By feeding this bounding box into the google maps API I could make it zoom on a specific portion of the map automatically.
New Python Script
The final addition I made was to make an info window popup for the individual teams when you click on the marker. This would include a team motto, the team name and number, and the team website in a neat little package. I ran into many problems with this but for brevity I'll omit them and the fixes I made for them.
Some of the Final JS
Woohoo! A quick project for a nice looking element on our North Shore 2017 Steamwork's page and a chance to hone skills at utilizing APIs, diagnosing problems in implementation, and working around those problems!