Change the Map Tile Service of a React Leaflet TileLayer Basemap to NASA GIBS Blue Marble

Colby Fayock: [0:00] We're going to start with a basic map centered over Australia. In our code, we're importing a Map and a TileLayer from 'react-leaflet'. We're using those imported components to create a Map and a TileLayer in our app.

[0:10] We're also setting our defaultCenter which is Australia and a defaultZoom of 4. For our TileLayer, we're using OpenStreetMap. OpenStreetMap is an open-source project of map data.

[0:19] What if we want to use something else? [inaudible 1] , we're going to use NASA's Blue Marble product. To update our TileLayer, we need two components. We need a URL that includes the coordinates mapping. Then we can update the attribution for the service.

[0:32] Let's first update our URL to the correct endpoint, then we can also update our attribution. If you want to follow along and use Blue Marble yourself, you can find these values in the description.

[0:42] Finally, once we hit Save, we can see Blue Marble on our map. One scenario you might run into though is certain services only support a certain range of tiles.

[0:50] If we zoom in far enough, we're eventually going to hit a wall. We can fix this though with a prop on our TileLayer. We're going to set the maxNativeZoom to 8, which is what Blue Marble supports. If we reload our map, we can keep zooming in as much as we want and instead of hitting a wall, it'll just be fuzzy, but the right images.

[1:09] In review, we updated our TileLayer component to have a new URL, attribution, and maxNativeZoom prop. This allowed us to use a new endpoint service, give that new service credit, specify the max zoom that service supports. With those updates, we were able to update our TileLayer to a new map.