Select a snapshot between 1990 and 2010 to fetch Landsat bands; 4,3,2. To learn more, go to L.esri.image in the API reference.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Filter by date range (image service)</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script> <!-- Load Esri Leaflet from CDN --> <script src="https://unpkg.com/esri-leaflet@3.0.19/dist/esri-leaflet.js"></script> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> </head> <body> <style> #time-ranges { position: absolute; top: 10px; right: 10px; z-index: 1000; padding: 1em; background: white; } #time-ranges input, #time-ranges select { display: inline-block; border: 1px solid #999; font-size: 14px; border-radius: 4px; height: 28px; line-height: 28px; } </style> <div id="map"></div> <div id="time-ranges" class="leaflet-bar"> <form action="#" id="timeForm"> <label for="timeInput"> Year: <select id="timeInput" type="date" name="date"> <option>1990</option> <option>2000</option> <option>2005</option> <option>2010</option> </select> </label> </form> </div> <script> const timeInput = document.getElementById("timeInput"); const map = L.map("map").setView([-12.604858, -55.947675], 9); const vegetation = L.esri .imageMapLayer({ url: "https://landsat.arcgis.com/arcgis/rest/services/LandsatGLS/MS/ImageServer", attribution: "United States Geological Survey (USGS), National Aeronautics and Space Administration (NASA) | Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", bandIds: "4,3,2", // renderingRule: { "rasterFunction": "NDVI Colorized" }, from: new Date(timeInput.value), to: new Date(timeInput.value) }) .addTo(map); timeInput.addEventListener("change", function updateTimeRange(e) { vegetation.setTimeRange(new Date(timeInput.value), new Date(timeInput.value)); e.preventDefault(); }); </script> </body> </html>