Studio Matrx Monthly · Volume 1 · Issue 3 · August 2026
Amogh N P
 In loving memory of Amogh N P — Architect · Designer · Visionary 
Web Maps, Dashboards and Story MapsLesson 10.3
GIS for Architecture, Planning & Urban Design/Module 10 · Cartography, Visualization & Communication

Lesson 10.3 · Cartography, Visualization & Communication

Web Maps, Dashboards and Story Maps

Taking your analysis off your laptop and into the browser

13 min Interactive lessonFree · open lessonByAmogh N P· Architect & interior designer
The hook

You email a 40 MB PDF of maps. The client opens it once, cannot zoom to their street, and never opens it again.

Everything you learned about design still matters - but a printed map answers only the questions you anticipated. The moment a reader wants to zoom to their own plot, filter to their own ward, or click a shape to read its facts, paper fails. A web map turns your finished analysis from a statement into a conversation the reader can hold themselves. This lesson is how to publish it, on free tools and on ArcGIS.

Most of your readers will open the map on a phone, on mobile data. Design for that, or design for no one.

Why the web changed cartography

For most of history a map was a fixed object: one scale, one extent, one set of choices, printed. The web broke that. An interactive web map lets the reader pan, zoom across scales, toggle layers, click a feature to read its attributes, and filter to what they care about. The cartographer no longer decides the single view; they design a space of views and let the reader navigate it.

Under the hood, a web map is a stack much like your desktop project. At the bottom sits a basemap delivered as small pre-rendered image or vector tiles that load only for the area on screen - which is what makes a global map feel instant. On top sit your data layers, delivered as GeoJSON for small datasets or as vector tiles for large ones. A popup appears when the reader clicks a feature, showing its attribute row. Understand that stack and every web-mapping tool stops being mysterious.

interactive web map (Leaflet / MapLibre) basemap tiles GeoJSON / vector-tile overlay Ward 12 pop 18,400 + - layers wards roads (c) OpenStreetMap contributors - ODbL
Zoom
A web map is a stack: tiled basemap, a vector overlay, clickable popups and attribution.

Tiles are the trick: the map only ever loads the little squares you are looking at.

The open web-map stack

You do not need a paid platform to publish a professional web map. Leaflet is a small, friendly JavaScript library for 2D maps - a few lines produce a pan-and-zoom map with markers and popups, and it is the fastest way to get a GeoJSON layer online. MapLibre GL JS is the open-source engine for smooth, WebGL vector-tile maps - the free, community-governed fork of Mapbox GL JS. OpenLayers is the heavyweight, strong on OGC services (WMS, WFS, WMTS). For very large data and analytical layers, deck.gl renders millions of features on the GPU, and kepler.gl wraps it in a no-code app you can drop a file into.

Mapbox GL JS itself is a paid service model - it needs a Mapbox account and token and its licence is proprietary from v2, so where you want fully open and self-hostable, MapLibre is the like-for-like replacement. On the data side, prefer open, standard delivery: OGC API - Tiles and the older WMTS for tiled maps, OGC API - Features (the modern successor to WFS) for queryable vector data, and GeoJSON for simple hand-offs.

Dashboards: many views of one dataset

Sometimes the reader does not need a story - they need to monitor. A dashboard puts several linked views of one dataset on a single screen: a map, a few charts, some headline numbers (KPIs), and filters that drive them all at once. Pick a ward from a dropdown and the map zooms, the bar chart re-sorts and the totals update together. It is the right tool when the data changes over time or the reader has questions you cannot predict.

On the Esri path, ArcGIS Dashboards builds this from a hosted web map with no code - you add map, list, chart and indicator elements and wire them to filters. On the open path there is no single equivalent, but you get there by combining pieces: a MapLibre or Leaflet map beside charts in a web page, or - fastest of all - kepler.gl, where you load a GeoJSON or CSV and get filters, a map and simple charts without writing anything. The design lesson from earlier still rules: even a live dashboard needs hierarchy, a sane colour scheme and honest classification.

