{"_id":"57bdf06a7987bf170063f9ce","version":{"_id":"55faeacad0e22017005b8268","project":"55faeacad0e22017005b8265","__v":35,"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"],"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":20,"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.

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]