We've set up the two most important parts of our Map Style, now we need to configure the URL that will allow us to use that Style!
Using our API Key, user ID, and Map Style ID, we'll create a tile endpoint that we can use to configure our map.
Colby Fayock: [0:00] In order to use our new TileLayer, we're going to need to create an endpoint that we can use in our map. For this, we need a few different variables. We need our username, a style ID, and we'll need our API key to append to the end.
[0:09] The first thing we're going to do is configure this URL. Let's first copy this GET request and paste it into our editor. We'll also add api.mapbox.com to the beginning as our hostname. The first thing we want to change is our username. That's going to be the same as our account name.
[0:21] I'm going to copy "Colby Fayock demo," and I'm going to replace that variable with my name. Next, we want to replace the style ID. Back in our Mapbox account in the Studio section, we can see our styles again. Under the style we just created, we can click this drop-down, and we can find our style URL.
[0:35] If we copy this URL, we can paste it right below, and we can see our style ID. Let's grab that ID and replace that variable inside of our URL with that ID. Finally, we can replace the tile size with 256 as that will be our image size. We always want to use that two times, so we'll remove the brackets around that.
[0:50] Finally, we need to add our API key. We're going to add a query parameter of access token, which we're going to set as equal to a template variable of process.env and a variable name. With that we're ready to use our endpoint for our map.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!