Plan Your Summer Baseball Trip With a Dynamic Web App Map

Are you a baseball fan trying to figure out a trip to follow your favorite team on a cross country road trip? Or maybe you want to plan a trip to visit some of the more historic baseball stadiums around the country, and want to make sure you are there for game day? Or maybe you just want to see locations of games happening day by day across the states? Search no longer - my Interactive Baseball Calendar Map will solve your fandom woes!

There are three simple options for using the tool, outlined in the following steps.

Step 1: Use Case #1 - Summer Ballpark Tour

Say you want to visit Wrigley Field (Chicago), Great America Ballpark (Cincinnati), and PNC Park (Pittsburgh) at the end of August. Set the slider to the date for the start of your trip, say . Notice which parks geographically have games. Hover/click on a marker to see the opponent, scheduled start time, and MLB Game Link. Drag the slider along to match up to your trip and see which ballparks are hosting which games. It looks like August 20th to the 23rd has the games you want, and you could even squeeze a trip to Comerica Park in Detroit if you're feeling ambitious!

Step 2: Use Case #2 - Follow Your Favorite Team!

If you are a big fan of a particular team (Athletics, for example) you can set that team in the drop down next to the slider. Now that team will be highlighted for both home and away games, while all other team markers will be replaced by generic ones. Move the slider along and see if there is an enticing trip path for you. Hover/click on a marker to view game details, with live scores if the game is in progress. Icons show double headers and rain delays, too.

Step 3: Simply Play!

Lastly for a simple and dynamic visual experience of the geographic baseball calendar, you can simply move the slider back and forth and see the team icons move around the map.

Next, I will outline the technical steps for making such a map. These steps can easily be repeated for your favorite sports league.

Step 4: Data Preparation

The first step for this tool involves gathering the data. All prepartion is in the folder data_prep/. For this baseball app, I was fortunate to find 2015 comma-seperated-value (CSV) data on reddit here. I used python to iterate over all 30 teams in the CSV file, geocoders python library to do park name lookup to latitude and longitude coordinates, and fianlly print statements formatted in sqlite3 format. Sqlite3 insert statements are also created for every scheduled game. Finally, these statements are executed to create a sqlite3 database with two tables - teams and schedules.

Step 5: Create Client-Side Data

Unfortunately, there is not easy and quick solution for reading sqlite3 database on the client side, and I did not feel like complicating this project by introduction a server-side database component. So I wrote a python script - generate_js_array_schedules.py which reads the created sqlite3 database and outputs the data in easily accesible javascript arrays. Now my app can access data on the client side - find all games by calendar day and team locations by team code.

Step 6: Putting It All Together

I now have all the data in a javascript array - team geolocations and list of games for each day. Based on where the slider is set by the user, I perform an ajax jquery call to a MLB-provided web-based service which returns all games for a given day in xml format, with live score updating. Now all that is left is parsing the xml client side and placing the team markers on a map using the Google-provided API. The onclick and onhover events provide the game detail data, and the MLB game link is generated based on the unique game ID from the xml. Finally, upload the HTML page with the map and associated javascript files to a web host to share with the world.

Now you have a working map with a slider controlling which games to show for which day, and a generic tutorial for creating your own. Enjoy!

All feedback welcome, regarding any aspect of this project.