Chapter 13

Introduction to Web Mapping

Web maps bring GIS to the browser — interactive, zoomable maps accessible to billions without any software installation.

LeafletMapbox GL JSOpenLayersKepler.glDeck.gl

42KBLeaflet Size↗ Lightweight

2B+/dayOSM Tile Views↗ Most used basemap

Theory & Foundations

Modern web maps use tile-based rendering (raster or vector tiles), JavaScript APIs, and spatial web services to deliver geographic information.

Slippy maps (Google Maps, OpenStreetMap) divide the world into tiles at each zoom level. Zoom 0 = 1 tile covering Earth. Each zoom doubles tiles in each dimension.

Leaflet is the most popular open-source JavaScript library for mobile-friendly interactive maps. Lightweight (42KB), easy to learn, extensive plugin ecosystem.

Mapbox GL JS renders vector tiles on the GPU for smooth zooming, 3D terrain, and custom styles. More powerful but steeper learning curve than Leaflet.

GeoJSON is the standard format for web map data: simple JSON structure with geometry and properties. Supported by all web mapping libraries.

In-Depth Coverage

Leaflet vs Mapbox GL JS

Two dominant web mapping approaches.

Leaflet: 42KB, raster tiles, easy, huge plugin ecosystem
Mapbox GL JS: Vector tiles, GPU rendering, 3D, custom styles
Leaflet for: Quick maps, simple projects, beginners
Mapbox for: Custom design, large data, 3D, production

Tile Systems

Maps are served as pre-rendered or vector tiles for performance.

Raster tiles: Pre-rendered PNG images at each zoom
Vector tiles: Geometry data rendered client-side
XYZ: Standard tile URL format /{z}/{x}/{y}.png
MBTiles: SQLite container for offline tiles

Key Techniques

Tile systemsGeoJSON handlingPopup creationEvent handlingResponsive design

Data Visualization

Web Mapping Library Usage (%)

Leaflet: 45%
Mapbox GL: 30%
Google Maps: 15%
OpenLayers: 10%

Web Map Architecture

🖥️ServerTile server, GeoJSON API
🔄TransferHTTP/HTTPS tile requests
🌐ClientLeaflet/Mapbox renders map
👆InteractClick, zoom, filter, search

Practical Workflow

Set up web project (HTML/CSS/JS or React)
Add Leaflet or Mapbox GL JS
Load basemap tiles
Add GeoJSON data layer
Style features with symbology
Add popups and interactions
Implement zoom/pan controls
Deploy to web hosting

Software & Tools

LeafletFreeJS Library — Interactive web maps

Video Tutorials

▶ Leaflet JS TutorialTraversy Media · YouTube · 45 min

Real-World Application

COVID-19 dashboards (Johns Hopkins, WHO) used web mapping to visualize pandemic spread globally, reaching billions of daily viewers with real-time geographic data.

Real-World Projects

COVID-19 Dashboard📍 Global

Johns Hopkins real-time pandemic tracking map.

Impact: Reached billions of daily viewers worldwide.

Case Study

Uber's engineering team built Kepler.gl, an open-source large-scale web-based geospatial visualization tool that handles millions of points.

Problem-Based Learning

P1 Build interactive map showing all hospitals in a district

Health department needs public-facing web map for community.

Solution: Load hospital GeoJSON data. Create Leaflet map with OSM basemap. Add clustered markers. Implement search and filtering by type.

LeafletLeaflet.markerclusterGeoJSONHTML/CSS/JS

✅ Interactive map served 50K monthly visitors. Reduced hospital location inquiries by 60%.

Knowledge Check

1. Which library is lightest for web maps?