Web Mapping Architecture: Data to Map Tile

A web mapping application involves far more than dropping pins on a map. Behind every interactive web map is a layered architecture that moves spatial data from a data store, through a spatial server, into a tile service, and finally into a client library that renders it in the browser. Understanding this web mapping architecture — and how each layer connects — is essential for building performant, scalable GIS applications. This guide walks through the complete stack, from PostGIS at the data layer to Leaflet and OpenLayers at the client layer, with practical notes on tile protocols, caching, and performance.

The Web Mapping Stack

A typical web mapping architecture consists of five layers, each with a distinct responsibility:

1. Data Store — A spatial database (PostGIS, SpatiaLite) or file-based storage (GeoPackage, Shapefiles, GeoJSON) that holds the raw geographic data.
2. Spatial Server — Middleware (GeoServer, MapServer) that reads from the data store, applies styling, and exposes data through OGC-standard web services.
3. Tile Server / Cache — A layer that pre-renders or caches map tiles (raster or vector) for fast delivery to clients. Examples include GeoWebCache, TileStache, and Martin.
4. Client Library — A JavaScript library (Leaflet, OpenLayers, Mapbox GL JS) running in the browser that requests tiles, renders them on a canvas, and handles user interaction.
5. Browser / UI — The end-user interface where the map is displayed alongside application controls, search bars, legends, and data panels.

Not every application uses all five layers. A simple project might load a static GeoJSON file directly into Leaflet, skipping the spatial server and tile cache entirely. Complex enterprise systems may add load balancers, CDN caching, and microservice APIs on top of this base architecture.

Data Storage: PostGIS

PostGIS is the most widely used open-source spatial database. It extends PostgreSQL with geometry and geography types, spatial indexes (GiST), and hundreds of spatial functions for querying, transforming, and analyzing geographic data. PostGIS serves as the foundation of most serious web mapping stacks because it provides:

• SQL-based spatial queries — ST_Contains, ST_Intersects, ST_Distance, ST_Buffer, and more.
• Support for multiple coordinate reference systems with ST_Transform.
• GeoJSON output via ST_AsGeoJSON, enabling direct integration with web clients.
• Raster support through the PostGIS Raster extension.

For a hands-on introduction to spatial SQL, see the PostGIS spatial queries tutorial.

Spatial Server: GeoServer

GeoServer is an open-source Java application that connects to data stores (PostGIS, Shapefiles, GeoTIFF) and publishes them as OGC web services — WMS, WFS, WMTS, and WCS. It handles styling with SLD (Styled Layer Descriptor), applies coordinate transformations, enforces security rules, and generates map images or feature data on the fly.

GeoServer acts as the bridge between your database and your front-end client. Instead of writing custom API endpoints for each spatial query, you configure GeoServer layers and let clients request data using standard protocols. For setup details, see the GeoServer WFS setup guide.

Alternative spatial servers include MapServer (C-based, lighter footprint), deegree (OGC-compliant Java server), and pg_tileserv / Martin for serving vector tiles directly from PostGIS.

Tile Protocols

Tile protocols define how clients request map imagery or vector data from a server. Understanding the differences is critical for choosing the right approach for your application. For a deeper comparison of WMS and WFS, see the WFS vs WMS guide.

WMS (Web Map Service)

WMS is an OGC standard that returns server-rendered map images (PNG, JPEG) for a given bounding box, size, and layer list. The server does all the rendering; the client simply displays the image. WMS is simple to implement but does not support client-side styling or feature interaction without additional WFS queries.

WMTS (Web Map Tile Service)

WMTS serves pre-rendered map tiles organized in a fixed grid (tile matrix set). Because tiles are pre-generated and cached, WMTS is significantly faster than WMS for base map layers. Tile coordinates follow a z/x/y scheme (zoom level, column, row).

XYZ Tiles

XYZ is a de facto standard popularized by OpenStreetMap. Tiles are accessed via a simple URL pattern: https://tile.example.com/{z}/{x}/{y}.png. While not an OGC standard, virtually every mapping library supports XYZ tile URLs. Most commercial tile providers (Mapbox, Thunderforest, Stamen) use this scheme.

