Sahil Parikh
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2019
Introduction
Climate change continues to grow in severity, and the younger generations are noticeably taking a stand. Among them is Greta Thunberg, a 16-year-old environmental activist from Sweden, who first made headlines in 2018 when she played a pivotal role in organizing the School Strike for Climate movement. Her decision to refrain from attending school and protest outside Swedish parliament for stronger climate change action inspired millions to follow suit around the world.
But Greta wasn’t done there. She received an invitation to speak at the 2019 UN Climate Action Summit in New York City, and decided to attend. Greta opted not to fly in order to promote her pro-environmental stance on reducing carbon emissions. The Malizia II sailing yacht crew offered to bring both her and her father across the Atlantic Ocean. Greta agreed, and the boat sailed from Plymouth, England, to New York City on a carbon-neutral trip that once again rocked headlines worldwide.
Once she arrived in New York City, Greta proceeded with her plan to speak at the Summit, but also made small trips all around North America before getting ready for the 2019 United Nations Climate Change Conference (COP25) in Santiago, Chile. Due to national protests, Chile backed out from hosting COP25, and the conference has now been moved to Madrid, Spain. Having completed her tour of North America, Greta set sail again, this time from Hampton, Virginia, to return to Europe and eventually attend COP25.
The focus of this geovisualization project is on Greta Thunberg’s voyage from Europe to North America, from August 2019 to the present. Her voyage is visually communicated through an interactive web map.
Technology
The interactive web map was built using two main technology platforms: Mapbox and OpenStreetMap. Mapbox is an open source mapping platform that allows the user to build custom web maps and applications. It has a very generous free-to-use pricing tier based on map loads that most users will be able to get by with. Mapbox also provides the GL JS library, which is a JavaScript library that can render interactive maps from Mapbox and vector basemap tiles. Its API can be accessed using a token and style URL. Two specific API method examples were used in this web map: displaying a pop-up on click and flying to a location.
Mapbox’s API documentation can be found here for more information.
OpenStreetMap (OSM) is an open source, collaborative global mapping project that provides vector basemap tiles. It typically has to be accessed using a style URL, but Mapbox automatically references an OSM vector tile, so no additional code was required.
The web map was launched with the aid of two additional platforms: Sublime Text and GitHub. Sublime Text is a text editor that allows the user to edit and save HTML, JavaScript, and CSS. It was used to write and save the web map as an HTML file. GitHub is a popular software development platform that allows for code storage using repositories, version control, and minimal web hosting. It was used to externally host the web map through the GitHub Pages feature.
Note: a general knowledge of HTML, JavaScript, and CSS is recommended if attempting to replicate this project.
Data
Greta Thunberg’s voyage was widely documented by the media, but unfortunately not in one single place since multiple publications were reporting on her activities. Therefore, the data for this map had to be manually obtained. A general scan of the major news publications was conducted to determine her location on a given date and what she was doing in that location. Then, that group of locations was inputted into LatLong.net to obtain their individual geographic coordinates in decimal degrees.
Additionally, brief summaries of Greta’s activities were written up with the intention of displaying them in a pop-up textbox at each location.
How to Build the Web Map
The first step in building this web map is to ensure that you have access to all required technologies. Create accounts for Mapbox and GitHub, and download Sublime Text or some other text editor that will allow you to edit and save HTML/JavaScript/CSS.
Next, you need to obtain a Mapbox access token. This token will allow you to use the GL JS methods. Create a new HTML file in your text editor (use w3schools’s HTML tutorial on how to do this if you haven’t already). and follow Mapbox’s instructions with regard to placing these code snippets into your file:
Next, copy the code from Mapbox’s pop-up example into your HTML file. You’ll see multiple pop-up entries under map.addLayer. Replace the coordinates within the [ ] brackets with the ones you’ve obtained from LatLong.net and the descriptions of Greta’s activities, ideally in chronological order as you move down the file. Here’s an example:
The pop-up code does have built-in map markers, but I recommend adding custom markers to the map since they’re more versatile. Use Mapbox’s Custom Markers tutorial to do this.
The next step is to enable the functionality of flying to a location with the click of a button. Mapbox does have an example, but I used a modified example that allows the user to loop through a series of coordinates. Once again, copy the code into your file. Once again, replace the coordinates with the ones you’ve obtained, this time within the arrayOfCoordinates:
Create a title textbox by creating a div element, adding text using HTML formatting, and then adding the two buttons that will allow the user to fly back and forth between locations:
The basic functionality is now built into your web map! What’s left is to add styling to the map, the title textbox, the location pop-up textboxes, and the location map markers. Styling can be changed using CSS, and w3schools’s tutorial is a good place to start. Here’s an example of my CSS for the fly buttons:
Play around with the styling until you’re satisfied with the map’s visual appeal.
Open the HTML file in a web browser to test its functionality. Click both buttons to fly back and forth between the locations that Greta visited. Click on the map markers to display pop-ups at each location with a description of when Greta was there and what she did.
The final step is to make the HTML file publicly accessible. Create a new Public repository in GitHub and upload your file to it by dragging it in. For example, I named my repository “geovis”. Make sure your file is called “index.html”:
Next, click on “Settings” at the top right, scroll down to the bottom section called “GitHub Pages”. This feature will allow you to host your file as a web map page from your repository.
Choose the “master branch” as the Source, and the page should refresh, now displaying a URL at the top where your page is now published:
You’re done! Click on the URL and it should open in your browser, displaying the web map you just created?
Hopefully this post was informative and helpful. If you have any questions about the map and the process I used, don’t hesitate to email me at s5parikh@ryerson.ca.
Greta Thunberg’s Voyage, Mapped: https://s5parikh.github.io/geovis/