{"id":1332,"date":"2022-09-06T21:29:44","date_gmt":"2022-09-06T20:29:44","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=1332"},"modified":"2022-10-24T20:01:17","modified_gmt":"2022-10-24T19:01:17","slug":"cesiumjs-the-free-3d-map-viewer-for-your-website","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/en\/1332\/cesiumjs-the-free-3d-map-viewer-for-your-website\/","title":{"rendered":"CesiumJS: the free 3D map viewer for your website"},"content":{"rendered":"\n<p>In July, Nature published a <a rel=\"noreferrer noopener\" href=\"https:\/\/www.nature.com\/articles\/s41597-022-01551-8\" target=\"_blank\">high definition Digital Surface Model<\/a> of the new orography built by La Palma&#8217;s Tajogaite volcano eruption in 2021. A spectacular job by <a rel=\"noreferrer noopener\" href=\"https:\/\/ingv.it\" target=\"_blank\">Istituto Nazionale di Geofisica e Vulcanologia<\/a> together with <a rel=\"noreferrer noopener\" href=\"https:\/\/involcan.org\" target=\"_blank\">Instituto Vulcanol\u00f3gico de Canarias<\/a>.<\/p>\n\n\n\n<p>The usual way to see and work with these files is using a GIS software like QGIS or ArcGIS, but how can we make this friendly to standard users? Wouldn&#8217;t it be better seen directly in 3D and visit the place virtually?<\/p>\n\n\n\n<p>At this point is where I found <a rel=\"noreferrer noopener\" href=\"https:\/\/cesium.com\/platform\/cesiumjs\/\" target=\"_blank\">CesiumJS<\/a>: a 3D map viewer styling [G] Earth but open-source, free and highly customizable to make your own projects.<\/p>\n\n\n\n<div style=\"border:1px solid black;border-radius:5px;padding:5px 5px 5px 5px;font-size:12px;font-family:'Verdana';\">CesiumJS demo viewer of the new Tajogaite terrain with IDE Canarias satellite imagery. Click on the map to interact or open the <a href=\"https:\/\/theroamingworkshop.cloud\/demos\/tajogaite\" target=\"_blank\" rel=\"noopener\">full version<\/a>.<br><br>\n<iframe src=\"https:\/\/theroamingworkshop.cloud\/demos\/tajogaite\" style=\"border:none;width:100%;height:300px\"><\/iframe><\/div>\n\n\n\n<div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\">\n<p style=\"font-weight:bold;\">Content<\/p>\n<\/div>\n<script>\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i<window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")[i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")[0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\nconsole.log(text);\n}\n}\n\nwindow.setTimeout(fillmenu,2000);\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"account-cesium-ion\">Create a Cesium ion account<\/h2>\n\n\n\n<p>To use CesiumJS you need to <a rel=\"noreferrer noopener\" href=\"https:\/\/cesium.com\/ion\/signup\/\" target=\"_blank\">register an account<\/a> in order to obtain an <strong>Access Token<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium3.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"534\" height=\"389\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium3.png\" alt=\"\" class=\"wp-image-1321\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium3.png 534w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium3-300x219.png 300w\" sizes=\"auto, (max-width: 534px) 100vw, 534px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Registering, we can also upload our own files to customize our 3D map creations. In my case you can see that I uploaded the Digital Surface Model and imagery of the viewer. I drop the links in case you want to use the same files:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Digital Surface Model of La Palma volcano in January 2022.<\/strong><br>Format geoTIFF with 0'2 metre grid size.<br><a href=\"https:\/\/portal.opentopography.org\/dataspace\/dataset?opentopoID=OTDS.032022.4083.1#panel_head_files\">https:\/\/portal.opentopography.org\/dataspace\/dataset?opentopoID=OTDS.032022.4083.1#panel_head_files<\/a><\/li><li><strong>50cm satellite imagery from January 2022 by IDE Canarias<\/strong><br><a href=\"https:\/\/idecan1.grafcan.es\/ServicioWMS\/ErupcionLP2021?SERVICE=WMS&amp;request=GetMap&amp;version=1.1.1&amp;layers=ORTO_14012022_SAT50&amp;format=image%2Fjpeg&amp;transparent=true&amp;width=1200&amp;height=800&amp;srs=EPSG:4326&amp;bbox=-17.93,28.58,-17.83,28.65\">https:\/\/idecan1.grafcan.es\/ServicioWMS\/ErupcionLP2021?SERVICE=WMS&amp;request=GetMap&amp;version=1.1.1&amp;layers=ORTO_14012022_SAT50&amp;format=image%2Fjpeg&amp;transparent=true&amp;width=1200&amp;height=800&amp;srs=EPSG:4326&amp;bbox=-17.93,28.58,-17.83,28.65<\/a><\/li><\/ul>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>You can use the <a href=\"https:\/\/idecan1.grafcan.es\/ServicioWMS\/ErupcionLP2021?SERVICE=WMS\" target=\"_blank\" rel=\"noopener\">WMS service<\/a> in your GIS software to extract the imagery, or <a href=\"https:\/\/theroamingworkshop.cloud\/demos\/tajogaite\/IDECanarias_20220114_1m.tif\" target=\"_blank\" rel=\"noopener\">download<\/a> the one I use in this example (270 MB with 1m resolution)<\/i><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"617\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4.png\" alt=\"\" class=\"wp-image-1322\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4.png 902w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4-300x205.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4-768x525.png 768w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4-676x462.png 676w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"include-cesium-js\">Include CesiumJS in your web.<\/h2>\n\n\n\n<p>To use CesiumJS we configure a .html file as usual.<\/p>\n\n\n\n<p>In this case, I'll copy the code directly from their <a rel=\"noreferrer noopener\" href=\"https:\/\/cesium.com\/learn\/cesiumjs-learn\/cesiumjs-quickstart\/\" target=\"_blank\">quickstart example<\/a> as it is only about 25 lines:<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  \n  <!-- Include the CesiumJS JavaScript and CSS files -->\n  <script src=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.97\/Build\/Cesium\/Cesium.js\"><\/script>\n  <link href=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.97\/Build\/Cesium\/Widgets\/widgets.css\" rel=\"stylesheet\">\n<\/head>\n<body>\n  <div id=\"cesiumContainer\"><\/div>\n  <script>\n    \/\/ Your access token can be found at: https:\/\/cesium.com\/ion\/tokens.\n    \/\/ This is the default access token from your ion account\n    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MTYwNGM0Yi1iYzlkLTRkMTUtOGQyOS04YjQxNmUwZDQ0YjkiLCJpZCI6MTA0Mjc3LCJpYXQiOjE2NjAxMDk4MzR9.syNWeKPLWA2eMrEh4K9hvkyp1oGdbLMaL0Ozk1kaksk';\n    \/\/ Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.\n    const viewer = new Cesium.Viewer('cesiumContainer', {\n      terrainProvider: Cesium.createWorldTerrain()\n    });    \n    \/\/ Add Cesium OSM Buildings, a global 3D buildings layer.\n    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   \n    \/\/ Fly the camera to San Francisco at the given longitude, latitude, and height.\n    viewer.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),\n      orientation : {\n        heading : Cesium.Math.toRadians(0.0),\n        pitch : Cesium.Math.toRadians(-15.0),\n      }\n    });\n  <\/script>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n<p>As you see, the main parts are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>links to CesiumJS libraries in the <code>&lt;head&gt;<\/code><\/li><li>a <code>&lt;div&gt;<\/code> element with id <code>\"cesiumContainer\"<\/code> inside the <code>&lt;body&gt;<\/code><\/li><li>the Access Token as variable <code>Cesium.Ion.defaultAccessToken<\/code>. Introduce yours here.<\/li><li>a <code>\"viewer\"<\/code> variable<\/li><li>the initial viewer configuration, specifying initial coordinates and X, Z angles.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"utf-8\"&gt;\n  &lt;!-- Include the CesiumJS JavaScript and CSS files --&gt;\n  &lt;script src=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.97\/Build\/Cesium\/Cesium.js\"&gt;&lt;\/script&gt;\n  &lt;link href=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.97\/Build\/Cesium\/Widgets\/widgets.css\" rel=\"stylesheet\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div id=\"cesiumContainer\"&gt;&lt;\/div&gt;\n  &lt;script&gt;\n    \/\/ Your access token can be found at: https:\/\/cesium.com\/ion\/tokens.\n    \/\/ This is the default access token from your ion account\n    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MTYwNGM0Yi1iYzlkLTRkMTUtOGQyOS04YjQxNmUwZDQ0YjkiLCJpZCI6MTA0Mjc3LCJpYXQiOjE2NjAxMDk4MzR9.syNWeKPLWA2eMrEh4K9hvkyp1oGdbLMaL0Ozk1kaksk';\n    \/\/ Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.\n    const viewer = new Cesium.Viewer('cesiumContainer', {\n      terrainProvider: Cesium.createWorldTerrain()\n    });    \n    \/\/ Add Cesium OSM Buildings, a global 3D buildings layer.\n    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   \n    \/\/ Fly the camera to San Francisco at the given longitude, latitude, and height.\n    viewer.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),\n      orientation : {\n        heading : Cesium.Math.toRadians(0.0),\n        pitch : Cesium.Math.toRadians(-15.0),\n      }\n    });\n  &lt;\/script&gt;\n &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>You can also <a href=\"https:\/\/cesium.com\/downloads\/\" target=\"_blank\" rel=\"noopener\">donwload CesiumJS libraries<\/a> and use them locally or in your server<\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-terreno\">Add a custom terrain<\/h2>\n\n\n\n<p>Follow the <a rel=\"noreferrer noopener\" href=\"https:\/\/cesium.com\/learn\/3d-tiling\/ion-tile-terrain\/\" target=\"_blank\">steps in the Cesium page<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In your Cesium ion account, add the terrain as a new asset with <strong>Add data<\/strong>.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"271\" height=\"124\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium5.png\" alt=\"\" class=\"wp-image-1324\"\/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\"><li>Select the file and the data type as <strong>Raster Terrain<\/strong><\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/Cesium6-1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"228\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/Cesium6-1.png\" alt=\"\" class=\"wp-image-1326\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/Cesium6-1.png 502w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/Cesium6-1-300x136.png 300w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\"><li>Inside Terrain Options, select the base terrain as <strong>Main Sea Level<\/strong> and leave the rest as default.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium7.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"366\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium7.png\" alt=\"\" class=\"wp-image-1327\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium7.png 504w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium7-300x218.png 300w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\"><li>When the file is uploaded, you'll find a <strong>code sample <\/strong>to use this new terrain.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium8.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"549\" height=\"765\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium8.png\" alt=\"\" class=\"wp-image-1328\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium8.png 549w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium8-215x300.png 215w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"add-imagery\">Add imagery<\/h2>\n\n\n\n<p>Repeating the previous step, now upload the satellite imagery and choose <strong>Raster Imagery<\/strong> data type.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium9.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"387\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium9.png\" alt=\"\" class=\"wp-image-1329\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium9.png 510w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium9-300x228.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>In this case, we also get a sample code to use this image.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium10.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"727\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium10.png\" alt=\"\" class=\"wp-image-1330\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium10.png 550w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium10-227x300.png 227w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"personalizar-visor\">Customizing the viewer<\/h2>\n\n\n\n<p>Add all the above to your .html file and customize it to your like. For example, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Adjust container elements so they fill the whole screen:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body style=\"margin:0;width:100vw;height:100vh;\"&gt;\n&lt;div style=\"height:100%;\" id=\"cesiumContainer\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Hide bottom controls:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>viewer.timeline.container.style.visibility = \"hidden\";\nviewer.animation.container.style.visibility = \"hidden\";<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Adjust initial view coordinates to our site:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>viewer.camera.flyTo({\n    destination : Cesium.Cartesian3.fromDegrees(-17.8195, 28.6052, 3000),\n    orientation : {\n    heading : Cesium.Math.toRadians(-85.0),\n    pitch : Cesium.Math.toRadians(-30.0),\n    }\n});<\/code><\/pre>\n\n\n\n<p>This is the result you might have seen already:<\/p>\n\n\n\n<iframe src=\"https:\/\/theroamingworkshop.cloud\/demos\/tajogaite\" style=\"border:none;width:100%;height:300px\"><\/iframe>\n\n\n\n<p>And its full code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"utf-8\"&gt;\n\n&lt;script src=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.96\/Build\/Cesium\/Cesium.js\"&gt;&lt;\/script&gt;\n&lt;link href=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.96\/Build\/Cesium\/Widgets\/widgets.css\" rel=\"stylesheet\"&gt;\n&lt;\/head&gt;\n&lt;body style=\"margin:0;width:100vw;height:100vh;\"&gt;\n&lt;div style=\"height:100%;\" id=\"cesiumContainer\"&gt;&lt;\/div&gt;\n&lt;script&gt;\n    \/\/ Your access token can be found at: https:\/\/cesium.com\/ion\/tokens.\n    \/\/ Replace `your_access_token` with your Cesium ion access token.\n\n    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MTYwNGM0Yi1iYzlkLTRkMTUtOGQyOS04YjQxNmUwZDQ0YjkiLCJpZCI6MTA0Mjc3LCJpYXQiOjE2NjAxMDk4MzR9.syNWeKPLWA2eMrEh4K9hvkyp1oGdbLMaL0Ozk1kaksk';\n\n    \/\/ Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.\n    const viewer = new Cesium.Viewer('cesiumContainer', {\n      \/\/terrainProvider: Cesium.createWorldTerrain()\/\/terreno original\n\t\tterrainProvider: new Cesium.CesiumTerrainProvider({\/\/terreno modificado\n\t\t\turl: Cesium.IonResource.fromAssetId(1255858),\n\t\t}),\t  \n    });    \n\t\n\t\/\/ Esconder widgest inferiores\n\tviewer.timeline.container.style.visibility = \"hidden\";\n\tviewer.animation.container.style.visibility = \"hidden\";\n\t\n\t\/\/ Add Sentinel2 imagery\n\tconst layer = viewer.imageryLayers.addImageryProvider(\n\t  new Cesium.IonImageryProvider({ assetId: 1256129 })\n\t);\n    \/\/ Add Cesium OSM Buildings, a global 3D buildings layer.\n    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   \n    \/\/ Fly the camera to San Francisco at the given longitude, latitude, and height.\n    viewer.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-17.8195, 28.6052, 3000),\n      orientation : {\n        heading : Cesium.Math.toRadians(-85.0),\n        pitch : Cesium.Math.toRadians(-30.0),\n      }\n    });\n  &lt;\/script&gt;\n&lt;\/div&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>And that's it! You can create tons of immersive web apps with detailed terrains better than the standard ones.<\/p>\n\n\n\n<p>Where else can you use CesiumJS? Tell it on Twitter \ud83d\udc26<\/p>\n\n\n\n<p>\ud83d\udc26 <code><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/roamingworkshop\" target=\"_blank\">@RoamingWorkshop<\/a><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In July, Nature published a high definition Digital Surface Model of the new orography built by La Palma&#8217;s Tajogaite volcano eruption in 2021. A spectacular job by Istituto Nazionale di Geofisica e Vulcanologia together with Instituto Vulcanol\u00f3gico de Canarias. The usual way to see and work with these files is using a GIS software like [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1320,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-1332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-map-en","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/comments?post=1332"}],"version-history":[{"count":3,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1332\/revisions"}],"predecessor-version":[{"id":1585,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1332\/revisions\/1585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/1320"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=1332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=1332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=1332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}