{"_id":"586d8f521c014819000ea67c","__v":1,"githubsync":"","category":{"_id":"586d8f511c014819000ea663","__v":0,"project":"56d629f02417921500c46716","version":"586d8f511c014819000ea65d","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-03-25T01:10:14.029Z","from_sync":false,"order":6,"slug":"integration-examples","title":"Examples"},"project":"56d629f02417921500c46716","user":"56d62986b30acf150053be43","parentDoc":null,"version":{"_id":"586d8f511c014819000ea65d","project":"56d629f02417921500c46716","__v":2,"createdAt":"2017-01-05T00:12:01.865Z","releaseDate":"2017-01-05T00:12:01.865Z","categories":["586d8f511c014819000ea65e","586d8f511c014819000ea65f","586d8f511c014819000ea660","586d8f511c014819000ea661","586d8f511c014819000ea662","586d8f511c014819000ea663","586d8f511c014819000ea664","587977f57a58130f00303d4e"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"adams","version_clean":"2.0.0","version":"2.0"},"updates":["58ff1e665b5dff1900f7fc2f"],"next":{"pages":[],"description":""},"createdAt":"2016-03-25T01:10:41.269Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":12,"body":"[block:html]\n{\n  \"html\": \"<p>You can easily use <a href=\\\"http://developer.digitalglobe.com/maps-api/\\\">DigitalGlobe Maps API</a> with <a href=\\\"http://openlayers.org/\\\">OpenLayers</a>, an open-source <a href=\\\"https://en.wikipedia.org/wiki/JavaScript\\\" target=\\\"_blank\\\">Javascript</a> map library which  loads, displays and renders interactive maps on web pages.</p>\\n<p>The javascript code snippet below details how to integrate DigitalGlobe Maps API with an <em>OpenLayers</em> 3* map:</p>\\n<p>*For <em>OpenLayers 2.x</em>, use the <a href=\\\"http://dev.openlayers.org/docs/files/OpenLayers/Layer/XYZ-js.html\\\">OpenLayers.Layer.XYZ</a> function.</p>\\n<p>\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"(function () {\\n    var map = new ol.Map({\\n        target: 'map',\\n        layers: [\\n            new ol.layer.Tile({\\n                title: 'DigitalGlobe Maps API: Recent Imagery',\\n                source: new ol.source.XYZ({\\n                    url: 'http://api.tiles.mapbox.com/v4/digitalglobe.nal0g75k/{z}/{x}/{y}.png?access_token=ENTER YOUR MAPS API ACCESS TOKEN HERE', // You will need to replace the 'access_token' value with your own. http://developer.digitalglobe.com/docs/maps-api\\nattribution: \\\"© DigitalGlobe, Inc\\\"\\n                })\\n            }),\\n                \\nnew ol.layer.Tile({\\n                title: 'DigitalGlobe Maps API: Terrain Map',\\n                source: new ol.source.XYZ({\\n                    url: 'http://api.tiles.mapbox.com/v4/digitalglobe.nako1fhg/{z}/{x}/{y}.png?access_token=ENTER YOUR MAPS API ACCESS TOKEN HERE', // You will need to replace the 'access_token' value with your own. http://developer.digitalglobe.com/docs/maps-api\\nattribution: \\\"©Mapbox, Inc / OpenStreetMap Contributors \\\"\\n                })\\n})\\n            ],\\n\\n        view: new ol.View({\\n            center: [1390642, 5144541],\\n            zoom: 15\\n        })\\n    });\\n    \\n    \\n// Layer Switcher functionality courtesy: https://github.com/walkermatt/ol3-layerswitcher\\n    var layerSwitcher = new ol.control.LayerSwitcher({\\n        tipLabel: 'Legend' // Optional label for button\\n    });\\n    map.addControl(layerSwitcher);\\n\\n})();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"maps-api-openlayers","type":"basic","title":"Maps API + OpenLayers.js"}

Maps API + OpenLayers.js


[block:html] { "html": "<p>You can easily use <a href=\"http://developer.digitalglobe.com/maps-api/\">DigitalGlobe Maps API</a> with <a href=\"http://openlayers.org/\">OpenLayers</a>, an open-source <a href=\"https://en.wikipedia.org/wiki/JavaScript\" target=\"_blank\">Javascript</a> map library which loads, displays and renders interactive maps on web pages.</p>\n<p>The javascript code snippet below details how to integrate DigitalGlobe Maps API with an <em>OpenLayers</em> 3* map:</p>\n<p>*For <em>OpenLayers 2.x</em>, use the <a href=\"http://dev.openlayers.org/docs/files/OpenLayers/Layer/XYZ-js.html\">OpenLayers.Layer.XYZ</a> function.</p>\n<p>" } [/block] [block:code] { "codes": [ { "code": "(function () {\n var map = new ol.Map({\n target: 'map',\n layers: [\n new ol.layer.Tile({\n title: 'DigitalGlobe Maps API: Recent Imagery',\n source: new ol.source.XYZ({\n url: 'http://api.tiles.mapbox.com/v4/digitalglobe.nal0g75k/{z}/{x}/{y}.png?access_token=ENTER YOUR MAPS API ACCESS TOKEN HERE', // You will need to replace the 'access_token' value with your own. http://developer.digitalglobe.com/docs/maps-api\nattribution: \"© DigitalGlobe, Inc\"\n })\n }),\n \nnew ol.layer.Tile({\n title: 'DigitalGlobe Maps API: Terrain Map',\n source: new ol.source.XYZ({\n url: 'http://api.tiles.mapbox.com/v4/digitalglobe.nako1fhg/{z}/{x}/{y}.png?access_token=ENTER YOUR MAPS API ACCESS TOKEN HERE', // You will need to replace the 'access_token' value with your own. http://developer.digitalglobe.com/docs/maps-api\nattribution: \"©Mapbox, Inc / OpenStreetMap Contributors \"\n })\n})\n ],\n\n view: new ol.View({\n center: [1390642, 5144541],\n zoom: 15\n })\n });\n \n \n// Layer Switcher functionality courtesy: https://github.com/walkermatt/ol3-layerswitcher\n var layerSwitcher = new ol.control.LayerSwitcher({\n tipLabel: 'Legend' // Optional label for button\n });\n map.addControl(layerSwitcher);\n\n})();", "language": "javascript" } ] } [/block]