One dataset, many linked views filter: zone [ all ] year [ 2026 ] theme [ density ] map total population 4.2 lakh wards over target 7 / 24 density by ward filter once - map, KPIs and chart all respond together
Zoom
A dashboard links a map, KPIs and a chart to shared filters - many views of one dataset.

Story maps: cartography as narrative

A dashboard is for exploring; a story map is for telling. It pairs a scrolling narrative with maps, images and text, so that as the reader moves down the page the map changes to match the words - the city in 1990, the sprawl by 2010, the plan ahead. It is the format for a proposal, a public consultation, a before-and-after case for a design intervention.

ArcGIS StoryMaps is the best-known authoring tool - a template-driven builder that links narrative blocks to map states, again with no code. On the open side you build the same effect with a scrolling web page that swaps a MapLibre or Leaflet map's layers and extent as the reader passes each section (the technique often called scrollytelling). Reach for a story map when the sequence of maps carries the argument; reach for a dashboard when the reader should pick their own path. Both beat a stack of static slides for anything you want people to actually explore.

A story map: the map moves as you read 1 The city in 1990 a compact core by the river map state A 2 Sprawl by 2010 edges spread along the highway map state B 3 The plan ahead transit corridors and green wedges map state C narrative drives the camera - one idea per step
Zoom
A story map moves the map as the reader scrolls the narrative - one idea per step.

Dashboard: the reader asks the questions. Story map: you do. Choose by who should be in control.

Publishing responsibly

Going live adds duties a PDF never had. Performance: simplify geometry, serve large layers as vector tiles rather than one giant GeoJSON, and your map stays fast on a phone on mobile data - which is how most of India will open it. Attribution and licence: an OpenStreetMap basemap must carry the ODbL attribution, and if you publish anything derived from Survey of India Open Series Maps you are bound by their non-commercial terms - honour them or do not publish. Accessibility: colour-vision-safe palettes, readable text, and a fallback for readers who cannot use a mouse.

And note where your data lives. On ArcGIS Online your layers sit on Esri's cloud under your organisation's account; with the open stack you host the files yourself, which is more work but keeps you in full control and inside India's data-handling expectations under the National Geospatial Policy 2022. Neither is wrong - but decide it deliberately, because publishing a map is publishing the data behind it.

Delivery standards and licences for web maps

OGC API - Tiles / WMTS

Global: standard delivery of pre-rendered map and vector tiles

Serving your basemap and large layers as standard tiles keeps a web map fast and interoperable across Leaflet, MapLibre and OpenLayers.

OGC API - Features

Global: RESTful/JSON API for queryable vector features (successor to WFS)

The modern way to publish clickable, filterable vector data so a dashboard or web map can query it live.

OpenStreetMap (ODbL 1.0)

Global: crowdsourced basemap under the Open Database License

Free to use as a basemap, but you must carry the attribution and honour share-alike on derived data.

National Geospatial Policy 2022

India: framework for open, standards-based geospatial data and services

Points published Indian planning data toward open, interoperable web delivery - and shapes where you may host it.

Hands-on workshop

Workshop - publish a web map, then a dashboard

Take one analysed layer live as an interactive web map, then present it as a linked dashboard - on both the open and the ArcGIS paths.

QGIS (free) with a text editor and Leaflet/MapLibre; kepler.gl; or an ArcGIS Online account with Dashboards and StoryMaps.

Given & goal
Given: one polygon layer with a numeric field (e.g. ward density)
Data: your choropleth layer from lesson 10.2
Goal: an interactive web map plus a filterable dashboard
  1. 1Export the layer for the web. In QGIS: right-click the layer, Export then Save Features As GeoJSON in EPSG:4326. In ArcGIS Pro: share the layer as a hosted feature layer to ArcGIS Online instead.
  2. 2Build the open web map. Drop the GeoJSON into a minimal Leaflet or MapLibre GL JS page with an OpenStreetMap basemap, style it by your value field, and add a popup showing each feature's attributes. Keep the ODbL attribution visible.
  3. 3Build the ArcGIS web map. In ArcGIS Online open Map Viewer, add the hosted layer, set graduated symbology and configure pop-ups - the same map, on the paid path.
  4. 4Make a dashboard. Open path: load the same GeoJSON into kepler.gl and add a filter plus a chart. ArcGIS path: open ArcGIS Dashboards, add a map, an indicator (KPI) and a chart from the hosted layer, wired to a category selector.
  5. 5Add a story if the sequence matters: sketch three narrative steps (context, problem, proposal) as ArcGIS StoryMaps sections, or as three scroll steps that swap the layers in your MapLibre page. Share the links.

