Lab 8: Geospatial visualizations

In this lab, we will:

  • Learn how to embed a Mapbox map into a webpage
  • Learn to add data-driven layers within a Mapbox canvas.
  • Learn to add custom SVG overlays on Mapbox maps and adapt to the map’s panning and zooming
  • Practice creating visualizations with large datasets of real-world data, by importing, parsing, filtering and binding to elements on the page.
Table of contents

Lab Session

This week is a bit different. We are releasing the first two steps of the lab early so you can prepare for the in-person lab workshop on Thursday 3-4 PM in 45-102 (regular lab hours). The reminder of the lab, the rubric, and the check-off form will be posted on Thursday as usual.

This lab is focusing on teaching you the necessary skills to start working with geospatial data which, for housing, is indispensable. The slides will quickly touch on this lab’s content, but then present a workshop in how to prepare your GeoData effectively for use with your interactive data visualization on the web.

💥 Workshop preparation

If you plan to attend the lab in-person and want to follow along on your own machine, please get yourself set-up for the hands-on workshop. To do so, you will need the following:

  • Make sure you can access a Google account and Google Colab.
  • Complete Steps 0 & 1 below on your computer before the lab.

What will we make?

In this lab, we will be building an immersive, interactive map visualization of bike traffic in the Boston area during different times of the day. If you follow the workshop, you’ll also learn how to visualize big data easily. You can find a sample of both here and of the bike traffic app in the screencast below:

  • The underlying map shows Boston area roads and labels of neighborhoods. You can pan and zoom around as you would with services like Google Maps.
  • The green lines show bike lanes. We will be importing two datasets from the city governments of Boston and Cambridge for this.
  • The circles represent individual BlueBike stations. The size of each circle represents the amount of traffic at each station, while the color represents whether most traffic is entering or leaving the station. We will be using two datasets from BlueBikes to analyze bike traffic from about 260,000 individual rides from March 2024.
  • There is a slider at the top right that allows the user to filter the data for traffic at specific times of the day, and the circles will change size and color accordingly.
  • Clicking on one of the stations allows you to view the 5, 10, 15, and 20 minute isochrones (iso means “equal” and chrones mean “time”, but more to that later).

There is a lot of room for styling and customization in this lab, and you are free to choose colors and themes that you prefer. So the screenshots and videos here are for reference only and your version can differ in appearance (but should be functionally the same!).

Step 0: Start a new Svelte project

Step 0.1: Create a new repository and push it to GitHub

TL;DR: Make sure your repo is private before you push your access token to GitHub! We will be adding your Mapbox API key to the code. In general, we try to avoid committing API keys or other secrets to your code since they’ll stay in your git history forever and can be exploited if exposed. In a production setting, we would instead of hardcoding secrets, opt for setting them as environment variables. This is standard practice in professional workflows, often managed through CI/CD tools like GitHub Actions. However, this is beyond the scope of this class. Still curious? Check out how GitHub actions handle secrets (optional reading).

In this lab, we will be working on a new project and thus a new repository (that we will subsequently list on our projects page). Follow step 1 of lab 4 again to set up a new Svelte project with a new repo name this time. I called mine bikewatching, but you may want to get more creative with bike-related puns. 😉

Step 0.2: Publish your new project to GitHub Pages

Also follow step 3 from the same lab to set up GitHub Pages for your new project.

Step 0.3: Start local server

Run npm run dev --open to start the local server and open the project in your browser.

Step 0.4: Edit routes/+page.svelte

Replace the content of routes/+page.svelte with a heading of your project name and a brief description of what it does. Commit and push the change, and make sure the website updates accordingly.

Step 0.5: Add basic styling

Create a CSS file for global styles in src/lib called global.css and add the following content:

body {
	font: 100%/1.5 system-ui, sans-serif;
	display: flex;
	flex-flow: column;
	max-width: 80em;
	min-height: 100vh;
	box-sizing: border-box;
	margin: auto;
	padding: 1em;
}

Then, in your src/routes/+page.svelte file, import the CSS file by adding this in a <style> element:

@import url("$lib/global.css");

At this point, you should be seeing something like this:

Step 0.6: Add a bike favicon (optional)

To distinguish open tabs from your project, you can customize its favicon.

In your static directory, add a favicon.svg file with the following content:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<text y=".9em" font-size="90">🚴🏼‍♀️</text>
</svg>

Feel free to use any emoji you want. Then edit src/app.html to change favicon.png to favicon.svg here:

<link rel="icon" href="%sveltekit.assets%/favicon.png" />

You may also want to add a <title> with your project title, as a fallback for pages that don’t specify one.

It should look like this:

You can now delete static/favicon.png if you want to keep things tidy, since we’re not using it anymore and its just the standard Svelte logo.

Step 1: My first map

Step 1.0: Create a Mapbox account

