There has been a big push in the last few years to ensure that our natural areas are protected by some sort of law, regulation, governing body, park service, etc. How has this changed in Europe, specifically? Play the video below to see how my map answers this question by visualizing data taken from the Organization for Economic Cooperation and Development (OECD).

The OECD does a great job of collecting data on crucial indicators of the global economy, including biodiversity, infant mortality, poverty, employment, and more. I extracted data for the years 2000, 2010, and 2020 on the protected lands of European countries that are members of OECD. The data shows the percentage of protected land out of the total land area for each country. I had to process and prepare the data by doing quite a few things, including manually inputting the geographic centroid coordinates for each country. The icons that I have placed on my web map use these centroid coordinates as their anchors. 

I used QGIS to project all of my data, to convert the files into GeoJSON and then into JavaScript files, and to help determine the best way to class my data – I decided on the Natural breaks method with six different classes, because I wanted the change across the years to be very apparent, yet I didn’t want it to seem to rudimentary. I also used Mapbox to create a custom basemap for my map and then called those tiles at the beginning of my script. I also made my own svg icons using Inkscape because I wanted to be able to change the opacity of the icon – I think making the symbols transparent is very important in a graduated symbols map, especially because at the highest values, your symbols might be overlapping – keeping them at least somewhat transparent allows the data to still be read easily.

At first, I was determined to make my basemap “from scratch”, using xyz files and QGIS. However, I came to realize that my area to map – the entirety of Europe – was way too big for this method. I knew I’d need the help of a service like Mapbox or OpenStreetMaps. I’d used Mapbox before for a previous class and I really enjoyed it, so when it came time to prep the basemap for the final project, I chose Mapbox so I could customize the appearance and it would still have an element of “I-made-it” in there.
 
I was able to incorporate both a layer control and a slider tool onto my web page. The layer control in the top right corner of the map element allows you to see the three different thematic layers, the basemap, and toggle between them. All of the thematic layers have the same graduated symbols representing the percentage of total land area that is considered protected land. A user can toggle between the three years to see the rate of change using the layer control – I have the map set to start with only the 2000 layer on, but the user can add and remove layers using the layer control. Because I made my symbols transparent, the user could have more than one layer of data visible at once and still be able to discern if there was any change between the two years, and roughly how much. Or the user can use my slider tool at the bottom of the page for more of an immediate effect, to compare the change between the beginning of the two decades and the end; 2000 to 2020. Using the slider tool makes it easily apparent that there has been an overall increase in the amount of protected land across Europe.

To take a closer look at my data, the user can also select an icon and the attribute data will appear at the bottom of the screen. The data shown includes the name of the country, the year the data is from, and the percentage value. While clicking through my webmap the user will also notice that the icons turn purple-ish when selected, and when the user clicks somewhere else, they return to their original appearance.

I was able to include the layer control in the top right by following the plug in instructions on Leaflet for L.control.Layers. Because it takes two parameters, I grouped my layers into variables called basemap (just my basemap) and iconOverlays (which is a grouped layer of the three attribute layers, but you see them here as the 2000, 2010, and 2020 data. And I was able to add the slider tool at the bottom using a combination of CSS and HTML.