Introducing YouthMappers

Author: Daniel Council

Geovis Project Assignment @RyersonGeo, SA8905, Fall 2021

Project Link:


During my time in undergrad, I became involved with an international network of student mappers called YouthMappers. Through virtual internships and engagement with the chapter at my university, I started to become an active member of the network. For starters, one of the main goals of YouthMappers is to create open data for areas of the world that are lacking readily available spatial data. 

The concept of open data is similar to Wikipedia, it can be provided by anyone. The primary method of open data collection used is OpenStreetMap, which is an open source platform that anyone can edit and upload spatial information onto, such as roads and buildings, for example. Many companies, organizations, and websites use data found on OpenStreetMap. The popular mobile-phone game, Pokémon Go, sources its map data from OpenStreetMap. However, arguably the most beneficial aspect of open data is that it is free, readily available, and accessible to anyone.

YouthMappers Chapters around the Globe

There are currently 291 YouthMappers chapters located throughout 62 countries around the globe. My chapter was located in Muncie, Indiana, at Ball State University. I interned with YouthMappers to research how open data is being used in Belize, and I also looked into how the Belizean government views open data as opposed to official sources of information. Additionally, I worked with the YouthMappers Validation Hub, which works to validate mapping projects conducted by YouthMappers chapters.

Project Description

For my geovisualization project, I was inspired by my involvement with YouthMappers. I wanted to introduce the organization to our class using technology provided by Esri. I often work with Dashboards, web maps, and Story Maps, but I was interested in trying out one of the other apps that Esri hosts in order to learn a new tool. I came across Experience Builder in ArcGIS Online, and was interested in how it can almost be used as a tool for creating a website, one that can be viewed across any type of device.

While there is a lot of overlap in functionality between Experience Builder, Dashboards, and Story Maps, Experience Builder allows for increased customization. There is no coding necessary, however. In fact, the user interface for creating an Experience is quite user friendly once you learn the main concepts. Within Experience Builder, you can even integrate and link other Esri applications like Survey123 or Dashboards, a functionality not available elsewhere. Experience Builder can be more comprehensive than Dashboards, which is mainly used to provide information on a singular, non-scrolling screen. With Experience Builder, you can create long, scrolling pages (which I did not personally do in my project). With this being said, Experience Builder is definitely the way to go if you’re looking to make something that is more in tune with a website. 

The remainder of this blog post will serve as a tutorial for the basics of how to use Experience Builder to create a web page for your organization. The approach I took was fairly simple, as I wanted to be able to disseminate the key information with as few pages and tabs as possible, and also have everything fit on a singular screen to prevent the need for endless scrolling. I only included three tabs to display information, which are described below. YouthMappers already has their own website, so my project is more of a condensed and interactive version that can be viewed in a short amount of time, and provides a general introduction to people who may be unfamiliar with the network. 

Three Tabs used to Separate Information

About: Used to introduce the organization and give a visualization of how widespread it is. The map I used is interactive and allows for user-friendly navigation and custom pop-ups for each point on the map.

Our Work: Gives a real-life example of a project conducted by the organization, and shows the benefits and impact this project makes. Giving an example helps the viewer understand how the organization operates. A visual of the completed or in-progress project can further provide something almost tangible.

Get Involved: Provides a way to viewers to become a member or learn more about the organization if they wish. Gives a link to the more detailed organization website.

Experience Builder: The Basics

Now, for using Experience Builder itself, there are a few important concepts to learn before beginning. While the app provides a number of pre-made templates, I would recommend starting with a blank project. I tried starting with a template but personally found it too overwhelming. I enjoyed the process of learning how Experience Builder works from scratch and found it easier than trying to integrate my ideas with something that was already formatted in a specific way.

Pages: In my project, there are three pages, each being linked to the tabs mentioned above. Pages are almost like layers on a map, each one contains different components and displays different visualizations.

Widgets: Each page can contain a multitude of widgets. Different types of widgets are designated by the icon to the left of its name. For my Experience, I used maps, images, text, tabs, and charts, just to name a few. I also gave my widgets descriptive names that related to what they displayed. It helped me keep track of my widgets in an organized manner. 

After adding your widgets, you can customize them to your liking. When a widget is activated, the “Style” tab appears on the right side of the screen. Here, one can alter the size, position, appearance, and other visual effects of each widget.

