{"_id":"586d8f521c014819000ea681","parentDoc":null,"user":"56d62986b30acf150053be43","__v":0,"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"},"project":"56d629f02417921500c46716","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-30T23:06:34.448Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":10,"body":"You can easily integrate DigitalGlobe Maps API with [Ol3-Cesium](http://openlayers.org/ol3-cesium/), a web map library which leverages both 2D [OpenLayers3](http://openlayers.org/) controls with enhanced 3D controls from [Cesium.org](http://cesium.org)!  This integration example features a toggle between 2D/3D view and is courtesy of our friend **David Collins** at the [Geological Survey of New South Wales, Australia](http://www.resourcesandenergy.nsw.gov.au/).\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"https://platform.digitalglobe.com/examples/ol3cesium119/examples/DGMapsAPI_OL3Cesium.html\\\" width=\\\"750px\\\" height=\\\"650px\\\"></iframe>\"\n}\n[/block]\n**Take a look at the snippet below to see how the integration works. * \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<?xml version='1.0' encoding='UTF-8'?>\\n<!DOCTYPE HTML>\\n<html xmlns=\\\"http://www.w3.org/1999/xhtml\\\" xml:lang=\\\"en\\\" lang=\\\"en\\\">\\n  <head>\\n    <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html; charset=utf-8\\\" />\\n    <meta name=\\\"robots\\\" content=\\\"index, all\\\" />\\n    <title>DigitalGlobe - ol3-cesium</title>\\n    <link rel=\\\"stylesheet\\\" href=\\\"../ol.css\\\" type=\\\"text/css\\\">\\n    <link rel=\\\"stylesheet\\\" href=\\\"../ol3-layerswitcher.css\\\" type=\\\"text/css\\\">\\n  </head>\\n  <body>\\n    <div id=\\\"map\\\" class=\\\"map\\\" style=\\\"width:730px;height:600px;\\\"></div>\\n    <input type=\\\"button\\\" value=\\\"3D / 2D\\\" onclick=\\\"javascript:ol3d.setEnabled(!ol3d.getEnabled())\\\" />\\n    <script src=\\\"inject_ol3_cesium.js\\\"></script>\\n    <script src=\\\"../ol3-layerswitcher.js\\\"></script>\\n    <script src=\\\"digitalglobe.js\\\"></script>\\n  </body>\\n</html>\",\n      \"language\": \"text\",\n      \"name\": \"html\"\n    }\n  ]\n}\n[/block]\nThe key javascript references which make this work are:\n* <a href=\"https://developer.digitalglobe.com/examples/ol3cesium119/examples/digitalglobe.js\" target=\"_blank\">digitalglobe.js</a> - contains the specific *Maps API *imagery content layers, *OpenLayers3* and *Cesium.js* references\n* <a href=\"https://developer.digitalglobe.com/examples/ol3cesium119/ol3-layerswitcher.js\" target=\"_blank\">ol3-layerswitcher.js</a> - allows for switching between the multiple Maps API imagery layers, using *OpenLayers3*\n* <a href=\"https://developer.digitalglobe.com/examples/ol3cesium119/examples/inject_ol3_cesium.js\" target=\"_blank\">inject_ol3_cesium.js</a> - allows for switching from 2D *OpenLayers3* to 3D *Cesium.js*\n\nDon't forget about the associated .css references, which pull this all together in the web map GUI:\n* <a href=\"https://developer.digitalglobe.com/examples/ol3cesium119/ol.css\" target=\"_blank\">ol.css</a> - this frames the OpenLayers 2D map and tools\n* <a href=\"https://developer.digitalglobe.com/examples/ol3cesium119/ol3-layerswitcher.css\" target=\"_blank\">ol3-layerswitcher.css</a> - which places the layer toggle button on the map","excerpt":"","slug":"maps-api-ol3-cesium-2d3d-viewer","type":"basic","title":"Maps API + OL3-Cesium (2D/3D)"}

Maps API + OL3-Cesium (2D/3D)


You can easily integrate DigitalGlobe Maps API with [Ol3-Cesium](http://openlayers.org/ol3-cesium/), a web map library which leverages both 2D [OpenLayers3](http://openlayers.org/) controls with enhanced 3D controls from [Cesium.org](http://cesium.org)! This integration example features a toggle between 2D/3D view and is courtesy of our friend **David Collins** at the [Geological Survey of New South Wales, Australia](http://www.resourcesandenergy.nsw.gov.au/). [block:html] { "html": "<iframe src=\"https://platform.digitalglobe.com/examples/ol3cesium119/examples/DGMapsAPI_OL3Cesium.html\" width=\"750px\" height=\"650px\"></iframe>" } [/block] **Take a look at the snippet below to see how the integration works. * [block:code] { "codes": [ { "code": "<?xml version='1.0' encoding='UTF-8'?>\n<!DOCTYPE HTML>\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">\n <head>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n <meta name=\"robots\" content=\"index, all\" />\n <title>DigitalGlobe - ol3-cesium</title>\n <link rel=\"stylesheet\" href=\"../ol.css\" type=\"text/css\">\n <link rel=\"stylesheet\" href=\"../ol3-layerswitcher.css\" type=\"text/css\">\n </head>\n <body>\n <div id=\"map\" class=\"map\" style=\"width:730px;height:600px;\"></div>\n <input type=\"button\" value=\"3D / 2D\" onclick=\"javascript:ol3d.setEnabled(!ol3d.getEnabled())\" />\n <script src=\"inject_ol3_cesium.js\"></script>\n <script src=\"../ol3-layerswitcher.js\"></script>\n <script src=\"digitalglobe.js\"></script>\n </body>\n</html>", "language": "text", "name": "html" } ] } [/block] The key javascript references which make this work are: * <a href="https://developer.digitalglobe.com/examples/ol3cesium119/examples/digitalglobe.js" target="_blank">digitalglobe.js</a> - contains the specific *Maps API *imagery content layers, *OpenLayers3* and *Cesium.js* references * <a href="https://developer.digitalglobe.com/examples/ol3cesium119/ol3-layerswitcher.js" target="_blank">ol3-layerswitcher.js</a> - allows for switching between the multiple Maps API imagery layers, using *OpenLayers3* * <a href="https://developer.digitalglobe.com/examples/ol3cesium119/examples/inject_ol3_cesium.js" target="_blank">inject_ol3_cesium.js</a> - allows for switching from 2D *OpenLayers3* to 3D *Cesium.js* Don't forget about the associated .css references, which pull this all together in the web map GUI: * <a href="https://developer.digitalglobe.com/examples/ol3cesium119/ol.css" target="_blank">ol.css</a> - this frames the OpenLayers 2D map and tools * <a href="https://developer.digitalglobe.com/examples/ol3cesium119/ol3-layerswitcher.css" target="_blank">ol3-layerswitcher.css</a> - which places the layer toggle button on the map