{"_id":"57bdf06a7987bf170063f9ce","version":{"_id":"55faeacad0e22017005b8268","project":"55faeacad0e22017005b8265","__v":36,"createdAt":"2015-09-17T16:31:06.800Z","releaseDate":"2015-09-17T16:31:06.800Z","categories":["55faeacbd0e22017005b8269","55faf550764f50210095078e","55faf5b5626c341700fd9e96","55faf8a7825d5f19001fa386","560052f91503430d007cc88f","560054f73aa0520d00da0b1a","56005aaf6932a00d00ba7c62","56005c273aa0520d00da0b3f","5601ae7681a9670d006d164d","5601ae926811d00d00ceb487","5601aeb064866b1900f4768d","5601aee850ee460d0002224c","5601afa02499c119000faf19","5601afd381a9670d006d1652","561d4c78281aec0d00eb27b6","561d588d8ca8b90d00210219","563a5f934cc3621900ac278c","5665c5763889610d0008a29e","566710a36819320d000c2e93","56ddf6df8a5ae10e008e3926","56e1c96b2506700e00de6e83","56e1ccc4e416450e00b9e48c","56e1ccdfe63f910e00e59870","56e1cd10bc46be0e002af26a","56e1cd21e416450e00b9e48e","56e3139a51857d0e008e77be","573b4f62ef164e2900a2b881","57c9d1335fd8ca0e006308ed","57e2bd9d1e7b7220000d7fa5","57f2b992ac30911900c7c2b6","58adb5c275df0f1b001ed59b","58c81b5c6dc7140f003c3c46","595412446ed4d9001b3e7b37","59e76ce41938310028037295","5a009de510890d001c2aabfe","5a96f89c89442e002041144b"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"v1","version_clean":"1.0.0","version":"1"},"user":"55fae9d4825d5f19001fa379","__v":0,"category":{"_id":"56ddf6df8a5ae10e008e3926","project":"55faeacad0e22017005b8265","pages":["56ddf8a4a6eb5c170042d72f"],"__v":1,"version":"55faeacad0e22017005b8268","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-03-07T21:47:11.224Z","from_sync":false,"order":21,"slug":"imagery","title":"IDAHO Guide"},"parentDoc":null,"project":"55faeacad0e22017005b8265","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-24T19:07:22.694Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":14,"body":"See also [Leaflet map html example - basic](doc:leaflet-map-html-example-basic).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n    <meta charset=\\\"UTF-8\\\">\\n    <title>IDAHO Leaflet demo</title>\\n\\n    <link rel=\\\"stylesheet\\\" href=\\\"https://npmcdn.com/leaflet:::at:::1.0.0-rc.3/dist/leaflet.css\\\" />\\n    <script src=\\\"https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js\\\"></script>\\n    <style>\\n        #map\\n        {\\n            border: 1px solid #ddd;\\n            background-color: #ddd;\\n            width: 100%;\\n            height: 400px\\n        }\\n        input, textarea{\\n            position: relative;\\n            float: left;\\n            clear: both;\\n            width: 480px;\\n        }\\n        button{\\n            position: relative;\\n            float: left;\\n            clear: both\\n        }\\n    </style>\\n\\n</head>\\n<body onload=\\\"initMap()\\\">\\n<div id=\\\"map\\\"></div>\\n<input id=\\\"idahoid\\\" type=\\\"text\\\" placeholder=\\\"IDAHO ID\\\"/>\\n<input id=\\\"bands\\\" type=\\\"text\\\" placeholder=\\\"Bands\\\"/>\\n<input id=\\\"center\\\" type=\\\"text\\\" placeholder=\\\"Center\\\"/>\\n<textarea id=\\\"token\\\" rows=\\\"4\\\" placeholder=\\\"Token\\\"></textarea>\\n<button onclick=\\\"showLayer()\\\">Show</button>\\n<script type=\\\"application/javascript\\\">\\n    var map = null;\\n    function showLayer()\\n    {\\n        var token = document.getElementById(\\\"token\\\").value;\\n        var idahoid = document.getElementById(\\\"idahoid\\\").value;\\n        if(!token || ! idahoid) return;\\n        var bands = document.getElementById(\\\"bands\\\").value;\\n        if(!bands || bands.length < 1)\\n            bands=\\\"0\\\";\\n        var panTo = document.getElementById(\\\"center\\\").value;\\n        if(panTo)\\n        {\\n            var coords = document.getElementById(\\\"center\\\").value.split(',');\\n            //leaflet wants lat(y) long(x)\\n            panTo = L.latLng(parseFloat(coords[1].trim()), parseFloat(coords[0].trim()));\\n        }\\n        var idahotmslayer = 'http://idaho.geobigdata.io/v1/tile/idaho-images/'+idahoid+'/{z}/{x}/{y}?bands='+bands+'&token='+token;\\n        var leafletlayer = new L.TileLayer(idahotmslayer);\\n        map.addLayer(leafletlayer);\\n        if(panTo)\\n        {\\n            map.setZoom(13);\\n            map.panTo(panTo);\\n        }\\n    }\\n    function initMap()\\n    {\\n        map = L.map('map', {\\n            zoom: 1\\n        });\\n        L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {\\n            attribution: '©OpenStreetMap, ©CartoDB'\\n        }).addTo(map);\\n        map.panTo([0,0])\\n    }\\n</script>\\n</body>\\n</html>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"This is an advanced html example that shows how create a Leaflet map using an IDAHO TMS layer.","slug":"leaflet-map-html-example-advanced","type":"basic","title":"Leaflet map html example - advanced"}

Getting Started

GBDX Operations

GBDX Stories

Data Sets on GBDX

Raster Data Access (RDA) Guide

GBDX Notebooks

Authentication Guide

Ordering Guide

Catalog V2 API Guide

Algorithms

Tasks and Workflows Guide

S3 Storage Service Guide

Web Application (Deprecated)

Thumbnail Service Guide (Deprecated)

AnswerFactory Application

Read & Query Vector Services Guide

Aggregations & Facets Vector Services Guide

Write & Ingest Vector Services Guide

IDAHO Guide

Helpful Links

Leaflet map html example - advanced

This is an advanced html example that shows how create a Leaflet map using an IDAHO TMS layer.
See also [Leaflet map html example - basic](doc:leaflet-map-html-example-basic). [block:code] { "codes": [ { "code": "!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>IDAHO Leaflet demo</title>\n\n <link rel=\"stylesheet\" href=\"https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css\" />\n <script src=\"https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js\"></script>\n <style>\n #map\n {\n border: 1px solid #ddd;\n background-color: #ddd;\n width: 100%;\n height: 400px\n }\n input, textarea{\n position: relative;\n float: left;\n clear: both;\n width: 480px;\n }\n button{\n position: relative;\n float: left;\n clear: both\n }\n </style>\n\n</head>\n<body onload=\"initMap()\">\n<div id=\"map\"></div>\n<input id=\"idahoid\" type=\"text\" placeholder=\"IDAHO ID\"/>\n<input id=\"bands\" type=\"text\" placeholder=\"Bands\"/>\n<input id=\"center\" type=\"text\" placeholder=\"Center\"/>\n<textarea id=\"token\" rows=\"4\" placeholder=\"Token\"></textarea>\n<button onclick=\"showLayer()\">Show</button>\n<script type=\"application/javascript\">\n var map = null;\n function showLayer()\n {\n var token = document.getElementById(\"token\").value;\n var idahoid = document.getElementById(\"idahoid\").value;\n if(!token || ! idahoid) return;\n var bands = document.getElementById(\"bands\").value;\n if(!bands || bands.length < 1)\n bands=\"0\";\n var panTo = document.getElementById(\"center\").value;\n if(panTo)\n {\n var coords = document.getElementById(\"center\").value.split(',');\n //leaflet wants lat(y) long(x)\n panTo = L.latLng(parseFloat(coords[1].trim()), parseFloat(coords[0].trim()));\n }\n var idahotmslayer = 'http://idaho.geobigdata.io/v1/tile/idaho-images/'+idahoid+'/{z}/{x}/{y}?bands='+bands+'&token='+token;\n var leafletlayer = new L.TileLayer(idahotmslayer);\n map.addLayer(leafletlayer);\n if(panTo)\n {\n map.setZoom(13);\n map.panTo(panTo);\n }\n }\n function initMap()\n {\n map = L.map('map', {\n zoom: 1\n });\n L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {\n attribution: '©OpenStreetMap, ©CartoDB'\n }).addTo(map);\n map.panTo([0,0])\n }\n</script>\n</body>\n</html>\n", "language": "html" } ] } [/block]