diff --git a/public/vis_workshop/img/1.JPG b/public/vis_workshop/img/1.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..93a22b50d6c6c20852b4a2616f91eaaf9c050277
Binary files /dev/null and b/public/vis_workshop/img/1.JPG differ
diff --git a/public/vis_workshop/img/1a.JPG b/public/vis_workshop/img/1a.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..62b304d8b44fbf4890cc99508331d761f06f4014
Binary files /dev/null and b/public/vis_workshop/img/1a.JPG differ
diff --git a/public/vis_workshop/img/2.JPG b/public/vis_workshop/img/2.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..64590256650049491e1aac97dc7550adcf4abbae
Binary files /dev/null and b/public/vis_workshop/img/2.JPG differ
diff --git a/public/vis_workshop/img/3.JPG b/public/vis_workshop/img/3.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..c70c3cbe0d40417f22eee88fda5084b8ef73b386
Binary files /dev/null and b/public/vis_workshop/img/3.JPG differ
diff --git a/public/vis_workshop/img/4.JPG b/public/vis_workshop/img/4.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..6c9d6872e1b2c6d1c2542a5f24be7d1dc81b9ed2
Binary files /dev/null and b/public/vis_workshop/img/4.JPG differ
diff --git a/public/vis_workshop/img/5.JPG b/public/vis_workshop/img/5.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..52bae0b1ecfa3c7ccf7227d5b4e6ff89b87fb47b
Binary files /dev/null and b/public/vis_workshop/img/5.JPG differ
diff --git a/public/vis_workshop/img/6.JPG b/public/vis_workshop/img/6.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..ce01040ebeee458aa64dc01593e90ef85b8a407e
Binary files /dev/null and b/public/vis_workshop/img/6.JPG differ
diff --git a/public/vis_workshop/img/Deutschland3D.JPG b/public/vis_workshop/img/Deutschland3D.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..16623b6792154ce6a5fc31db95fb54defc4ba77d
Binary files /dev/null and b/public/vis_workshop/img/Deutschland3D.JPG differ
diff --git a/public/vis_workshop/img/StreamlinesMultipart.png b/public/vis_workshop/img/StreamlinesMultipart.png
new file mode 100644
index 0000000000000000000000000000000000000000..068a15c5d7faacb66b628cacb240f08f92c77baa
Binary files /dev/null and b/public/vis_workshop/img/StreamlinesMultipart.png differ
diff --git a/public/vis_workshop/img/architecture.JPG b/public/vis_workshop/img/architecture.JPG
new file mode 100644
index 0000000000000000000000000000000000000000..d5d15fcaf7b044a9d89c861c740f58bfaedb32d4
Binary files /dev/null and b/public/vis_workshop/img/architecture.JPG differ
diff --git a/public/vis_workshop/img/logo.jpg b/public/vis_workshop/img/logo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bd8c86fab2f655d74d20dac9b2defbccd0ba2d3a
Binary files /dev/null and b/public/vis_workshop/img/logo.jpg differ
diff --git a/public/vis_workshop/index.html b/public/vis_workshop/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..e3e192af975b863f6b8009105b0cc47baa616d7b
--- /dev/null
+++ b/public/vis_workshop/index.html
@@ -0,0 +1,232 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <!-- Required meta tags -->
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+ <!-- Bootstrap CSS -->
+ <link rel="stylesheet" href="source/bootstrap.min.css">
+ <link rel="stylesheet" href="index.css">
+ <link rel="icon"
+ type="image/ico"
+ href="favicon.ico">
+ <title>Web-based Visualization of the 3D City Models</title>
+ <style>
+ table {
+ border: 0px;
+ padding: 0px;
+ margin: 0px;
+ border-collapse: collapse;
+ }
+
+ td {
+ border-right: 1px solid black;
+ padding: 2px 2px 5px 2px;
+ margin: 0px;
+ }
+
+ th {
+ border-bottom: 1px solid black;
+ padding: 5px;
+ margin: 0px;
+ }
+
+ tr {
+ padding: 0px;
+ margin: 0px;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="section topperStyle">
+ <!-- <a href="https://www.hft-stuttgart.de"><img src="HFT_logo.jpg"
+ style='width: 200px;margin-right: 20px;' /></a>
+ <a
+ href="http://www.steinbeis.de/de/experten/steinbeis-unternehmen-und-partner/detail.html?tx_z7suprofiles_detail%5Bprofile%5D=2618&cHash=db7d30240e803db2f04ccfd0425eb374"><img
+ src="https://www.hft-stuttgart.de/Forschung/Transfer/Steinbeislogo1.gif" /></a>
+ <br> The University of Applied Sciences Stuttgart
+ <h1>Examples of our projects and applications</h1> -->
+ <div class="row">
+ <div class="col">
+ <h1>Creating Interactive 3D Web Maps from 3D City Models with CesiumJS</h1>
+ <h6>by <a href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe T.S.</a></h6>
+ </div>
+ <div class="col-md-auto">
+ <!-- <a href="https://www.hft-stuttgart.de"><img src="HFT_logo.jpg"
+ style='width: 200px;margin-right: 20px;' /></a> -->
+ University of Applied Science Stuttgart
+ </div>
+ </div>
+ </div>
+ <div style="margin:20px; padding:30px">
+ <h1>Introduction</h1>
+ <p>The recent technology of virtual globe-based 3D visualization is a unique opportunity to facilitate advanced
+ analysis and visualization tasks in a variety of application domains such as urban planning, indoor/outdoor
+ pedestrian navigation, environmental simulations, cultural heritage, or facility management. One core data
+ which make this concept come true is the development of the CityGML models by Open Geospatial Consortium
+ (OGC — https://www.ogc.org/). CityGML is the global data model schema for describing 3D
+ geo-spatially-enabled urban models. There are more and more cities that provide open-source CityGML models
+ publicly.</p>
+
+ <img src="img/6.JPG" alt="" style="width: 800px;">
+ <br>(An Expected Output from This Workshop — 3D Web App with 3D Semantic Building Models in Den Haag Area)
+ <br>
+ <hr>
+ <h3>Architecture and Workflow</h3>
+ <img src="img/architecture.JPG" alt="" style="width: 600px;"><br>
+ The overall system architecture of the 3D web-based app is shown in the figure above. It includes four main
+ components: CityGML dataset, 3D Tiles dataset, Web server, and Users.
+ <br> <b>So, let’s get started and create each component together</b> <br>
+ <hr>
+ <h3>Step 1: Preparing 3D City Models</h3>
+ <p>In this step, we will download the 3D city models in CityGML format. Then, convert the models to 3D Tiles
+ format for optimizing the 3D web visualization. In this article, I picked the 3D city models from Den Haag
+ area as it is a compact model. Of course, you are free to explore this method with any CityGML datasets.</p>
+ <li> Download the CityGML dataset from
+ <li style="list-style-type:none">
+ <ul>
+ <li>
+ Den Haag (NL) 3D building model Dataset: <a
+ href="https://denhaag.dataplatform.nl/#/data/36049d1a-4a0f-4c5d-8adb-21dbfb7252f9"
+ target="_blank">https://denhaag.dataplatform.nl/#/data/36049d1a-4a0f-4c5d-8adb-21dbfb7252f9</a>
+ </li>
+ <li>
+ Nordrhein-westfalen (Germany) 3D building model Dataset: <a
+ href="https://www.opengeodata.nrw.de/produkte/geobasis/3dg/lod2_gml/"
+ target="_blank">https://www.opengeodata.nrw.de/produkte/geobasis/3dg/lod2_gml/</a>
+ </li>
+ </ul>
+ </li>
+ </li>
+ <li> Using the FME Workbench to convert the CityGML models to 3D Tiles format. Starting by opening the FME
+ Workbench, Drag and drop all CityGML models to the FME window.<br>
+ <img src="img/1a.JPG" alt="" style="width: 800px;"><br>
+ </li>
+ <li>
+ Select input Format "CityGML" and Workflow option "Single Merged Feature Type".<br>
+ <img src="img/1.JPG" alt="" style="width: 400px;"><br>
+ </li>
+ <li>
+ Click on "Add a new writer" button and select Format "Cesium 3D Tiles"<br>
+ <img src="img/2.JPG" alt="" style="width: 400px;"><br>
+ </li>
+ <li>
+ The workflow should look like following figure. Click Run and then wait until the conversion complete. Then,
+ the final 3D Tile City Models will be in the destination folder you input.<br>
+ <img src="img/3.JPG" alt="" style="width: 600px;"><br>
+
+ </li>
+ <hr>
+ <h3>Step 2: Preparing HTML for CesiumJS</h3>
+ In this step, we will create an HTML web document containing the 3D Web Globe using CesiumJS library. You can
+ use any code Idle or editor. You can create the document with
+ the name you like and copy the following code. Don't forget to specify the URL on line 24 to the target
+ Tileset.json. If you do this for the first time, you can come back after you set up the web server in step
+ three.
+
+ <script src="https://gist.github.com/JoeThunyathep/0a97950f69952ea13759e0f245416604.js"></script>
+
+ <hr>
+ <h3>Step 3: Host the 3D Web App on the Web Server</h3>
+ This steps, we will host the Web App from step 2 and the 3D Tiles city models from step 1 on the web server. You
+ are freely to use any web server of your preferences.
+ <h5>3A: Python web server</h5>
+ <li>Install Python (3.xx)</li>
+ <li>open the CMD (Command Prompt) and check the python version <kbd>python --version</kbd>. If you get an error
+ message, please check your python installation.</li>
+ <li>Start the server by <kbd>python -m http.server 80</kbd> </li>
+
+ <h5>3B: XAMPP (Apache) web server.</h5>
+ (You can get it from <a
+ href="https://www.apachefriends.org/index.html">https://www.apachefriends.org/index.html</a>)
+ <li>Install XAMPP or Apache.</li>
+ <li>Open XAMPP Control Panel and start Apache HTTP web service. <br>Optionally, you can start the Apache
+ manually via <code> [(part to Apache)]\apache\bin\httpd.exe </code>. Or, use Terminal to enter <code>sudo
+ apachectl start</code> and <code>sudo apachectl stop</code> commands to start and stop Apache service.
+ <br>
+ <img src="img/4.JPG" alt="" style="width: 400px;"><br>
+ </li>
+ <li>Place the web document (denHaagApp.html) from step 2 and a folder of 3D Tiles city models from step 1 in the
+ C:\xampp\htdocs directory.<br>
+ <img src="img/5.JPG" alt="" style="width: 800px;"><br>
+ </li>
+ <li>In the html web document, update the URL value to the tileset.json file of your 3D Tiles model in the htdocs
+ folder. For example, if your 3D Tiles directory is at C:\xampp\htdocs\3dtile\tileset.json. You should set
+ the url value to "./3dtile/tileset.json" or "http://localhost/3dtile/tileset.json" as APACHE will serve
+ everything in the htdocs directory relatively to "http://localhost".
+ </li>
+ <hr>
+ <h3>Step 4: Test the 3D Web App</h3>
+
+ Finally, you can access your 3D web app visualizing 3D city model on your web browser.<br>
+ <img src="img/6.JPG" alt="" style="width: 800px;"><br>
+
+
+ <hr>
+ <h2>Overview of the software used</h2>
+ <ul>
+ <li><a href="https://cesiumjs.org/downloads/">CesiumJS</a> (Register for the token)</li>
+ <li>Web Server: Python 3 HTTP server or
+ <a href="https://httpd.apache.org/">Apache HTTP Server</a> , is also in <a
+ href="https://www.apachefriends.org/de/index.html">XAMPP</a> included</li>
+ <li>Web browser:
+ Google Chrome or <a href="https://www.mozilla.org/de/firefox/new/">Firefox</a></li>
+ <li>FME Workbench 2021 <a href="https://www.safe.com/free-fme-licenses/students/">Student License</a> </li>
+ </ul>
+ <hr>
+ <h2>Other Example Use Cases</h2>
+ <!-- <div class="card" style="width: 25rem;">
+ <img class="card-img-top" src="img/StreamlinesMultipart.png" alt="Card image cap">
+ <div class="card-body">
+ <h5 class="card-title">Wind Simulation Platform</h5>
+ <p class="card-text">in the Cesium 3D Web Application</p>
+ <a href="https://transfer.hft-stuttgart.de/pages/urbanvis/index.html" class="btn btn-primary">Go</a>
+ </div>
+ </div>
+
+ <div class="card" style="width: 25rem;">
+ <img class="card-img-top" src="img/Deutschland3D.JPG" alt="Card image cap">
+ <div class="card-body">
+ <h5 class="card-title">Deutschland in 3D</h5>
+ <p class="card-text">3D Web Application Visualizing German Cities</p>
+ <a href="https://deutschland.virtualcitymap.de/#/" class="btn btn-primary">Go</a>
+ </div>
+ </div> -->
+
+ <li><a href="https://transfer.hft-stuttgart.de/pages/urbanvis/index.html">Wind Simulation Platform</a> in the
+ Cesium 3D Web Application</li>
+ <li><a href="https://steinbeis-3dps.eu/3DGeoVolumes/">3D Visualization Server</a> for hosting 3D building models
+ created by the 3D GeoVolumes API (3D Container API)Specification</li>
+ <li><a href="https://steinbeis-3dps.eu/geoportal_3diot/#/">OGC 3D IoT Pilot - Sejong, South Korea</a> with air
+ quality sensor data (SensorThings API)</li>
+ <li><a href="https://deutschland.virtualcitymap.de/#/">Deutschland in 3D</a> 3D Web Application Visualizing
+ German Cities</li>
+ <li>Explore other <a href="https://3d.bk.tudelft.nl/opendata/opencities/">CityGML Datasets</a></li>
+
+ <hr>
+ <h2>Copyright</h2>
+ <p>The texts and images provided in the blog are under the <a
+ href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a> license.</p>
+ <h2>Author</h2>
+ <b>Thunyathep Santhanavanich (JOE)</b> PhD candidate<br>
+ Faculty of Geomatics, Computer Science and Mathematics, <br>University of Applied Sciences Stuttgart,
+ Schellingstr. 24, D-70174 Stuttgart<br>
+ <a href="mailto:thunyathep.santhanavanich@hft-stuttgart.de">thunyathep.santhanavanich@hft-stuttgart.de</a>
+ </div>
+
+
+ <!-- Optional JavaScript -->
+ <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+ integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
+ </script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+ integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
+ </script>
+ <script src="source/bootstrap.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file