The power of PostgreSQL with Leaflet and Nodejs/Express (Part 1)
This article will show the guidelines that makes it possible to create a web app with PostgreSQL database and her spatial extension PostGIS all that combined with Nodejs/Express for the back-end and Leaflet js on the front-end. I know it’s a lot of technologies altogether but I will try to make it simpler for you. This is the part one that will focus on the front-end.
Leaflet
Leaflet js is a mapping library that is used in JavaScript to manipulate maps on the web. The reason of the popularity of this library lay on the simplicity and clarity of her Docs and Tutorials. Moreover, what makes Leaflet so great is that it’s completely open-source and the plugin on this library just keep coming!!!
Before moving on the server-side, it’s better to have something on the front-end to visualise and understand the application that we create right? If you don’t have any experience with web development, it’s ok just try to understand the idea of the app.
Building the front-end
After following the tutorials on leaflet you will be able to make the front-end very quickly.
Ok so what we need is a map, a tool for drawing (points, line or polygon) and three button. The first button is for adding the geometry drawn. When this button is clicked a form appear so the user can add information and submit it into the server. Don’t worry we will talk about this in the third part of this series. The second one is for deleting the geometry drawn. Finally, the third button is for refreshing the map after the user submitted a point.
The map and the button can be incorporated to the web page very quickly, but what about the drawing tools, do we have to code it ourselves? Of course not, we’re talking about Leaflet here come on!!
In the initialisation of the map, we just have to add the map option called ‘drawControl’ and set it to true like this:
Don’t forget to add the CSS and the JS link of the drawing toolbar. Don’t worry I have the links here:
Then, we want to initiate a variable to store the drawn items:
Now, if we want to capture the data that is drawn, we have this event on Leaflet called ‘draw:created’ that can help us. We can add it in the variable named ‘drawnItems’ like these:
Now if you draw something on the map and you console.log the variable named ‘drawnItems’ on a click event you will notice that you get an object. To be able to use it in the GeoJSON format, use the .toGeoJSON() method of Leaflet. Here is the final result for the front-end. I added a form, so the user could submit the geometry with related information. Here is the final result:
As you notice, when adding a geometry feature and clicking on ‘Adding Geometry button’, this form appear and let the user add related information. Also, I created three functions to deal with the geometry coordinates input and write it automatically whether it’s a point, line or polygon. I did so to be able to add the data into PostgreSQL. We will see this in details in the second part.
Finally, you could also add the ‘Delete Features’ button to delete the geometry drawn on the map before it’s added to the database (hint: check the ‘.clearLayers()’ method on leaflet).
A little bonus before you go 😉
This is how you add a scale bar in meter on Leaflet:
That’s it for the first part and I will see you in the second one:
