Skip to content

Web GIS

Goal: Understand the architecture of web GIS and how desktop maps become interactive web apps.

What you'll learn

  • The client-server model of web GIS
  • Common formats: tile services, feature services, GeoJSON
  • The major platforms: ArcGIS Online, Mapbox, Leaflet
  • When to use a web map vs a static map

Why web GIS?

Static PDFs are dead-ends. Web maps let you:

  • Interact — pan, zoom, click for details
  • Update — change one source, every map updates
  • Share — anyone with a URL can view
  • Combine — overlay multiple sources from different organizations

The architecture

flowchart LR
    DB[(Spatial<br/>Database)] --> S[Server]
    S -->|tiles, features| API[REST API]
    API -->|JSON| C[Client<br/>browser]
    C -->|user interactions| API

    classDef db fill:#312e81,stroke:#1e1b4b,color:#fff
    class DB db
    classDef srv fill:#4338ca,stroke:#312e81,color:#fff
    class S,API srv
    classDef cli fill:#f97316,stroke:#ea580c,color:#fff
    class C cli

A web GIS has three layers:

  1. Database — stores the data (PostGIS, file geodatabase, ArcGIS Server)
  2. Server — exposes data via APIs as services
  3. Client — JavaScript app that renders the map

Common service types

Service What it serves
Tile service / WMTS Pre-rendered raster tiles. Fast, but static styling.
Vector tile service Vector tiles. Stylable in the client.
Feature service / WFS Editable vector features. Returns GeoJSON or Esri JSON.
Image service Raster data with on-the-fly processing (NDVI, hillshade).
Map service Bundle of layers, can be tiled or dynamic.

Major platforms

  • ArcGIS Online

    Esri's hosted web GIS. Easy to publish, secure, integrated with ArcGIS Pro. Industry standard.

  • ArcGIS Enterprise

    Self-hosted Esri stack. Used by large orgs with on-prem requirements.

  • Mapbox

    Vector tiles, custom styles, developer-friendly. Strong choice for product builders.

  • Leaflet

    Free, open source JavaScript library. Lightweight, perfect for simple web maps.

  • OpenLayers

    Powerful open-source JS library. More features than Leaflet, steeper learning curve.

  • PostGIS + GeoServer

    Open-source backend stack. Pair with Leaflet/OpenLayers for a fully open web GIS.

Web map formats

Format Why
GeoJSON Plain text, browser-native, perfect for small datasets
MVT (Mapbox Vector Tile) Compact binary vector tiles, great for big data
Cloud Optimized GeoTIFF (COG) Streamable rasters — read just the part you need
STAC Catalog format for satellite imagery

Designing for the web

Web maps demand different design choices:

Design rules for web

  • Responsive — works on phone, tablet, desktop
  • Lightweight — keep payload <5 MB. Simplify polygons. Use vector tiles.
  • Minimal labels at low zoom; more detail at high zoom.
  • Clickable popups > on-map labels.
  • Performance budget — initial render under 2 seconds.

Web map vs static map

Use a web map when… Use a static map when…
Audience needs to interact One-shot deliverable (PDF, slide)
Data updates frequently Snapshot in time
Many layers, user picks Single, clear story
Need filtering / search Print-quality required

ArcGIS Online quick path

  1. In ArcGIS Pro, Share → Web Layer → publish features to ArcGIS Online.
  2. In AGOL, open Map Viewer and add your published layer.
  3. Save the map → Create App → Instant Apps for a styled web app.
  4. Share publicly or with your org.

→ ArcGIS Online and Sharing to ArcGIS Online.

A minimal Leaflet example

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <style>#map { height: 100vh; }</style>
</head>
<body>
  <div id="map"></div>
  <script>
    const map = L.map('map').setView([33.749, -84.388], 11);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    fetch('atlanta_neighborhoods.geojson')
      .then(r => r.json())
      .then(data => L.geoJSON(data).addTo(map));
  </script>
</body>
</html>

That's a fully functional web map in 20 lines.

Practice

Try this

  1. Take any vector layer from your ArcGIS Pro project.
  2. Export it to GeoJSON (Conversion Tools → Features To JSON, with the GeoJSON option).
  3. Drop it into the Leaflet template above.
  4. Open the HTML file in your browser.

You just made a web map.

Next up

→ ArcGIS Online — Esri's web GIS platform.