Using ChatGPT to build a simple WebGIS

ChatGPT has become one of the most commented things at the beginning of 2023. You can find a lot of blogs like this one showing tons of usage, even with some packages already created for VScode, Whatsapp, and others. It was launched in November 2022 and already reached a million users.

Besides that, I was wondering, can this language AI create an entire WebGIS application? Why not test it?

So, this is what I’ve done, and here, I’ll share my thoughts about it today.

The idea here will be to create a simple WebGIS and use ChatGPT to help me to do that. To do this, I choose the following configuration:

• Django will be the framework, (with Geodjango)
• Postgres as Database (with PostGIS for spatial queries)
• Leaflet to deal with the maps
• Materialize CSS to create the style of the pages
• AWS S3 to store files

Now that everything is set up, I need to think about the way the WebGIS will look like. And these are the main topics:

Users will be able to download, upload and delete 3 different types of data:

• Raster: (Matricial dataset with geographic information, let’s start easy, only focusing on GeoTiffs)
• Vector: (Here, let’s keep it simple, we will focus on using only geojson and kml files, but later we would be able to use shapefiles too).
• Other: Data without geographic information (it is useful to clients to keep all files they have on the same plate)

Another option users will have is to create a View. This will be an option for users to see their dataset inside a webpage.

The last thing is, users will be able to see their dataset and interact with this inside a webpage, just by going to the “/map/” URL.

I’ll not cover all the stuff about creating the pages, users login/logout, configuring S3 to store the files, etc… The only thing I’m interested here is the GIS part of the code.

Now that we have everything we need to start I’ll first share my perspective about it and then explain.

Let’s go strictly to my thoughts: For me, working with ChatGPT is something similar to working with StackOverflow and Google, sometimes even better in some things, but worst in others. Let me get deep on it.

The best part of working with ChatGPT is that you can ask specific things, like: “I need to create a map, with X color to the Y feature, a button with Z size at the top, and this button will center the map page on the Y feature”. If you ask this, you will get a really good example that you can use in your project.

But why do I think that this is like Google or StackOverflow? The main reason is that you need to learn to type exactly what you need. If you try to ask something like: “Create a function that will read a vector file and send it to PostGIS”, for example, you can get different outputs, like this one:

As you can see, this is what I got from a similar question I’ve done to ChatGPT. The code does what it should do, but if you know a little bit about Django, you’d say that this is not what we were looking for. Actually, we need a way to send the files to a specific model, and save this the way Django does, following the best practices, because then we could just run something like Vector.objects.all() to retrieve the dataset we need.

But what about the maps?

I’ve asked ChatGPT to create the maps using Leaflet. My main concern is, I don’t have too much experience using it, so, I may face some problems to know what is “good code”. Even though, I could create everything I needed from it. Some examples of questions and answers I got:

• Create a map, that will have a navbar, and 2 different buttons, one to go to the homepage, and the other to open/close a sidenav.
• Now, inside the sidenav, create a dropdown window, where I can select the basemap to select the one I would like to see.
• Create options for users to see their dataset, zoom to the bounds of a specific layer using a button, and a checkbox where they can enable/disable the item. Join each item by line, adjust the items to be vertically aligned, and adjusted to the left. Everything will be inside the sidenav.

Of course, these were not the specific questions I asked, but something like this.

I had to ask multiple times the same questions, but rephrase some things to be able to get good results from it, and this is just for a unique page. Some of the code I got was broken too, but this could be something I forgot to mention.

With some adjustments from my side and using a lot of the Javascript code ChatGPT created for me, I could create this simple example:

This is the simplest example I could create in 1 week, and most parts of the functions you saw were created using ChatGPT, but with some small manual changes from my side.

Conclusions:

• ChatGPT is a powerful tool to be able to increase your productivity
• It is good to have some base in order to be able to follow good practices and to be able to create useful code for others to use.
• ChatGPT will not replace you in your job, but it can be a powerful tool for you to improve yourself like google was when it started.

If you want to know more about this project, I’m starting to blog more about it on my own website. I’ll create more content there when I have something bigger, so you can check here. When the website is ready, it will be available for testing purposes initially to my clients, so, if you are curious about it, send me a message.