Chapter 11: Web Mapping and Geospatial Application Development

Web mapping turns spatial data into interactive software. It combines frontend engineering, cartographic design, tile systems, APIs, spatial search, routing, realtime updates, and performance work.

Companion visual reference: Spatial Data Structure Visual Atlas

Learning Goals

• Explain how web maps are rendered and served.
• Compare raster tiles, vector tiles, feature APIs, and client-side rendering.
• Design map applications that remain fast, accessible, and understandable.
• Build workflows for search, routing, realtime tracking, and offline maps.

Theory

A web map is not one thing. It is a composition of basemaps, overlays, tiles, styles, interactions, queries, and state. The client handles rendering and interaction. Servers provide tiles, features, search results, routes, and metadata. Caches keep the experience fast.

Modern web maps often use vector tiles because they move compact geometry and attributes to the browser, where styling can happen dynamically. Raster tiles remain useful for imagery, terrain, static maps, and simple publication.

Math

Web mapping uses tile pyramid math, coordinate transformations, clipping, simplification, hit testing, viewport filtering, label placement, interpolation, and graph search. Web Mercator is common for display because it works well for tile pyramids, but it is not appropriate for serious area measurement.

Equation companion: Math and Algorithms Reference

Tools of the Trade

• Client libraries: MapLibre GL JS, Mapbox GL JS, Leaflet, OpenLayers, deck.gl, CesiumJS.
• Tile tools: Tippecanoe, Martin, Tegola, TileServer GL, GeoServer, MapServer.
• Search and routing: Pelias, Nominatim, OSRM, Valhalla, GraphHopper, pgRouting.
• Data and APIs: PostGIS, OGC API, GeoJSON, vector tiles, PMTiles.
• Testing: Playwright, browser performance tools, accessibility checks.

Examples of Real-World Solutions

• A public data portal serves parcel and zoning layers through vector tiles.
• A delivery app renders drivers in realtime while querying route ETAs.
• A conservation app combines satellite imagery, field observations, and protected-area boundaries.
• A utility dashboard lets operators inspect assets, outages, work orders, and service territories.

Working Practice Examples

1. Build a map with a basemap, one vector overlay, and a click popup.
2. Generate vector tiles from a public dataset and serve them locally.
3. Add a bounding-box API endpoint that returns only visible features.
4. Build a realtime map that updates moving points from a simulated stream.
5. Test the map on mobile, keyboard navigation, and slow network conditions.

Common Failure Modes

• Sending too many raw features to the browser.
• Overusing popups as the main interface.
• Making maps inaccessible to keyboard or screen-reader users.
• Using Web Mercator measurements for analytical results.
• Not simplifying geometry for display.

Works Cited

"Leaflet Documentation." Leaflet, https://leafletjs.com/reference.html. Accessed 9 May 2026.

"MapLibre GL JS Documentation." MapLibre, https://maplibre.org/maplibre-gl-js/docs/. Accessed 9 May 2026.

"OpenLayers Documentation." OpenLayers, https://openlayers.org/. Accessed 9 May 2026.

Peterson, Michael P. Interactive and Animated Cartography. Prentice Hall, 1995.

"Vector Tiles." Mapbox, https://docs.mapbox.com/data/tilesets/guides/vector-tiles-introduction/. Accessed 9 May 2026.

---