Add a LayersControl Toggle to Switch Between TileLayer Basemaps in React Leaflet

Share this video with your friends

Send Tweet

In this lesson, we'll add a LayersControl toggle to allow us to change between multiple TileLayer basemaps in React Leaflet. Using the NASA GIBS Blue Marble, we'll add an additional TileLayer component, wrap our two TileLayers in BaseLayer components, and wrap all of our layers in a LayersControl to toggle our basemaps.

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