Working with PostGIS data from within Leaflet.js (or any other client side mapping API)

This 3-part mini-course is my attempt to explain the basic concepts of working with PostGIS data from within the Leaflet.js mapping API.  Technically this is not Leaflet programming. In this scenario Leaflet.js simply becomes the canvas on which your geospatial data is displayed on a web map.  All of the interaction with the geospatial data occur through very common and standard methods of working with enterprise level databases, but with a geospatial twist.

The basic procedure is that you respond to user interaction on your web page through standard JavaScript methods, such as an event handler to respond to clicking on a specific button. Then an AJAX request is made to the server which runs a PHP script that submits a SQL statement to the database and returns the results to the user in the AJAX response and that response is then handled in your client application. It might be geospatial data to be displayed in a map. It might be non-spatial data returned as an HTML table. It might simply be a message to the user or a variable that directs the flow of the program.

Because we are simply submitting SQL statements to a PostGIS database we can do anything from the web that we can do with PostGIS. We can use SELECT statements to retrieve data. We can use INSERT, UPDATE, and DELETE statements to create new data, modify existing data, or delete data. Most importantly we can use the entire suite of PostGIS functions for working spatial data (over 1000 of them) to perform spatial analysis on the data such as buffering, intersections, testing spatial relationships, etc.

The first video in this series explains the relationship between geospatial data stored in PostGIS as tables with rows and columns and geospatial data stored as GeoJSON with feature collections, features, and properties. The second video explains how PHP is used to convert database data to GeoJSON so that it can be displayed in Leaflet. The third video explains the process for submitting an AJAX request from the client to the database and handling the response.

These three lectures are part of an 80 lecture course that will be available on in early July 2018. They cover the core concepts that are needed for interacting with PostGIS data from within Leaflet. I am making these lectures available for free so that self-starters with a solid grounding in basic web technologies can apply it immediately. If you are newer to these technologies there will be much more explanation available in the full course. That course does have two prerequisites. Display and Analyze GIS data on the web with Leaflet and PHP registration, login, and content management system. Both of those prerequisites (and all of my other courses) are available now through the end of July for only $15 with the coupon code JULYSALE, so you can get started with the prerequisites now if needed.

Please subscribe to my YouTube channel or join my LinkedIn group on Open Source Web GIS to keep up with the latest news.

2 Replies to “Working with PostGIS data from within Leaflet.js (or any other client side mapping API)”

  1. Hola buenas tardes desde Colombia.
    He estado siguiendo el tutorial y me a parece un error dice que el error esta en el json_decode y según lo que estuve leyendo es un error por que json_decode no recibe la geom si no ( string $json [, bool $assoc = false [, int $depth = 512 [, int $options = 0 ]]] ) : mixed estos caracteres.

Leave a Reply

Your email address will not be published. Required fields are marked *