{"_id":"57bdf06a7987bf170063f9ce","version":{"_id":"55faeacad0e22017005b8268","project":"55faeacad0e22017005b8265","__v":34,"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"],"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":18,"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"}Leaflet map html example - advanced
This is an advanced html example that shows how create a Leaflet map using an IDAHO TMS layer.
