Figuring out the ‘wibbly wobbly, timey wimey stuff’…
Our final rapid development challenge focused on us creating a “Memory Map”. I worked on this project with my fantastic team, Dani Willcutt, Juan Carlos Rico Noguera, and Vee Lawson. This mapping challenge allowed us to conceptualize spatial change over time. More particularly, my team decided to explore the most notorious spies throughout history from the 1500s through the present from the fictional perspective of the Agency to Classify and Monitor Evildoers (A.C.M.E). We were asked to create a narrative, to tell a story through our data. The map itself had to include 15 locations with unique markers and a time component. Using a Leaflet JavaScript API, we incorporated multiple JavasScript libraries, CSS, and HTML code to create our project. One of my teammates, Vee, created an amazing, thematic style for our base map using custom Mapbox tiles. We incorporated our map into a front end framework using a Bootstrap theme and started building. While we could have just forked Brian Geyer’s tutorial to create a Leaflet time slider incorporated in our map, we instead downloaded the code from both the Bootstrap theme and Brian’s repository to incorporate them together.
Using both a JSON data file & GeoJSON script, we created our markers and popups for each of the 15 individuals based on their location and time period. Now for the markers, this is where our trouble came into play. We were asked to create unique markers from a local .png file and this bit gave us all a bit of a run around. While we could figure out how to create the markers themselves, which we did using the ‘var new L.Icon’ class, the biggest issue was figuring out where the code was reading the variable. Turns out, it was not. Finally, we understood that the predefined Leaflet markers not in the original code so we had to integrate the new variable into the ‘var optionsObject’.
Which the markers in place, we also wanted to figure out how to include more than a two period time component, expanding our timeline into four distinct periods (1500s; 1700s; 1800s; 1900s-Present). We discovered that Brian coded two datasets for two periods, one using GeoJSON in his index and then calling a second dataset from an external JSON file. So we added two additional GeoJSON layers into the html script (which also took more time to figure out than I would like to admit). With my limited experience with creating interactive maps, having only created one once before, this was a great challenge to go above and beyond the map. By incorporating time, layers in a visualization give the audience a way understand the data in more meaningful way.
Recent Comments