AI GIS

CesiumJS is a very popular web library that lets you create 3D visualization anywhere on Earth! Today, I will show you my first experiment trail and error using ChatGPT (https://chat.openai.com/) to develop a CesiumJS-based web GIS application.

So, let’s get started!

Trial 1:

An example HTML code that uses CesiumJS to build a 3D web-based application

Result:

Let’s try this code. To do this, just copy the result and paste it on VS Code and run it on a virtual server using the Live Server extension.

Problem:
And, somehow, the result on the first trial = fail. 😥😥

It seems like we found a little issue here. Because ChatGPT is based on the CesiumJS library that is outdated version 1.86 ~ from 2021 and not corrected referencing to the public dependencies.

So now, we just need to guide a ChatGPT to the correct path and version.

Trial 2:

Please update the reference of Cesium.js and Widgets to this path https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/

Result:

And, now after trying it on the live server, the basemap is now loaded.

Problem:

With the auto-generated script from the ChatGPT, the data is outdated and not available any longer. So, we just need to guide them to the active Tileset. In this case, we need to improve the ChatGPT to use the OSM dataset from CesiumJS directly.

To do this, I created a free account on CesiumIon and then copied the asset ID of the 3D Cesium OSM Buildings [96188] which we will use it to guide the ChatGPT to learn about it.

Trial 3:

Please update the HTML code to load the 3D OSM dataset tileset with asset number 96188 and zoom to the City of London once the tileset is loaded.

Result 3:

And, now! The 3D building model is loaded properly in the application.

*Note* from Trial 3: you need to input your Cesium API key manually into the application.

Problem:

Even though the 3D buildings have been successfully loaded. However, if you look carefully, there is still a gap between the surface and each building. To close this gap, we need to update our script to load Terrain as well.

Trial 4:

Please update the HTML code to additionally load the Cesium Terrain.

Result:

Problem:

Now, the result looks much better! However, those buildings look quite dark and gloomy. We can fix this by assigning the time to morning time.

Trial 5:

Please update the HTML code to set the time of Cesium to 8 AM local time.

Result:

Now, everything looks about right.

Final Result:

To sum up all my trials, the overall command to give to the ChatGPT is :

An example HTML code that uses CesiumJS to build a 3D web-based application using the reference of Cesium.js and Widgets to this path https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/
And load the 3D OSM dataset tileset with asset number 96188. Once the tileset is loaded, apply the white color to all buildings, and zoom to London area. Also, don't forget to load the Ceisum Terrain. Finally set 8 AM local time.

This means you can create a custom 3D Web GIS of any area in the world in just a minute if you have your data ready!

Conclusion

ChatGPT can really help build a 3D Web GIS in a very short time. In the past, it would take much longer to find all documentation about how to start and learn to build such an application. Although, ChatGPT is not perfect yet and it might not always give you a corrected result from the first trial. With some guidance, it learns to fix the script and provide a corrected answer.

And, it is your turn. You are encouraged to play and try building your own 3D Web GIS application in the area you like!

About me & All my blog contents: Link

Be Safe and Healthy!
Thank you for Reading. 👋😄