{"_id":"57bdef8d92c97f0e00f2e568","project":"55faeacad0e22017005b8265","parentDoc":null,"__v":0,"user":"55fae9d4825d5f19001fa379","version":{"_id":"55faeacad0e22017005b8268","project":"55faeacad0e22017005b8265","__v":33,"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"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"v1","version_clean":"1.0.0","version":"1"},"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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-24T19:03:41.417Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":13,"body":"See also [Leaflet map html example - advanced](doc:leaflet-map-html-example-advanced).\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    </style>\\n</head>\\n<body>\\n<div id=\\\"map\\\"></div>\\n<script type=\\\"application/javascript\\\">\\n    var token = \\\"INSERT TOKEN HERE\\\";\\n    var idahotmslayer = 'http://idaho.geobigdata.io/v1/tile/idaho-images/fda14d57-a65e-46d7-b9c5-9836ffea0cc0/{z}/{x}/{y}?bands=4,2,1&token='+token;\\n    var leafletlayer = new L.TileLayer(idahotmslayer, {minZoom: 11, maxZoom: 20});\\n    var map = L.map('map', {\\n        center: [37.55, -122.32],\\n        zoom: 13\\n    });\\n    map.addLayer(leafletlayer);\\n</script>\\n</body>\\n</html>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nTo use this example, replace \"insert token here\" with a valid GBDX token string. \n\nvar token = \"INSERT TOKEN HERE\";\n\nTo learn more about tokens, see [Authentication Course](doc:authentication-course).","excerpt":"This simple html example shows how create a Leaflet map using an IDAHO TMS layer.","slug":"leaflet-map-html-example-basic","type":"basic","title":"Leaflet map html example - basic"}

Leaflet map html example - basic

This simple html example shows how create a Leaflet map using an IDAHO TMS layer.

See also [Leaflet map html example - advanced](doc:leaflet-map-html-example-advanced). [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 </style>\n</head>\n<body>\n<div id=\"map\"></div>\n<script type=\"application/javascript\">\n var token = \"INSERT TOKEN HERE\";\n var idahotmslayer = 'http://idaho.geobigdata.io/v1/tile/idaho-images/fda14d57-a65e-46d7-b9c5-9836ffea0cc0/{z}/{x}/{y}?bands=4,2,1&token='+token;\n var leafletlayer = new L.TileLayer(idahotmslayer, {minZoom: 11, maxZoom: 20});\n var map = L.map('map', {\n center: [37.55, -122.32],\n zoom: 13\n });\n map.addLayer(leafletlayer);\n</script>\n</body>\n</html>\n", "language": "html" } ] } [/block] To use this example, replace "insert token here" with a valid GBDX token string. var token = "INSERT TOKEN HERE"; To learn more about tokens, see [Authentication Course](doc:authentication-course).