GBDX

Leaflet map html example - advanced

This is an advanced html example that shows how create a Leaflet map using an IDAHO TMS layer.

Suggest Edits

See also Leaflet map html example - basic.

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IDAHO Leaflet demo</title>

    <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
    <script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
    <style>
        #map
        {
            border: 1px solid #ddd;
            background-color: #ddd;
            width: 100%;
            height: 400px
        }
        input, textarea{
            position: relative;
            float: left;
            clear: both;
            width: 480px;
        }
        button{
            position: relative;
            float: left;
            clear: both
        }
    </style>

</head>
<body onload="initMap()">
<div id="map"></div>
<input id="idahoid" type="text" placeholder="IDAHO ID"/>
<input id="bands" type="text" placeholder="Bands"/>
<input id="center" type="text" placeholder="Center"/>
<textarea id="token" rows="4" placeholder="Token"></textarea>
<button onclick="showLayer()">Show</button>
<script type="application/javascript">
    var map = null;
    function showLayer()
    {
        var token = document.getElementById("token").value;
        var idahoid = document.getElementById("idahoid").value;
        if(!token || ! idahoid) return;
        var bands = document.getElementById("bands").value;
        if(!bands || bands.length < 1)
            bands="0";
        var panTo = document.getElementById("center").value;
        if(panTo)
        {
            var coords = document.getElementById("center").value.split(',');
            //leaflet wants lat(y) long(x)
            panTo = L.latLng(parseFloat(coords[1].trim()), parseFloat(coords[0].trim()));
        }
        var idahotmslayer = 'http://idaho.geobigdata.io/v1/tile/idaho-images/'+idahoid+'/{z}/{x}/{y}?bands='+bands+'&token='+token;
        var leafletlayer = new L.TileLayer(idahotmslayer);
        map.addLayer(leafletlayer);
        if(panTo)
        {
            map.setZoom(13);
            map.panTo(panTo);
        }
    }
    function initMap()
    {
        map = L.map('map', {
            zoom: 1
        });
        L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
            attribution: '©OpenStreetMap, ©CartoDB'
        }).addTo(map);
        map.panTo([0,0])
    }
</script>
</body>
</html>