Tag: web map

Greta Thunberg’s Journey, Mapped

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/

Ontario Demographics Data Visualization

Introduction

The purpose of this project is to visualize any kind of data on a webmap. Using open source software, such as QGIS, solves one aspect of this problem. The other part of this problem is to answer this question:

How and what data can be visualized? Data can be stored in a variety of formats, and organized differently. The most important aspect of spatial data is the spatial information itself and so we need to figure out a way to display the data using textual descriptions, symbols, colours, etc. at the right location.

Methodology

In this visualization, I am using the census subdivisions (downloaded from Statstics Canada website) as the basic geographical unit, plus the 2016 census profile for the census subdivisions (also downloaded from Statistics Canada website). Once these data were downloaded, the next steps were to inspect the data and organize them in a fashion so that they could be easily visualized by the shapefiles. In order to facilitate this task, we can use any relational database management system, however, my preference was to use SQL Server 2017 express edition. Once the 2016 census profile has been imported into SQL Server, the “SQL Queries” [1] file can be run to organize the data into a relational table that can be exported, or copied directly from the result-set on management studio and pasted, into excel/csv; the sheet/file can now be opened in QGIS and joined to the shapefile of Ontario Census Subdivisions [2] using CSDUID as the common field between the two files.

Using the qgis2web plugin, all data and instructions are manually chosen on a number of tabs. You can choose the layers and groups you want to upload, and then customize the appearance and interactivity of the webmap based on available options. There is the option to use either Leaflet, or OpenLayers styles on QGIS version 3.8. You can Update preview and see what the outcome will look like. You can then Export the map and the plugin will convert all the data and instructions into json format. The most important file – index.html – is created on the directory you have specified.

index.html [1] is the file that can be used to visualize the map on the web browser, however, you need to first download all the files and folders from the source page [1]. This will put all the files on your (client) machine which makes it possible to open index.html on localhost. If the map files are uploaded on a web server, then the map can be viewed by the world wide web.

Webmap

The data being visualized belongs to the population demographics (different age groups). The map of Ontario’s census subdivisions is visualized as a transparent choropleth map of 2016 population density. Other pieces of demographics information are embedded within the pop-up for each of the census subdivisions. If you hover your cursor on each of the census subsivisions, it will be highlighted with a transparent yellow colour so you can see the basemap information on the basemap clearer. If you click on them, the pop-up will appear on the screen, and you can scroll through it.

There are other interactive utilities on the map such as controllers for zooming in and out, a (ruler) widget to make measurements, a (magnifying glass) widget to search the entire globe, a (binocular) widget to search only the layers uploaded on the map, and a (layers) widget to turn layers and basemaps on and off.

Limitations

There are some limitations that I encountered after I created this webmap. The first, and most important limitation, is the projection of the data on the map. The original shapefile was using the EPSG code of 3347 which uses the Canada Lambert Conic projection with NAD 1983 datum. The plugin converted data into the most common web projection format, WGS 1984, which is defined globally by Longitude and Latitude. Although WGS 1984 prevents the hassle of using projected coordinate systems by using one unified geographic projection for the entire globe, nevertheless, it distorts the shapes as we move farther away from the equator.

The second limitation was the fact that my transparent colours were not coded into the index.html file. The opacities are defined as 1. In order to control the level of opacities, the index.html file must be opened in a text editor, the opacities changed to the proper levels, ranging between 0 and 1, and lastly save the edits on the same index.html file.

The next limitation is the size of files that can be uploaded on github [3]. There is a limit of 100 MB on the files that can be uploaded to github repositories, and because the size of the shapefile for entire Canadian census subdivisions is over 100 MB, when converted to json, it could not be uploaded to the repository [1] with all the other files. However, it is possible to add to geojson formatted file (of census subdivisions) to the data directory of the repository on the localhost machine, and manually add its location with a pair of opening and closing script tags on the index.html file on the body tag. In my case, the script was:

<script src=”data/CensusSubdivisions_4.js“></script>

The name of the file should be introduced as the very beginning line of the geojson file as a variable:

var json_CensusSubdivisions_4 = {

And don’t forget that the last line should be a closing curly braces:

}

Now index.html is aware where to find the data for all of the Canadian census subdivisions.

What’s Next?

To conclude with the main goal of this project, which was stated in the introduction, we now have a framework to visualize any data we want. Which data we want to visualize should change our methodology becasuase the scripts can be adapted accordingly. What is more important is the way we want the data to be visualized on the webmap. This tutorial presented the basics of qgis2web plugin. Once the index.html file is generated, other javascript libraries can be added to this file, and depending on your level of comfort with javascript you can expand and go beyond the simple widgets and utilities on this webmap. 

  [1]  https://github.com/Mahdy1989/GeoVisualization-Leaflet-Webmap/tree/master  

 [2] There is a simple way to limit the extent of the census subdivisions for the entire Canada, to the Ontario subset only: filter the shapefile by PRUID = '35' which is the code for Ontario.

[3]  https://help.github.com/en/github/managing-large-files/what-is-my-disk-quota