Go to Mapbox and create an account using your MIT email. We will be using the free service tier which carries no charge.

After you sign up, make sure to verify your email.

Step 1.1: Install Mapbox.js

In your project directory, run the following command to install the Mapbox.js library:

npm install mapbox-gl

Step 1.2: Add an element to hold the map

We will largely follow the steps outlined in Mapbox’s official docs about Svelte integration.

Let’s create an element to receive our map and bind it to a variable (we’ll need to reference that when we tell Mapbox to create a map there):

<div id="map" />

We also want to add some CSS to ensure the map will have sufficient height:

#map {
	flex: 1;
}

Try giving the map a background color to make sure it’s taking up the space you expect:

Step 1.3: Import Mapbox and connect it to our account

In order to use Mapbox, we first need to import its JS and CSS. In your src/routes/+page.svelte file, inside your <script> tag, add this:

import mapboxgl from "mapbox-gl";
import "../../node_modules/mapbox-gl/dist/mapbox-gl.css";

Then, we need to connect our account to it, by setting up our access token:

mapboxgl.accessToken = "your access token here";

To find your access token, you go to your account page on Mapbox:

Step 1.4: Create the map

To create the map, we create a new mapboxgl.Map object with settings that specify things like:

  • which HTML element will hold the map? (container) This can be either an element reference, or a string with the element’s ID (which is what we will use)
  • What will the basemap look like? (style)
  • Map extent:
    • What latitude and longitude will the map be centered on? (center: [longitude, latitude])
    • How zoomed in will the map start off and what will be the min & max zoom allowed? (zoom, minZoom, maxZoom)

We want to do that only in the browser, so we will use the onMount lifecycle function, which we need to import separately from svelte:

import { onMount } from "svelte";

onMount(() => {
	let map = new mapboxgl.Map({
		/* options */
	});
})

In terms of what values to apply to options:

  • For the container key, we want to specify an id so we don’t have to worry about element references ("map" in our case).
  • For the style, I used "mapbox://styles/mapbox/streets-v12" but you are welcome to choose any other style you like. Keep in mind that the busier the style, the harder it will be to see your data drawn on top of it.
  • For the initial map representation:
    • I used 12 for the zoom attribute
    • You can then also specify a centerpoint within the Cambridge / Boston area through the center key. See below for how to find the latitude and longitude of any location using Google maps.

To find the coordinates of a location, you can enter it on Google Maps, and then right click and select the first option:

Another way is via the URL, it’s the part after the @:

Note that you will need to specify them in the reverse order, as Mapbox expects longitude first.

If everything went well, you should have a map of Boston already! 🎉

Try panning and zooming around to see the map in action.

Right click your map element and inspect it using the dev tools. Notice how Mapbox has added a bunch of elements to the DOM to render the map, including a <canvas> element that it uses to draw the map.

Dev tools

Don’t like how your map looks? Try the optional step below!

Step 1.5: Customizing the map (optional)

The map style in its current form is quite functional as it shows a lot of useful waypoints and detail. However, sometimes we’d like to create a more stylized map to create a cohesive design language across our website, or simply to draw readers in with a unique design.

Luckily, Mapbox provides a way to fully customize your map style using Mapbox Studio. To access Mapbox Studio, go back to your Mapbox account page and click “Create a map in Studio”.

Next, create a new style.

From here, you are free to create a style however you’d like! As a starting point, many high quality map visualizations end up using a monochrome style, which you can find by clicking on “Classic template”, then “Monochrome”. Once you’ve selected a variant from the list of styles, click on the “Customize” buttom to add further customization, which will open up the actual studio, shown below.

Mapbox styles are made up of layers and components (e.g. natural features, streets, points of interest, transit nodes, etc.). These items have properties which can be edited, such as the color or font, and can even be removed for a cleaner look. For example, if you wanted to make the color of the bodies of water a more natural blue color in this monochrome example, you could click on the “Land & water water” layer in the left panel and simply adjust the color in the color picker.

Once you are done playing around with the style, you can publish it so that it can be referenced in your code where you define the map, as you did in Step 1.4. To do so, click “Publish” in the top right corner of the studio interface:

images/mapbox-publish.png

Then, click on the three dots next to your style name to find the style URL (it will look something like this: mapbox://styles/casillasenrique/clukyyerk007v01pb6r107k1o).

Copy it and paste this URL in your style property when defining the mapboxgl.Map object. You should now see that your map uses your custom style!

Now, each time you edit your map style in Mapbox Studio and re-publish it, the updated style will automatically be applied in your website (note that sometimes the style takes a couple of minutes to update after publishing). If for some reason it’s not loading, try to access your page in incognito mode, clear your cache, or repeat the above steps in the exact order (if you call the style URL before publishing, your browser will associate in its cache the default map with that style URL).