Mental Model for WEBGIS (WEBGIS)

This architecture is the “nervous system” of a modern web map. Instead of loading one giant file, the system acts like a conversation between the browser and the database.

Here is the breakdown of that cycle, step by step:

---

1. Event-driven flow (moveend)

Map libraries (like Leaflet or Mapbox) are event-driven. They don’t do anything until an event triggers them.

• The Problem: If you sent a request every single millisecond the user moved their mouse, the server would crash.
• The Solution: The moveend event. It only fires once the user has finished panning or zooming. This ensures the map only asks for data when the “camera” has come to a stop.

2. BBOX extraction

Once the map stops, the frontend needs to know what it is looking at.

• Extraction: The library calls a function (like map.getBounds()) to get the coordinates of the four corners of the screen.
• The Result: A Bounding Box (BBOX), typically an array or string: [minLon, minLat, maxLon, maxLat].

3. API request structure

The frontend “packages” those coordinates into a standardized message to the backend.

• The Request: Usually a GET request with the BBOX in the query string.
• Example: GET /api/pipelines?bbox=5.89,51.72,6.12,51.85
• This tells the server: “Hey, I only need the data located within this specific rectangle.”

4. Backend processing

The backend (FastAPI, Node.js, etc.) acts as the translator.

• Validation: It receives the string, splits the numbers, and ensures they are valid coordinates.
• SQL Generation: It takes those four numbers and builds a spatial query to send to the database.

5. DB spatial filtering (The “Magic”)

This is the most efficient part of the system.

• Spatial Index: The database (PostGIS) uses a GIST index. Think of this as a “map of the map” that allows the DB to ignore 99% of the data instantly.
• The Function: It uses a function like ST_Intersects.
• The Logic: The DB compares the BBOX geometry to the geometry of your items (like pipelines). If a pipeline touches or is inside the box, it’s a match.
• Bbox is converted into a polygon geometry using ST_MakeEnvelope

6. GeoJSON response cycle

The database sends back the matching rows, but the frontend can’t read raw database rows.

• Serialization: The backend converts the database results into GeoJSON, a specific JSON format designed for maps.
• Delivery: The GeoJSON is sent back over the internet to the browser.
• Rendering: The map library receives the GeoJSON and “paints” the lines or points onto the screen.

---

Why this is “Foundational”

If you understand this, you understand why Google Maps is fast. It never tries to show you the “whole world” at once; it only shows you the BBOX you are currently looking at.

This saves:

1. Memory: The browser doesn’t crash.
2. Bandwidth: You don’t download data for Amsterdam when you are looking at Heijen.
3. Speed: The database only searches a tiny fraction of its records.

To understand the WebGIS cycle, you have to look at how the database “sees” the map. The backend doesn’t just receive coordinates and find data; it has to build a shape and then compare it to others.

This is where the distinction between a constructor and a predicate becomes vital.

---

🟢 The WebGIS Architectural Cycle (Deep Dive)

3. The Construction: ST_MakeEnvelope

The database receives four raw numbers, but it can’t compare “numbers” to “pipeline geometries.” It needs to turn those numbers into a Polygon that represents your screen.

ST_MakeEnvelope is a constructor. It takes the four coordinates and “draws” a rectangular geometry in the database’s memory.

• SQL: ST_MakeEnvelope(minX, minY, maxX, maxY, 28992)
• Analogy: This is like building a physical picture frame.

4. The Comparison: ST_Intersects

Now that you have your “frame” (the envelope), you need to find which pipelines are inside it.

ST_Intersects is a boolean function (predicate). It doesn’t create anything; it simply asks: “Does Geometry A (the pipeline) touch Geometry B (the envelope)?”

• SQL: WHERE ST_Intersects(pipeline_geom, envelope_geom)
• Result: True or False.
• Analogy: This is like laying your picture frame over a map and picking up every string that is visible inside or touching the edges of that frame.

5. The Delivery: GeoJSON

The database returns only the rows where the answer was True. The backend then converts these into a GeoJSON format and sends them to the map to be rendered.

---

⚔️ ST_MakeEnvelope vs. ST_Intersects

Feature	ST_MakeEnvelope	ST_Intersects
Type	Constructor (Builds a shape)	Predicate (Asks a question)
Input	4 Floats (minX, minY, maxX, maxY)	2 Geometries
Output	A Geometry (Polygon)	Boolean (True/False)
Purpose	To define the “Viewfinder” area.	To find data that overlaps the view.

The “Golden Query” Example

In a real system, you combine them like this:

SELECT id, ST_AsGeoJSON(geom) 
FROM network_pipelines
WHERE ST_Intersects(
    geom, 
    ST_MakeEnvelope(5.8, 51.7, 6.0, 51.9, 28992)
);

1. ST_MakeEnvelope creates the box.
2. ST_Intersects checks the pipelines against that box.
3. ST_AsGeoJSON formats the winners for the frontend.

---