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.

  <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="" />
  <script src=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src=""></script>

    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }

    #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;

<div id="map"></div>

<div id="time-ranges" class="leaflet-bar">
    <form action="#" id="timeForm">
        <label for="timeInput">
            <select id='timeInput' type="date" name='date'>

    var timeForm = document.getElementById('timeForm');
    var timeInput = document.getElementById('timeInput');

    var map ='map').setView([-12.604858, -55.947675], 9);

    var vegetation = L.esri.imageMapLayer({
        url: '',
        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)

    timeInput.addEventListener('change', function updateTimeRange(e){
        vegetation.setTimeRange(new Date(timeInput.value), new Date(timeInput.value));