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>

OpenLayers html example - advanced


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

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.