GBDX

OpenLayers html example - advanced

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

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

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.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" class="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(',');
            panTo = ol.proj.transform([parseFloat(coords[0].trim()), parseFloat(coords[1].trim())], 'EPSG:4326', 'EPSG:3857');
        }
        var layerurl = 'http://idaho.geobigdata.io/v1/tile/idaho-images/'+idahoid+'/{z}/{x}/{y}?bands='+bands+'&token='+token;
        var tilelayer = new ol.layer.Tile({
            source: new ol.source.OSM({
                url: layerurl
            })
        });
        map.addLayer(tilelayer);
        if(panTo)
        {
            map.getView().setZoom(13);
            map.getView().setCenter(panTo);
        }
    }
    function initMap()
    {
        map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
    }
</script>
</body>
</html>