{"_id":"57bdf12e7987bf170063f9d0","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"},"__v":0,"parentDoc":null,"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"},"user":"55fae9d4825d5f19001fa379","project":"55faeacad0e22017005b8265","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-24T19:10:38.715Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":15,"body":"See also [OpenLayers html example - advanced](doc:openlayers-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 OpenLayers demo</title>\\n\\n    <link rel=\\\"stylesheet\\\" href=\\\"https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css\\\">\\n    <script type=\\\"text/javascript\\\" src=\\\"https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.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\\n</head>\\n<body>\\n<div id=\\\"map\\\"></div>\\n<script type=\\\"application/javascript\\\">\\n    var token = \\\"INSERT TOKEN HERE\\\";\\n    var layerurl = 'http://idaho.geobigdata.io/v1/tile/idaho-images/fda14d57-a65e-46d7-b9c5-9836ffea0cc0/{z}/{x}/{y}?bands=4,2,1&token='+token;\\n    var map = new ol.Map({\\n        layers: [\\n            new ol.layer.Tile({\\n                source: new ol.source.OSM({\\n                    url: layerurl\\n                })\\n            })\\n        ],\\n        target: 'map',\\n        view: new ol.View({\\n            center: ol.proj.transform([-122.32, 37.55], 'EPSG:4326', 'EPSG:3857'),\\n            zoom: 13\\n        })\\n    });\\n</script>\\n</body>\\n</html>\",\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 an OpenLayers map using an IDAHO TMS layer.","slug":"openlayers-html-example-basic","type":"basic","title":"OpenLayers html example - basic"}

OpenLayers html example - basic

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

See also [OpenLayers html example - advanced](doc:openlayers-html-example-advanced) [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>IDAHO OpenLayers demo</title>\n\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css\">\n <script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.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\n</head>\n<body>\n<div id=\"map\"></div>\n<script type=\"application/javascript\">\n var token = \"INSERT TOKEN HERE\";\n var layerurl = 'http://idaho.geobigdata.io/v1/tile/idaho-images/fda14d57-a65e-46d7-b9c5-9836ffea0cc0/{z}/{x}/{y}?bands=4,2,1&token='+token;\n var map = new ol.Map({\n layers: [\n new ol.layer.Tile({\n source: new ol.source.OSM({\n url: layerurl\n })\n })\n ],\n target: 'map',\n view: new ol.View({\n center: ol.proj.transform([-122.32, 37.55], 'EPSG:4326', 'EPSG:3857'),\n zoom: 13\n })\n });\n</script>\n</body>\n</html>", "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).