Overall, Experience Builder is a unique tool that combines the story-telling aspects of Story Maps, the geospatial technology of web maps, and the easy-to-navigate user interface of Dashboards. I would definitely use this tool again for future use, as I can now visualize more ways it can be utilized. 

Greta Thunberg’s Journey, Mapped

Sahil Parikh
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2019


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.


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.


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 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 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

Greta Thunberg’s Voyage, Mapped:

Geovisualizing “Informality” – Using OpenStreetMap & Story Maps to tell the story of infrastructure in Kibera (Nairobi, Kenya)

by Melanie C. MacDonald
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2017

From November 8th to 16th, 2017, I ran a small mapping campaign to generate building data in Kibera (Nairobi, Kenya) using OpenStreetMap (OSM). OSM is a collaborative online project whose aim is to create a free, editable ‘world map’ for anyone to use. The foundation(s) of OSM are rooted in both participation and partnership (i.e. the open-source movement) and restriction (i.e. the growing complexity of data and copyright constraints in many fields of work); collaboration was OSMs direct response to these notable growing restrictions and, as a results, I felt the best – and most interesting – technology suited for my geovisualization project. Overall, my personal campaign resulted in the contribution of 6770 buildings generated from known sources – mostly myself – and 1101 from ‘unknown’ sources (to me).


Building data in informal settlements (or “slums”) is difficult to generate and/or find. While my research efforts, which included an informal interview/discussion with colleagues in Kenya, uncovered that building data for Kibera does in fact exist, it is prohibitively expensive and inaccessible to most people, including myself. (Note: Despite being a student and a former researcher in Nairobi, this was the case.) To further this, copyright law protects any data extracted in the private sector, making it more complicated to use this data to create a map for the public. Because I wanted to use this geovisualization project to create such a map – accessible to anyone (using the technology available through Esri’s Story Maps) and educational, the case for OSM became even stronger.

Steps taken: how and where to start?

