Change the Map Tile Service of a React Leaflet TileLayer Basemap to NASA GIBS Blue Marble
In this lesson, we'll add a new tile service as our basemap in React Leaflet. Using the NASA GIBS Blue Marble, we'll update the TileLayer component's url and attribution props to the new service. We'll also add the maxNativeZoom prop which allows us to configure the maximum zoom allowable for the service.
More info about NASA GIBS imagery GIBS Imagery API
NASA GIBS Blue Marble Tile Server
Endpoint: https://gibs-{s}.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_ShadedRelief_Bathymetry/default//EPSG3857_500m/{z}/{y}/{x}.jpeg Attribution: NASA Blue Marble, image service by OpenGeo
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.