Section 03 - Customize a React Leaflet Map with a Mapbox Basemap Style

Colby Fayock: [0:00] Hey, mappers. Welcome to lesson three. Now that we have the base of our map, we're going to learn how to customize it a little bit. In order to customize our map we'll use Mapbox. In order to use Mapbox, we need an account.

[0:10] To get started, we're going to create a Mapbox account. Mapbox is a suite of mapping tools. They offer a ton of things from data lookups to navigation, but we're going to use it to customize the style of our map. If you already have an account, feel free to use that. Signing up for an account is free. They also have a generous free tier.

[0:24] Once we have our Mapbox account, we'll be ready to get started creating a base map style. Our map has what's called a base map, which is the underlying imagery of the map. It's the layer that covers the entire world that we can view data on top. This can range from real satellite imagery to vector-based maps.

[0:39] We'll be customizing that base map. To do that, Mapbox has a tool they call "studio." It gives us a ton of options for customizing our base map style. We're going to start with some of the basics and choose one of their baked-in styles. In order to use our new style, we'll use the Mapbox API. In order to make it a request to that API, we need an API key.

[0:56] In exercise three, we'll be creating an API key. Mapbox, just like any other service, needs a way to keep track of requests to their servers. Their free tier's generous but going over that, cost money. We won't get anywhere near that with our requests. In order to make those requests, we'll still need an API key that connects our request to our account.

[1:13] Once we have our API key and our map style, we can configure our tile endpoint. Now that we have both of those, we can get started.

[1:19] In exercise four, we'll put together the pieces to build our tileLayer URL. We'll use this in place of our OpenStreetMap endpoint that we used for creating our map. When creating this, we'll notice a few arguments. Some of these will want to manually swap out like the user name and style ID. Others like z, x, and y axis gets swapped out automatically in leaflet.

[1:38] Then our last exercise, we'll actually get to use this endpoint. Now that we've pieced together our endpoint using our style ID and API key, we'll actually use this endpoint for our map. We'll be updating our tileLayer component of our map.

[1:49] Previously, we used Open Street Map as our endpoint, but now that we have our custom map style, we'll want to use our Mapbox endpoint. At this point, we should have our customized map. But want some extra credit? So far, we've created one custom map.

[2:01] Let's try to make a new one. Maybe try a different look than you did with the first one. If you chose a color vector style, maybe try seeing what a satellite style looks like. You'll use the same components as he did the first time around.

[2:11] If you want to try to take it a step further, you can set up an environment variable for your API key. Environment variables are super helpful when you need to configure keys for different environments. They can also be helpful if you need to keep the key hidden.

[2:22] In our case, our key isn't so secret, but doing this can help us be prepared for easily swapping the key. There's already a sample file in the top of the lessons folder in the GitHub repo. We can copy that, remove the Word sample from the file, and update our file values.

[2:36] You're ready to customize your map? This is your chance to make it your own. The map style that we'll configure will carry with you throughout the entire course. Have fun.