☰ Esri Leaflet

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.5.1/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
    integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
    crossorigin=""></script>


    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"
    integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
    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>

Edit this sample on GitHub

Esri Leaflet is a project from the Esri PDX R&D Center and the Esri Community

Terms