Vector Tiles

Vector tiles transmit geometry and attribute data in a compact binary format (Mapbox Vector Tile / MVT) instead of pre-rendered images. The client renders the vector data on a canvas, enabling dynamic styling, smooth zooming, rotation, 3D extrusion, and feature-level interaction without additional server requests. Vector tiles are the foundation of Mapbox GL JS and MapLibre GL.

Protocol	Data Type	Caching	Client Styling	Interactivity
WMS	Raster image	Limited	No	Via GetFeatureInfo
WMTS	Raster tiles	Excellent	No	Via GetFeatureInfo
XYZ	Raster tiles	Excellent	No	No
Vector Tiles	Vector (MVT)	Excellent	Yes	Full feature access

Client Libraries: Leaflet and OpenLayers

The client library is responsible for requesting tiles, rendering them in the browser, and providing user interaction (pan, zoom, click, hover). Two dominant open-source options serve different needs:

• Leaflet — A lightweight (~40 KB gzipped) library focused on simplicity and mobile performance. It excels at basic web maps with raster tile layers, GeoJSON overlays, markers, and pop-ups. See the Leaflet GeoJSON tutorial for a hands-on guide.
• OpenLayers — A full-featured library that supports WMS, WFS, WMTS, vector tiles, projections, advanced styling, and complex layer management. It is heavier than Leaflet but covers enterprise use cases that Leaflet cannot address without plugins. See the OpenLayers getting started guide.

For vector tile rendering with 3D capabilities, Mapbox GL JS and its open-source fork MapLibre GL JS are the primary choices. They use WebGL for hardware-accelerated rendering and support dynamic styling, terrain, and 3D building extrusions.

Caching and Performance

Caching is the single most impactful optimization in a web mapping stack. Without caching, every map pan and zoom triggers a server-side render — an expensive operation for complex layers. Key caching strategies include:

• Tile caching — Tools like GeoWebCache (bundled with GeoServer) pre-render tiles at each zoom level and store them on disk. Subsequent requests serve files directly, bypassing the rendering engine entirely.
• CDN distribution — Placing tile caches behind a CDN (CloudFront, Cloudflare) serves tiles from edge locations close to the user, reducing latency to single-digit milliseconds for cached tiles.
• HTTP caching headers — Setting Cache-Control and ETag headers on tile responses allows browsers to cache tiles locally, eliminating redundant network requests during a session.
• Seeding — Pre-generating tiles for popular areas and zoom levels during off-peak hours ensures that the most-requested tiles are always warm in the cache.

On the client side, libraries like Leaflet and OpenLayers maintain an in-memory tile cache and recycle DOM elements as the user pans, minimizing browser memory usage and paint operations. For static datasets, you can skip the server entirely and host pre-generated tiles on cloud storage (S3, GCS) behind a CDN.

For quick ad-hoc visualization without setting up a full stack, GeoDataTools lets you drag and drop GeoJSON or KML files and view them on an interactive map instantly in your browser.

FAQ

Do I need a spatial server for a simple web map?

No. For small datasets (under a few megabytes), you can load GeoJSON files directly into Leaflet or OpenLayers without any server-side infrastructure. A spatial server becomes necessary when you need to query large datasets on the fly, serve multiple styled layers, or enforce access control on spatial data.

What is the difference between raster tiles and vector tiles?

Raster tiles are pre-rendered images (PNG or JPEG) that the client displays as-is. Vector tiles contain raw geometry and attribute data in a compact binary format; the client renders them using GPU-accelerated WebGL, enabling dynamic styling, rotation, 3D views, and feature interaction. Vector tiles provide a better user experience but require more capable client hardware.

How do I choose between Leaflet and OpenLayers?

Choose Leaflet for simple, lightweight maps with GeoJSON overlays, marker clusters, and basic tile layers — especially on mobile. Choose OpenLayers for projects that require WMS/WFS integration, advanced projections, complex vector styling, or enterprise-grade layer management. Both libraries are free and actively maintained.