WORKSHOP - Mapbox GL & Pandas

A workshop about Mapbox GL to discover the world data visualization.

Overview

Introduction

The purpose of this workshop is to learn how to display markers on a map using Mapbox GL. You will also learn the basics of data cleaning with Python and the Pandas library. Signing up on MapBox GL is not required until the "Display your own data" part of this workshop. An account is free but requires your credit card information because they charge people depending on the amount of times the map is loaded. You won't be charged anything for personal use unless you view your maps thousands of times.

Table of Contents

• Overview
  • Introduction
  • Table of Contents
  • Presences
• Prerequisites
• Workshop
  1. Data visualization with Mapbox GL
     1. Display your first map
     2. Mark a location in your map
     3. Resolve the performance problem
  2. Display your own data
     1. Discover the open data movement and choose you own dataset
     2. Clean your dataset
     3. Import your dataset
     4. Display your dataset with Mapbox GL
• Discover More

Presences

Fork the repository (set yourself as the owner) and commit with your name to be marked present. example: [PRESENCE] : Tomas PROUST

Prerequisites

For this workshop you will require:

• Python3 (>= 3.7) you can install it with the package manager of your choice:

  # Fedora
  sudo dnf install python3
  # Ubuntu and Debian based Distro
  sudo apt-get install python3
  # Arch Linux
  sudo pacman -Sy python-pip

• Python Pandas library:

  pip install pandas

Workshop

By any needs, here the Mapbox GL documentation.

Data visualization with MapBox GL

In the first part of this workshop we're gonna find out the basics of Mapbox GL. We'll display a map in our navigator thanks to Mapbox GL, and then we will play a bit with it by marking locations on the map.

Display your first map

We'll be displaying the map with a plain html defining a Map object, following this example show.

You will need to provide an access token to generate the map. This token is generated at sign up on Mapbox, we will skip it for now. Here is an access token you can use instead:

mapboxgl.accessToken = 'pk.eyJ1Ijoib2R1LXZlbG8iLCJhIjoiY2xjajl4MGh2MGc5ajN1cWg5anRnbnA3bCJ9.A1vMA06W6lyvtb3KDZW-Kg';

Be careful, to be displayed the Mapbox GL object needs a "map" division tag, which itself must have css dimensions defined.

To display your map, you can use the VS Code Live Server extension or open your local html file with your navigator (e.g: ctrl + O on firefox).

Mark a location in your map

Next we'll add a marker to the map by defining a Marker object. you can check this example.

You can visit the bbox finder website to find a location to highlight or pick one of these:

Name	longitude	latitude
Epitech	2.363021	48.815307
Londres	-0.118092	51.509865
New York	40.779897	-73.968565
Paris	2.349014	48.864716
Seoul	37.566535	126.9779692
Tokyo	35.6894	139.692

Resolve the performance problem

Markers are cool but incompatible with big datasets visualization, as it uses JavaScript to be rendered. To display a large dataset on map, we must use a Vector Tileset. A vector tileset is a tile generated by Mapbox GL from your data but requires an account on Mapbox. Use the tileset instead from this example instead. This tileset can be imported to your code with it's ID.

Display your own data

In this part, we'll see how to find, clean, import and then display your own dataset on a map with Mapbox GL and Pandas for the cleaning.

Discover the open data movement and choose you own dataset

For this part you are free to download any .csv file that contains geographic data (Longitude and Latitude). You can find them on https://www.data.gouv.fr/fr/pages/donnees-geographiques/ or any other source. Open it manually to check if there are the Longitude or latitude columns (could be called long and lat).

Clean your dataset

Most datasets aren't "clean": Some data could be missing or unreadable. You can use Python and the Pandas library to clean your dataset:

1. Import the pandas library into your runnable Python file with import pandas as pd.
2. Read your .csv dataset and save it in a pandas dataframe. Warning: you must take into consideration that some .csv have different column separators ("," or ";"), you can open your .csv file in your text editor to check.
3. Verify that the coordinates decimals are separated by "." and not by ",". Mapbox is unable to read coordinates with ",".
4. Use pandas to create a dataframe that only has the data that you want to display on the map.
5. Export your dataframe to a .csv

Import your dataset

1. Create an account on Mapbox
2. Upload your dataset as a Tileset on Mapbox studio (https://studio.mapbox.com/tilesets/)

Display your dataset with Mapbox GL

1. Use the part 1 of this workshop
2. Change the token we gave you in part 1 to your mapbox token, you can find it on your account page.
3. Change the tileset ID called in Part 1 to yours.
4. Display your dataset.

Discover More

If you enjoyed this workshop you can see for more use cases of mapbox GL (check this this one which control the city building over the sound of your mic).
You can also check the MapLibre Project, an open-source fork of the Mapbox GL library.