Time Ranges
Select a snapshot between 1990 and 2010 to fetch Landsat bands; 4,3,2. More information about ImageMapLayers can be found in the L.esri.ImageMapLayer documentation.
<html>
<head>
<meta charset=utf-8 />
<title>Time Ranges</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"
integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</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>
var timeForm = document.getElementById('timeForm');
var timeInput = document.getElementById('timeInput');
var map = L.map('map').setView([-12.604858, -55.947675], 9);
var 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)',
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>
Esri Leaflet is a project from the Esri PDX R&D Center and the Esri Community