The power of PostgreSQL with Leaflet and Nodejs/Express (Part 3)
In this last part, we will see how Nodejs/Express, Leaflet js and PostgreSQL all combined can create complete and powerful geographic applications that can be used in different fields ranging from environmental to cadastral domains.
Nodejs/Express
I think that most of the developers out there know what Nodejs is, so I will just say that with Nodejs, we can use one language (JavaScript) on the front-end and on the back-end. After installing Nodejs and express, we can add this dependencies in the package.json folder:
As you can see, we have just five dependencies. Let’s start with ‘dotenv’. It allows the user to store the credentials of the connexion to Postgres in environment variables. This way of doing things makes the app more secure as you don’t want anybody to see the password of your database. Also, we have the ‘pg’ package wich allows Nodejs to connect to PostgreSQL. Another package is the ‘express-handlebars’ package wich help us with managing template in Nodejs. With handelbars, instead of having .html extension we have .hbs extension. You can explore these packages in more detail here:
Setup the app.js page
First we have to setup the app.js page to return the only page that we have wich is the Leaflet map:
I think you noticed that we used the middleware function express.json(). This function allows the data to be parsed so when the user write something in the form and post it, the data is sent to the server and we can store it in a variable.
The next thing is that we want to get the data from the database into the leaflet map. To be able to do it we add a ‘SELECT’ query that will convert the data into GeoJSON:
Then, we can add a get request like this:
As you can see, we don’t return an HTML (hbs page in this case) page when we get the data but instead, we return a json data. Ok Tarek wait, how can this method help us add the data into the map when we got a different URL?
As we want only one page, we can’t redirect the user to another one right?
Yes, exactly, so we want something that doesn’t evolve refreshing the whole page when posting or getting data from the database.
The answer is to use the Fetch API in the hbs template and call the URL to get the data and add it into the map. We can also add a second fetch call to post the data into the Postgres database. You can learn more about fetch call in the MDN docs:
When you get the data with the fetch call, don’t forget to parse it before adding it to the map.
Next Step
With what you have learned so far and if you have some basic understanding of JavaScript and Nodejs you should be able to add the post request to add data into the database and make the fetch call to make it all work.
Bonus before you go
If you want to see what the application looks like in it’s final form I deployed it here:
Try it and add some point or polygon or create a geo app on your own and make it more attractive by adding some functionality like a search bar or a login system. Of course, If you have any question about the app, I will gladly respond to it. Finally, I hope this series of tutorials helped you learn one or two things at least 😃.
