{"_id":"586d8f521c014819000ea67f","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"},"__v":0,"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","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-03-25T02:31:09.186Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"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://www.cesiumjs.com\\\" target=\\\"_blank\\\">Cesium.js</a> to create<strong> stunning</strong> 3D renditions of our world. Cesium is a <a href=\\\"https://en.wikipedia.org/wiki/JavaScript\\\" target=\\\"_blank\\\">JavaScript</a> library for creating 3D globes and 2D maps in a web browser without a plugin. It uses <a href=\\\"http://get.webgl.org\\\" target=\\\"_blank\\\">WebGL</a>* for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization. <em>Cesium</em> is open source under the Apache 2.0 license. The <em>Cesium</em> Content Server provides a conduit to seamlessly stream 3D content, such as terrain, into <em>Cesium</em>. The web-optimized, open-formatted services provide a content source for any <em>Cesium</em> application. Users can populate populate <em>Cesium</em> with their own private content, or simply stream from <a href=\\\"http://www.agi.com/\\\" target=\\\"_blank\\\">AGI</a>&#8216;s (or partner) pre-processed content.</p>\\n<p>The example below details the code and resources necessary to display a Cesium 3D Globe with DigitalGlobe <em>Imagery</em> and <a href=\\\"http://www.mapbox.com\\\" target=\\\"_blank\\\">Mapbox</a> <em>Reference</em> layers draped over the <a href=\\\"https://cesiumjs.org/data-and-assets/terrain/stk-world-terrain.html\\\" target=\\\"_blank\\\">STK World Terrain Model</a> published by <a href=\\\"http://www.agi.com/\\\" target=\\\"_blank\\\">AGI</a>.</p>\\n<p>Note: This example uses a &#8216;custom&#8217; <code><a href=\\\"https://cesiumjs.org/Cesium/Build/Documentation/BaseLayerPicker.html\\\" target=\\\"_blank\\\">baseLayerPicker</a> </code>to display specific layers from DigitalGlobe Maps API.</p>\\n<p>*You must have <a href=\\\"http://get.webgl.org\\\" target=\\\"_blank\\\">WebGL</a> enabled in order to see the Globe in 3D. <a href=\\\"http://get.webgl.org\\\" target=\\\"_blank\\\">Click here</a> if you are unsure, or of the example below does not work.</p>\\n<p><strong>DigitalGlobe Maps API</strong> Example: <em>Cesium.js</em><br /></p>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"//jsfiddle.net/marracci/2t85nawg/embedded/result,js,html,css,resources/\\\" width=\\\"100%\\\" height=\\\"800\\\" frameborder=\\\"0\\\" allowfullscreen=\\\"allowfullscreen\\\"></iframe>\"\n}\n[/block]","excerpt":"","slug":"maps-api-cesiumjs-3d-globe","type":"basic","title":"Maps API + Cesium.js 3D Globe"}

Maps API + Cesium.js 3D Globe


[block:html] { "html": "<p>You can easily use <a href=\"http://developer.digitalglobe.com/maps-api/\">DigitalGlobe Maps API</a> with <a href=\"http://www.cesiumjs.com\" target=\"_blank\">Cesium.js</a> to create<strong> stunning</strong> 3D renditions of our world. Cesium is a <a href=\"https://en.wikipedia.org/wiki/JavaScript\" target=\"_blank\">JavaScript</a> library for creating 3D globes and 2D maps in a web browser without a plugin. It uses <a href=\"http://get.webgl.org\" target=\"_blank\">WebGL</a>* for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization. <em>Cesium</em> is open source under the Apache 2.0 license. The <em>Cesium</em> Content Server provides a conduit to seamlessly stream 3D content, such as terrain, into <em>Cesium</em>. The web-optimized, open-formatted services provide a content source for any <em>Cesium</em> application. Users can populate populate <em>Cesium</em> with their own private content, or simply stream from <a href=\"http://www.agi.com/\" target=\"_blank\">AGI</a>&#8216;s (or partner) pre-processed content.</p>\n<p>The example below details the code and resources necessary to display a Cesium 3D Globe with DigitalGlobe <em>Imagery</em> and <a href=\"http://www.mapbox.com\" target=\"_blank\">Mapbox</a> <em>Reference</em> layers draped over the <a href=\"https://cesiumjs.org/data-and-assets/terrain/stk-world-terrain.html\" target=\"_blank\">STK World Terrain Model</a> published by <a href=\"http://www.agi.com/\" target=\"_blank\">AGI</a>.</p>\n<p>Note: This example uses a &#8216;custom&#8217; <code><a href=\"https://cesiumjs.org/Cesium/Build/Documentation/BaseLayerPicker.html\" target=\"_blank\">baseLayerPicker</a> </code>to display specific layers from DigitalGlobe Maps API.</p>\n<p>*You must have <a href=\"http://get.webgl.org\" target=\"_blank\">WebGL</a> enabled in order to see the Globe in 3D. <a href=\"http://get.webgl.org\" target=\"_blank\">Click here</a> if you are unsure, or of the example below does not work.</p>\n<p><strong>DigitalGlobe Maps API</strong> Example: <em>Cesium.js</em><br /></p>" } [/block] [block:html] { "html": "<iframe src=\"//jsfiddle.net/marracci/2t85nawg/embedded/result,js,html,css,resources/\" width=\"100%\" height=\"800\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"></iframe>" } [/block]