The first step of my project was to learn how OpenStreetMap (OSM) works. Because OSM is intuitive, the steps I took were simple: (1) visit the website,; (2) create an account (“Sign Up”); (3) Log In; (4) type in “Kibera, Nairobi, Kenya” into the search field; (3) click “edit”; (4) follow the tutorial that OSM offers before you make your first edit; (5) select “Area” and zoom all the way into the rooftops of the buildings to create polygons that mark the geolocation of each structure (double-click to close the polygon); (6) select “Building” from the options in the left-bar (Note: if this process was done with people who live in these neighbourhoods, the names of what each building could be included in the data extraction, which would create more possibility for analysis in the future); (7) click the “check-mark” (perhaps the most important step to saving the data, and then “Save” on the top banner.

These steps were repeated until a chosen portion of Kibera was completed. The above instructions were emailed to a few willing participants and a “call” for participation via Twitter, too, was done periodically over the course of 6 days. My building extraction started from the beginning of an “access road” at the furthest South-Eastern point of Kibera in a village called Soweto-East, where I had conducted research about a contentious “slum-upgrading” programme 4 years ago.

Over the course of 6 days, I made 31,691 edits to OSM over all, which included all actions (deleting incorrect buildings, creating nodes, moving things, etc.). In total, I created 5471 buildings and 1299 were created by friends and family, resulting in 6770 buildings in total. However, when I extracted this building data, first loading it into QGIS and then exporting that shapefile into ArcGIS, 7871 buildings were counted (extracted/cleaned) in this area South of the railway (which runs along the northern part of the outside boundary). I cannot account for who created 1101 buildings (perhaps success attributed to social media efforts?), but 86% of the area was ‘mapped’ over a 6-day period.

It’s often said, for perspective purposes, that Kibera is “two-thirds the size of Central Park in New York”, but the precise calculation of area it covered is less-often (if ever) expressed. I wasn’t able to contribute to an absolutely calculation, either, but: not accounting for elevation or other things, at its longest and widest, the area of Kibera covered in this 6-day period was approximately 2000m x 1500m. It’s imprecise, but: imagine someone running around a 400m track 5 times and you have the length of the area in focus – thousands of buildings that are homes, businesses, schools, medical clinics, and so on the equivalent of maybe 10 football fields (12 or 13 acres).

 Accuracy, Precision & Impact

It was often difficult to determine where the lines began and ended. Because of the corrugated metal material that’s used to build homes, schools, businesses (and more), the light flares from the sun, captured from the satellite imagery, made for guesswork in some instances. The question then became: why bother? Is there a point, or purpose, to capturing these structures at all if it’s impossible to be precise?

Much of the work to date with open-source data in this particular community in this particular part of the world is deeply rooted in protecting people; keeping people safe. Reading about the origins of mapping efforts by an organization called Map Kibera can reveal a lot about the impact(s) and challenges of creating geodata in informal settlements (or “slums”). The process of drawing thousands of polygons to represent buildings that are most often considered to be precarious or impermanent housing was enlightening. One of the main take-away ‘lessons’ was that data production and availability is critical – without data, we don’t have much to work with as spatial analysts.

Practical Implications: the “Story Map”

While new data production was one of the goals of this geovisualization project, the second challenge goal was to find a way of communicating the results. As a technology, Esri’s Story Maps technology was the most useful because it allowed me to link the OSM map as a basemap, which helped maintain the open-source ‘look’ to the map. Without much effort, the 7871 new buildings, covering 7 of the 13 villages in Kibera, were automatically available using this basemap. Because I took stop-motion videos of the OSM building extraction process, I was able to create point data on my Story Map to link to these videos. With “education” as one of the goals of the project – both of the infrastructure in Kibera itself, and of how to use OSM, in general – people unfamiliar with OSM tools and how they can be used/useful in the context of missing data in informal settlements (or “slums”) could familiarize themselves with both. In addition, I included interesting, personal photos from prior-research/work in this area, further adding to the “story” of infrastructure in the community. The Story Map is available here.

Print: Formalizing the Informal

The initial goal of this geovisualization project was to demonstrate that there is beauty and art in the creation of data, particularly when it is collaborative and made to be openly-accessible, unrestricted, and for anyone to use. After I proposed to create and extract building data from Kibera, I wanted to use a special printing technology to have the building data etched into an aluminum composite material called dibond. The idea was to have this piece of collaborative work (about a place commonly labeled a “slum”) gallery-ready and ultimately “legitimized” simply by being etched into something permanent (this idea of “legitimate” is tongue-in-cheek, to be clear). The technology available to etch into dibond is limited in the city, however, and when time-limitations made the etching-goal prohibitive, I decided to have the final product printed and mounted onto dibond as a compromise. In the end, the result of having the mounting material hidden was conceptually true to the goal of the project – to draw attention to the reality that real people with rich lives maintain these homes, businesses, schools, community centres, etc., regardless of the assumptions what that corrugated metal material may indicate. Paired with the Esri Story Map, this print was useful at drawing the attention of people into the digital story, which was loaded onto a computer for the day of the formal project presentation. Now, however, the 24×36 print hands on my wall, generating conversation about the entire process of this project and the potential impacts of open-source data. Having spent 3 years of my life examining the impacts of public participation when designing infrastructure changes (which hopefully lead to improvements in quality of life), this print – and process – could not have a better ‘home’.

T.Orientation: Colouring the Grids of Toronto

By Boris Gusev, Geovis Course Assignment, SA8905, Fall 2015 (Rinner)


The way in which we settle the land around us can paint a rich picture of how our cities have developed over years.  By the turn of the 19th century, urban planners generally agreed that grid-like patterns were the optimal solution and held the most promise for the future of transit. Physical planning led to the development of automotive cities like Los Angeles, Chicago and Detroit. Toronto’s history of growth can also be traced through its sprawling grid of roads.

In this visualization, a MapZen extract of OpenStreetMap road network was used to represent the compass-heading-based orientation of  Toronto roads. Streets that are orthogonal, meaning that they intersect at a right angle, are assigned the same colours. At a 90 degree angle, the streets are coloured with the darkest shades of orange or blue, decreasing in intensity as the intersection angle becomes more obtuse.

Follow the link to take a look at: Toronto Streets by Orientation


More exciting details and a DIY guide under the cut. Kudos to Stephen Von Worley at Data Pointed for the inspiration and Mathieu Rajerison at Data & GIS Tips for the script and a great how-to.

Continue reading T.Orientation: Colouring the Grids of Toronto