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

Share this video with your friends

Send Tweet

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