You’ll walk away with
A shareable interactive web map and a filterable dashboard of the same data, built once on the open stack and once on ArcGIS, with basemap attribution intact.

The worked example

Three altitudes on the same idea

Read the band that fits you — or all three.

For the architectSite, form & environment

A web map is your best client-facing site tool. Instead of a static context sheet, hand over a link where the client can zoom to the plot, toggle your slope, flood and transit layers, and click any feature to read its facts. A Leaflet page built from your exported GeoJSON does this for free and makes your analysis feel like something the client owns, not a report they file.

For the plannerLand use, zoning & infrastructure

Dashboards are how modern plans stay alive after approval. A ward-level monitoring dashboard - population, service deficits, project status, filterable by zone - turns a static master plan into something officials actually check. It also fits the direction of AMRUT and DataSmart Cities: publish standards-based, queryable layers rather than locking findings inside a PDF nobody updates.

For the urban designerStreets, blocks & public realm

Story maps are made for consultation and for arguing a public-realm idea. Walk a community or a committee through before-and-after states of a street, block or waterfront, with the map moving as the narrative unfolds, and you turn an abstract proposal into a sequence anyone can follow. Keep each step to one idea, exactly as you would frame a single design move.

Misconception check

Publishing an interactive map means buying Mapbox or an ArcGIS subscription.

You can publish a fully professional web map with entirely free, open tools - Leaflet or MapLibre for the map, GeoJSON or open vector tiles for the data, an OpenStreetMap basemap with attribution. Mapbox GL JS is a paid, token-based service and ArcGIS Online is a subscription; both are convenient, neither is required. The open stack keeps you in control of your data and your costs.
Try it

Do it yourself

No software - just read the live maps around you.

  1. 1Open any interactive web map and find its attribution line - which basemap and licence is it using?
  2. 2Decide, for a project you know, whether the reader needs a dashboard (explore) or a story map (be told).
  3. 3Zoom a web map in and out and notice the tiles loading - that is the tiling trick that keeps it fast.
  4. 4List three filters a planning dashboard for your city should offer.
  5. 5Sketch a three-step story-map sequence for a design proposal: context, problem, intervention.
Take this with you

The one line to carry out

Match the interactive format to who should be in control: a web map to let readers roam, a dashboard to let them explore, a story map to lead them - and you can build all three on free, open tools. The web turns a finished map into a conversation.
Take it further
References & further reading

Peer-reviewed journals & authoritative standards

  1. 01de Smith, M.J., Goodchild, M.F. & Longley, P.A. — Geospatial Analysis: A Comprehensive Guide, 7th ed.Winchelsea Press, 2025.
  2. 02Longley, P.A., Goodchild, M.F., Maguire, D.J. & Rhind, D.W. — Geographic Information Science and Systems, 4th ed.Wiley, 2015.
  3. 03ISPRS International Journal of Geo-InformationMDPI, ongoing.
  4. 04Transactions in GISWiley, ongoing.
Related lessons
Recap
Web maps stack tiles, data layers and popups; publish on free tools (Leaflet, MapLibre, kepler.gl) or ArcGIS; dashboards link many views, story maps carry narrative - and every published map carries data duties of licence, performance and access.
Carry forward →

Two dimensions are not always enough - to argue about massing, skyline and shadow you need to leave the flat map, which brings us to 3D visualisation and presenting GIS to a room.

A

The author

Amogh N P

Architect, interior designer, and creative polymath. Studio Matrx began in his notebooks — his vision of design made honest, useful, and open to everyone. Its Academy is written and taught in his memory, and free, forever.

More about Amogh →