{"id":2245,"date":"2023-04-14T22:56:25","date_gmt":"2023-04-14T21:56:25","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=2245"},"modified":"2023-11-19T15:28:52","modified_gmt":"2023-11-19T14:28:52","slug":"the-impact-of-a-forest-wildfire-in-3d-with-geographical-information-on-cesium-js","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/en\/2245\/the-impact-of-a-forest-wildfire-in-3d-with-geographical-information-on-cesium-js\/","title":{"rendered":"The impact of a forest wildfire in 3D with geographical information on Cesium JS"},"content":{"rendered":"\n<p>After a few posts about the use of satellite information, let&#8217;s see how to bring it <em>(almost)<\/em> all together in a practical and impacting example. And it&#8217;s given the latest wildfires occurred in Spain that they&#8217;ve called my attention as I could not imagine how brutal they have been (although nothing compared to the ones in Chile, Australia or USA). But let&#8217;s do the exercise without spending too much GB in geographical information.<\/p>\n\n\n\n<p>What I want is to <strong>show the extent of the fire occurred in Asturias<\/strong> in March, but also to show <strong>the impact removing the trees affected<\/strong> by the flames. Let&#8217;s do it!<\/p>\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}\nif(window.location.href.includes(\"tag\")){\n\n}else{\nwindow.setTimeout(fillmenu,2000);\n}\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"download-data\">Download data<\/h2>\n\n\n\n<p>I will need a <strong>Digital Surface Model<\/strong> (which includes trees and structures), an <strong>orthophoto<\/strong> taken during the fire, and a <strong>Digital Terrain Model<\/strong> (which has been taken away trees and structures) to replace the areas affected by the fire.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"terrain-models\">1. Terrain models<\/h3>\n\n\n\n<p>I'm going to use the great models from Spanish <strong>IGN<\/strong>, downloading the products <strong>MDS5<\/strong> and <strong>MDT5<\/strong> for the area.<\/p>\n\n\n\n<p><a href=\"http:\/\/centrodedescargas.cnig.es\/CentroDescargas\/index.jsp\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/centrodedescargas.cnig.es\/CentroDescargas\/index.jsp<\/a><\/p>\n\n\n\n<figure class=\"wp-block-gallery aligncenter has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/mds5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"484\" data-id=\"2233\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/mds5.png\" alt=\"\" class=\"wp-image-2233\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/mdt5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"487\" data-id=\"2234\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/mdt5.png\" alt=\"\" class=\"wp-image-2234\"\/><\/a><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"orthophotos\">2. Orthophotos<\/h3>\n\n\n\n<p>As per satellite imagery, I decided to go for <strong>Landsat<\/strong> this time, as it had a clearer view during the last days of the fire.<\/p>\n\n\n\n<p>I will be using the images taken on 17th February 2023 (before the fire) and 6th April 2023 (yet in the last days).<\/p>\n\n\n\n<p><a href=\"https:\/\/search.earthdata.nasa.gov\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/search.earthdata.nasa.gov<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/landsat.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1136\" height=\"605\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/landsat.png\" alt=\"\" class=\"wp-image-2235\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"process-satellite-imagery\">Process satellite imagery<\/h2>\n\n\n\n<p>We'll use the process <strong><em>i.group<\/em><\/strong> from GRASS in QGIS to group the different bands captured by the satellite in a single RGB raster, as we saw in this previous post:<\/p>\n\n\n\n<p><a href=\"https:\/\/theroamingworkshop.cloud\/b\/en\/1761\/process-satellite-imagery-from-landsat-or-sentinel-2-with-qgis\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/theroamingworkshop.cloud\/b\/en\/1761\/process-satellite-imagery-from-landsat-or-sentinel-2-with-qgis\/<\/a><\/p>\n\n\n\n<p>You'll have to do it for every region downloaded, four in my case, that will be joint later using <strong><em>Build virtual raster<\/em><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"true-color\">1. True color image (TCI)<\/h3>\n\n\n\n<p>Combine bands 4, 3, 2.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1114\" height=\"884\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire5.png\" alt=\"\" class=\"wp-image-2213\"\/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"false-color-image\">2. False color image<\/h3>\n\n\n\n<p>Combine bands 5, 4, 3.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire6.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire6.png\" alt=\"\" class=\"wp-image-2214\" width=\"676\" height=\"537\"\/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"tonalidad\">3. Color adjustment<\/h3>\n\n\n\n<p>To get a better result, you can adjust the <strong>minimum and maximum values<\/strong> considered in each band composing the image. These values are found in the <strong>Histogram<\/strong> inside the layer properties.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire7.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire7.png\" alt=\"\" class=\"wp-image-2204\" width=\"676\" height=\"540\"\/><\/a><\/figure>\n<\/div>\n\n\n<p>here you have the values I used for the pictures above::<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Band<\/th><th class=\"has-text-align-center\" data-align=\"center\">TCI min<\/th><th class=\"has-text-align-center\" data-align=\"center\">TCI max<\/th><th class=\"has-text-align-center\" data-align=\"center\">FC min<\/th><th class=\"has-text-align-center\" data-align=\"center\">FC max<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">1 Red<\/td><td class=\"has-text-align-center\" data-align=\"center\">-100<\/td><td class=\"has-text-align-center\" data-align=\"center\">1500<\/td><td class=\"has-text-align-center\" data-align=\"center\">-50<\/td><td class=\"has-text-align-center\" data-align=\"center\">4000<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">2 Green<\/td><td class=\"has-text-align-center\" data-align=\"center\">0<\/td><td class=\"has-text-align-center\" data-align=\"center\">1500<\/td><td class=\"has-text-align-center\" data-align=\"center\">-100<\/td><td class=\"has-text-align-center\" data-align=\"center\">2000<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">3 Blue<\/td><td class=\"has-text-align-center\" data-align=\"center\">-10<\/td><td class=\"has-text-align-center\" data-align=\"center\">1200<\/td><td class=\"has-text-align-center\" data-align=\"center\">0<\/td><td class=\"has-text-align-center\" data-align=\"center\">1200<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"extension-del-incendio\">Fire extent<\/h2>\n\n\n\n<p>As you can see, the <strong>false color<\/strong> image shows a clear extension of the fire. We'll generate a <strong>polygon covering the extent of the fire<\/strong> with it.<\/p>\n\n\n\n<p>First, let's query the values in Band 1 (red) which offers a good contrast for values <strong>in the area of the fire<\/strong>. They are in the <strong>range 300-1300<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"45\" height=\"39\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire8.png\" alt=\"\" class=\"wp-image-2216\"\/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"185\" height=\"157\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire9.png\" alt=\"\" class=\"wp-image-2215\"\/><\/figure>\n<\/div>\n\n\n<p>Using the process <strong><em>Reclassify by table<\/em><\/strong>, we'll assign value 1 to the cells inside this range, and value 0 to the rest.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire10.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1364\" height=\"693\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire10.png\" alt=\"\" class=\"wp-image-2218\"\/><\/a><\/figure>\n<\/div>\n\n\n<p>Vectorize the result with process <strong><em>Poligonize<\/em><\/strong> and, following the satellite imagery, select those polygons in the fire area.<\/p>\n\n\n\n<figure class=\"wp-block-gallery aligncenter has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire12.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1089\" height=\"814\" data-id=\"2220\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire12.png\" alt=\"\" class=\"wp-image-2220\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire13-1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"768\" data-id=\"2222\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire13-1.png\" alt=\"\" class=\"wp-image-2222\"\/><\/a><\/figure>\n<\/figure>\n\n\n\n<p>Use the tool <strong><em>Dissolve<\/em><\/strong> to merge all the polygons in one element; then <strong><em>Smooth<\/em><\/strong> to round the corners slightly.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire14.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"818\" height=\"652\" data-id=\"2224\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire14.png\" alt=\"\" class=\"wp-image-2224\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire15.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"781\" height=\"609\" data-id=\"2223\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire15.png\" alt=\"\" class=\"wp-image-2223\"\/><\/a><\/figure>\n<\/figure>\n\n\n\n<p>Let's now get the inverse. <strong><em>Extract by exten<\/em>t<\/strong> using the Landsat layer, then use <strong><em>Difference<\/em><\/strong> with the fire polygon.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire16.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1421\" height=\"652\" data-id=\"2225\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire16.png\" alt=\"\" class=\"wp-image-2225\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire18.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1063\" height=\"841\" data-id=\"2226\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire18.png\" alt=\"\" class=\"wp-image-2226\"\/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"process-terrain\">Process terrain<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"combine-terrain-data\">1. Combine terrain data<\/h3>\n\n\n\n<p>Join the same type model files in one (one for the DSM, and another one for the DTM). Use process <strong><em>Build virtual raster<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1904\" height=\"888\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire1.png\" alt=\"\" class=\"wp-image-2210\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ectract-terrain-data\">2. Extract terrain data<\/h3>\n\n\n\n<p>Extract the data of interest in each model:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From the <strong>DSM<\/strong> extract the surface affected by the fire, so you'll remove all the surface in it.<\/li>\n\n\n\n<li>Do the opposite with the <strong>DTM<\/strong>: keep the terrain (without trees) in the fire area, so it will fill the gaps in the other model.<\/li>\n<\/ul>\n\n\n\n<p>Use the process <strong><em>Crop raster by mask layer<\/em><\/strong> using the layers generated previously.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire19.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1313\" height=\"747\" data-id=\"2227\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire19.png\" alt=\"\" class=\"wp-image-2227\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire20.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"859\" height=\"799\" data-id=\"2228\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire20.png\" alt=\"\" class=\"wp-image-2228\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"785\" height=\"846\" data-id=\"2229\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire21.png\" alt=\"\" class=\"wp-image-2229\"\/><\/figure>\n<\/figure>\n\n\n\n<p>Finally join both raster layers, so they fill each others' gaps, using <strong><em>Build virtual raster<\/em><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bring-it-to-life-with-cesium-js\">Bring it to life with Cesium JS<\/h2>\n\n\n\n<p>You should already have a <strong>surface model without trees in the fire area<\/strong>, but let's try to explore it in an interactive way.<\/p>\n\n\n\n<p>I showed a similar example, using a custom Digital Terrain Model, as well as a recent satellite image, for the Tajogaite volcano in La Palma:<\/p>\n\n\n\n<p><a href=\"https:\/\/theroamingworkshop.cloud\/b\/1319\/cesiumjs-el-visor-gratuito-de-mapas-en-3d-para-tu-web\/\">https:\/\/theroamingworkshop.cloud\/b\/1319\/cesiumjs-el-visor-gratuito-de-mapas-en-3d-para-tu-web\/<\/a><\/p>\n\n\n\n<p>In this case I'll use <strong>Cesium JS<\/strong> again to interact easily with the map (follow the post linked above to see how to upload your custom files to the Cesium JS viewer).<\/p>\n\n\n\n<p>For this purpose, I created a <strong>split-screen viewer<\/strong> (using two separate instances of Cesium JS) to show the <strong>before and after<\/strong> picture of the fire. Here you have a preview:<\/p>\n\n\n\n<p><a href=\"https:\/\/theroamingworkshop.cloud\/demos\/cesiumJSmirror\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/theroamingworkshop.cloud\/demos\/cesiumJSmirror\/<\/a><\/p>\n\n\n\n<iframe src=\"https:\/\/theroamingworkshop.cloud\/demos\/cesiumJSmirror\" style=\"border:none;width:100%;height:300px\"><\/iframe>\n\n\n\n<p>I hope you liked it! here you have the full code and a link to <strong><em>github<\/em><\/strong>, where you can download it directly. And remember, share your doubts or comments on twitter!<\/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\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:5%\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/github.png\" alt=\"\" class=\"wp-image-2237\" width=\"46\" height=\"43\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:95%\">\n<p><a href=\"https:\/\/github.com\/TheRoam\/cesiumJSmirror\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/TheRoam\/cesiumJSmirror<\/a><\/p>\n<\/div>\n<\/div>\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&lt;title&gt;Cesium JS mirror v1.0&lt;\/title&gt;\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;display:flex;flex-direction:row;font-family:Arial\"&gt;\n&lt;div style=\"height:100%;width:50%;\" id=\"cesiumContainer1\"&gt;\n\t&lt;span style=\"display:block;position:absolute;z-Index:1001;top:0;background-color: rgba(0, 0, 0, 0.5);color:darkorange;padding:13px\"&gt;06\/04\/2023&lt;\/span&gt;\n&lt;\/div&gt;\n&lt;div style=\"height:100%;width:50%;background-color:black;\" id=\"cesiumContainer2\"&gt;\n\t&lt;span style=\"display:block;position:absolute;z-Index:1001;top:0;background-color: rgba(0, 0, 0, 0.5);color:darkorange;padding:13px\"&gt;17\/02\/2023&lt;\/span&gt;\n\t&lt;span style=\"display:block;position:absolute;z-Index:1001;bottom:10%;right:0;background-color: rgba(0, 0, 0, 0.5);color:white;padding:13px;font-size:14px;user-select:none;\"&gt;\n\t\t&lt;b&gt;&lt;u&gt;Cesium JS mirror v1.0&lt;\/u&gt;&lt;\/b&gt;&lt;br&gt;\n\t\t\u00b7 Use the &lt;b&gt;left panel&lt;\/b&gt; to control the camera&lt;br&gt;\n\t\t\u00b7 &lt;b&gt;Click+drag&lt;\/b&gt; to move the position&lt;br&gt;\n\t\t\u00b7 &lt;b&gt;Control+drag&lt;\/b&gt; to rotate camera&lt;br&gt;\n\t\t\u00b7 &lt;b&gt;Scroll&lt;\/b&gt; to zoom in\/out&lt;br&gt;\n\t\t&lt;span&gt;&lt;a style=\"color:darkorange\" href=\"https:\/\/theroamingworkshop.cloud\" target=\"_blank\"&gt;\u00a9 The Roaming Workshop &lt;span id=\"y\"&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/span&gt;\n    &lt;\/span&gt;\n&lt;\/div&gt;\n&lt;script&gt;\n\t\/\/ INSERT ACCESS TOKEN\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 = 'your_access_token';\n\n\t\/\/ Invoke LEFT view\n    \/\/ Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.\n\n    const viewerL = new Cesium.Viewer('cesiumContainer1', {\n\t\tterrainProvider: new Cesium.CesiumTerrainProvider({\n\t\t\turl: Cesium.IonResource.fromAssetId(1640615),\/\/get your asset ID from \"My Assets\" menu\n\t\t}),\t  \n\t\tbaseLayerPicker: false,\n\t\tinfoBox: false,\n    });    \n\n\t\/\/ Add Landsat imagery\n\tconst layerL = viewerL.imageryLayers.addImageryProvider(\n\t  new Cesium.IonImageryProvider({ assetId: 1640455 })\/\/get your asset ID from \"My Assets\" menu\n\t);\n\t\n\t\/\/ Hide bottom widgets\n\tviewerL.timeline.container.style.visibility = \"hidden\";\n\tviewerL.animation.container.style.visibility = \"hidden\";\n\n    \/\/ Fly the camera at the given longitude, latitude, and height.\n    viewerL.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-6.7200, 43.175, 6000),\n      orientation : {\n        heading : Cesium.Math.toRadians(15.0),\n        pitch : Cesium.Math.toRadians(-20.0),\n      }\n    });\n    \n    \/\/ Invoke RIGHT view\n\n    const viewerR = new Cesium.Viewer('cesiumContainer2', {\n\t\tterrainProvider: new Cesium.CesiumTerrainProvider({\n\t\t\turl: Cesium.IonResource.fromAssetId(1640502),\/\/get your asset ID from \"My Assets\" menu\n\t\t}),\t  \n\t\tbaseLayerPicker: false,\n\t\tinfoBox: false,\n    });    \n\n\t\/\/ Add Landsat imagery\n\tconst layerR = viewerR.imageryLayers.addImageryProvider(\n\t  new Cesium.IonImageryProvider({ assetId: 1640977 })\n\t);\n\t\n\t\/\/ Hide bottom widgets\n\tviewerR.timeline.container.style.visibility = \"hidden\";\n\tviewerR.animation.container.style.visibility = \"hidden\";\n\n    \/\/ Fly the camera at the given longitude, latitude, and height.\n    viewerR.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-6.7200, 43.175, 6000),\n      orientation : {\n        heading : Cesium.Math.toRadians(15.0),\n        pitch : Cesium.Math.toRadians(-20.0),\n      }\n    });\n    \n    \/\/ Invoke camera tracker\n    \/\/define a loop\n    var camInterval=setInterval(function(){\n\n\t},200);\n    clearInterval(camInterval);\n    \n    document.onmousedown=trackCam();\n    document.ondragstart=trackCam();\n    \n    \/\/define loop function (read properties from left camera and copy to right camera)\n    function trackCam(){\n\t\tcamInterval=setInterval(function(){\n\t\t\tviewerR.camera.setView({\n\t\t\t\tdestination: Cesium.Cartesian3.fromElements(\n\t\t\t\t\t  viewerL.camera.position.x,\n\t\t\t\t\t  viewerL.camera.position.y,\n\t\t\t\t\t  viewerL.camera.position.z\n\t\t\t\t\t),\n\t\t\t\torientation: {\n\t\t\t\t\tdirection : new Cesium.Cartesian3(\n\t\t\t\t\t\tviewerL.camera.direction.x,\n\t\t\t\t\t\tviewerL.camera.direction.y,\n\t\t\t\t\t\tviewerL.camera.direction.z),\n\t\t\t\t\tup : new Cesium.Cartesian3(\n\t\t\t\t\t\tviewerL.camera.up.x,\n\t\t\t\t\t\tviewerL.camera.up.y,\n\t\t\t\t\t\tviewerL.camera.up.z)\n\t\t\t\t},\n\t\t\t});\n\t\t},50);\n\t};\n\t\/\/stop loop listeners (release mouse or stop scroll)\n\tdocument.onmouseup=function(){\n\t\tclearInterval(camInterval);\n\t};\n\tdocument.ondragend=function(){\n\t\tclearInterval(camInterval);\n\t};\n\t\n\t\/\/keep the copyright date updated\n\tvar y=new Date(Date.now());\n\tdocument.getElementById(\"y\").innerHTML=y.getFullYear();\n  &lt;\/script&gt;\n&lt;\/div&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>After a few posts about the use of satellite information, let&#8217;s see how to bring it (almost) all together in a practical and impacting example. And it&#8217;s given the latest wildfires occurred in Spain that they&#8217;ve called my attention as I could not imagine how brutal they have been (although nothing compared to the ones [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2232,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74,609,32],"tags":[276,278,280,282,114,284,116,286,288,290,292,294,296,298,300,302,132,304,134,306,308,214,216,218,310,312,314,316],"class_list":["post-2245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3den","category-demos-en","category-map-en","tag-3d-en","tag-3d-map-viewer-en","tag-cesium-js-en","tag-digital-surface-model-en","tag-digital-terrain-model-en","tag-dsm-en","tag-dtm-en","tag-forest-en","tag-forest-fire-en","tag-forestal-en","tag-imagen-satelite-en","tag-imagery-en","tag-incendio-en","tag-incendio-forestal-en","tag-map-viewer-en","tag-mds-en","tag-mdt-en","tag-modelo-digital-de-superficies-en","tag-modelo-digital-del-terreno-en","tag-orthophoto-en","tag-ortogoto-en","tag-satelite-en","tag-satellite-en","tag-satellite-imagery-en","tag-viewer-en","tag-visor-en","tag-visor-de-mapas-3d-en","tag-wildfire-en","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/2245","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=2245"}],"version-history":[{"count":2,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/2245\/revisions"}],"predecessor-version":[{"id":2247,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/2245\/revisions\/2247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/2232"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=2245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=2245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=2245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}