JavaScript • PHP • OpenLayers • PostGIS • GeoServer • Apache
Interactive web mapping application developed in a 3/3 architecture (Client, Server, Database) to visualize and filter cinematic establishments in metropolitan France. University project carried out at Paul-Valéry University of Montpellier, M2 Geomatics 2024/2025.
The project is based on a classic three-tier architecture in webmapping: a spatial database, a map server, and a web client. Each layer communicates with the next to ensure dynamic and interactive rendering.
Fig. 1 — 3/3 Architecture: Database → Map Server → Web Client
PostgreSQL + PostGIS to store spatial data of cinemas and administrative boundaries.
GeoServer generates WMS and WFS feeds from PostGIS. Apache + PHP ensure the connection.
HTML/CSS/JS page with OpenLayers for cartographic rendering.
The interface is divided into three blocks: search forms on the left, interactive OpenLayers map in the center, and the information panel on the right.
Fig. 2 — Interactive OpenLayers map with cinema points (local GeoJSON layer). Click on a point to see details.
Fig. 3 — Final interface on localhost
The forms allow filtering cinemas according to several criteria simultaneously.
Selection of a region with automatic zoom.
Filter by department.
Filter art & essay or commercial cinemas.
Autocomplete for commune names.
OSM, IGN Plan, IGN Satellite + administrative boundaries.
Dynamic scale bar updated on zoom.
Return to France zoom with one click.
Click on a cinema to display all its information.
Cinematic Establishments 2023 (CNC)
📊 Cinema data — data.culture.gouv.fr
🗺️ Administrative boundaries — IGN ADMIN-EXPRESS
🛰️ Map backgrounds — OSM, IGN
Group nearby cinemas into numbered bubbles.
Display nearby cinemas based on client position.
Hosted on Codeberg • 100% Open Source
← Back to portfolio