{"_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"},"githubsync":"","__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":"","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 javascript 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:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"//This example uses a DigitalGlobe Maps API Recent Imagery along with Mapbox Streets and terrain Basemaps. Get your DigitalGlobe Maps API Access Token here: http://platform.digitalglobe.com/maps-api\\n\\n\\nvar imageryViewModels = [];\\n\\n\\nimageryViewModels.push(new Cesium.ProviderViewModel({\\n    name: 'DigitalGlobe Maps API: Recent Imagery',\\n    iconUrl: Cesium.buildModuleUrl('https://platform.digitalglobe.com/examples/img/dgmapsapi_gbm.png'),\\n    tooltip: 'Beautiful 50cm imagery focused on temporal currency \\\\nhttps://platform.digitalglobe.com/maps-api',\\n    creationFunction: function () {\\n        return new Cesium.MapboxImageryProvider({\\n            mapId: 'digitalglobe.nal0g75k',\\n//Get your DigitalGlobe Maps API Access Token here: http://developer.digitalglobe.com/maps-api\\n            accessToken: 'ENTER YOUR MAPS API ACCESS TOKEN HERE',\\n            credit: 'DigitalGlobe Maps API'\\n        });\\n    }\\n}));\\n\\n\\n\\nimageryViewModels.push(new Cesium.ProviderViewModel({\\n    name: 'Mapbox Terrain',\\n    iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapboxTerrain.png'),\\n    tooltip: 'Satellite Imagery from Mapbox. \\\\nhttp://mapbox.com',\\n    creationFunction: function () {\\n        return new Cesium.MapboxImageryProvider({\\n            mapId: 'mapbox.run-bike-hike',\\n//Get your Mapbox API Access Token here: http://mapbox.com\\n            accessToken: 'ENTER YOUR MAPS API ACCESS TOKEN HERE',\\n            credit: 'Mapbox'\\n        });\\n    }\\n}));\\n\\n\\nimageryViewModels.push(new Cesium.ProviderViewModel({\\n    name: 'Mapbox + OpenStreet-Map',\\n    iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapboxStreets.png'),\\n    tooltip: 'The most useful Street and Reference basemap \\\\\\nanywhere on the planet, sourced from Mapbox and OpenStreet-Map. \\\\nhttp://mapbox.com',\\n    creationFunction: function () {\\n        return new Cesium.MapboxImageryProvider({\\n            mapId: 'mapbox.streets',\\n//Get your Mapbox API Access Token here: http://mapbox.com\\n            accessToken: 'ENTER YOUR MAPS API ACCESS TOKEN HERE',\\n            credit: 'Mapbox, OpenStreetMap Contributors'\\n        });\\n    }\\n}));\\n\\n\\n//Create a CesiumViewer \\nvar cesiumWidget = new Cesium.CesiumWidget('cesiumContainer', {\\n    imageryProvider: false,\\n    timeline: false,\\n    animation: false,\\n    terrainProvider: new Cesium.CesiumTerrainProvider({\\n        url: '//assets.agi.com/stk-terrain/world'\\n    })\\n});\\n\\n//Finally, create the baseLayerPicker widget using our view models.\\nvar layers = cesiumWidget.imageryLayers;\\nvar baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {\\n    globe: cesiumWidget.scene.globe,\\n    imageryProviderViewModels: imageryViewModels\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\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 javascript 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:code] { "codes": [ { "code": "//This example uses a DigitalGlobe Maps API Recent Imagery along with Mapbox Streets and terrain Basemaps. Get your DigitalGlobe Maps API Access Token here: http://platform.digitalglobe.com/maps-api\n\n\nvar imageryViewModels = [];\n\n\nimageryViewModels.push(new Cesium.ProviderViewModel({\n name: 'DigitalGlobe Maps API: Recent Imagery',\n iconUrl: Cesium.buildModuleUrl('https://platform.digitalglobe.com/examples/img/dgmapsapi_gbm.png'),\n tooltip: 'Beautiful 50cm imagery focused on temporal currency \\nhttps://platform.digitalglobe.com/maps-api',\n creationFunction: function () {\n return new Cesium.MapboxImageryProvider({\n mapId: 'digitalglobe.nal0g75k',\n//Get your DigitalGlobe Maps API Access Token here: http://developer.digitalglobe.com/maps-api\n accessToken: 'ENTER YOUR MAPS API ACCESS TOKEN HERE',\n credit: 'DigitalGlobe Maps API'\n });\n }\n}));\n\n\n\nimageryViewModels.push(new Cesium.ProviderViewModel({\n name: 'Mapbox Terrain',\n iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapboxTerrain.png'),\n tooltip: 'Satellite Imagery from Mapbox. \\nhttp://mapbox.com',\n creationFunction: function () {\n return new Cesium.MapboxImageryProvider({\n mapId: 'mapbox.run-bike-hike',\n//Get your Mapbox API Access Token here: http://mapbox.com\n accessToken: 'ENTER YOUR MAPS API ACCESS TOKEN HERE',\n credit: 'Mapbox'\n });\n }\n}));\n\n\nimageryViewModels.push(new Cesium.ProviderViewModel({\n name: 'Mapbox + OpenStreet-Map',\n iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapboxStreets.png'),\n tooltip: 'The most useful Street and Reference basemap \\\nanywhere on the planet, sourced from Mapbox and OpenStreet-Map. \\nhttp://mapbox.com',\n creationFunction: function () {\n return new Cesium.MapboxImageryProvider({\n mapId: 'mapbox.streets',\n//Get your Mapbox API Access Token here: http://mapbox.com\n accessToken: 'ENTER YOUR MAPS API ACCESS TOKEN HERE',\n credit: 'Mapbox, OpenStreetMap Contributors'\n });\n }\n}));\n\n\n//Create a CesiumViewer \nvar cesiumWidget = new Cesium.CesiumWidget('cesiumContainer', {\n imageryProvider: false,\n timeline: false,\n animation: false,\n terrainProvider: new Cesium.CesiumTerrainProvider({\n url: '//assets.agi.com/stk-terrain/world'\n })\n});\n\n//Finally, create the baseLayerPicker widget using our view models.\nvar layers = cesiumWidget.imageryLayers;\nvar baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {\n globe: cesiumWidget.scene.globe,\n imageryProviderViewModels: imageryViewModels\n});", "language": "javascript" } ] } [/block]