{"_id":"57bdf06a7987bf170063f9ce","version":{"_id":"55faeacad0e22017005b8268","project":"55faeacad0e22017005b8265","__v":32,"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"],"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":19,"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 Stories

Authentication Guide

Ordering Guide

Catalog V2 API Guide (New!)

Catalog V1 Guide (retired)

Certified Algorithms

Tasks and Workflows Guide

S3 Storage Service Guide

Thumbnail Service Guide

Web Application

ArcMap AddIn Application

QGIS Plugin Application

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]