1.5 Lab — Exploring a Web Map

Key takeaways

• Every modern web map is a GIS client; you already use one daily.
• You can learn an enormous amount by opening the developer tools and inspecting network traffic.
• Simple measurement and screenshot workflows give you a concrete first win.

Introduction

Theory lessons alone don't build GIS intuition. This is your first hands-on lab — 30 minutes of concrete work with a live web map. By the end you'll have identified coordinate systems, inspected tiles, measured a distance, and exported a map image. Everything in this lab is free and requires no installed software.

Prerequisites

• A modern browser (Chrome, Firefox, Edge, or Safari).
• Ability to open browser developer tools (right-click → Inspect, or F12).
• About 30 minutes of uninterrupted time.

Part 1 — Identify layers in a public web map

Step 1. Open OpenStreetMap in a new tab. You see a base map of the world.

If you have an Atlas account, you can also open one of your own maps in a second tab and repeat the same inspection there. Atlas is useful for seeing the same web-map concepts in a work context: base map, data layers, styling, popups, sharing, and export all sit close together.

You can also use this Atlas template as a concrete example. Pan around the map, click a few power plants, and look for the layer styling, popup attributes, filters, and summary widgets.

Step 2. Click the Layers button on the right edge. Toggle through the layer options (Standard, Cycle Map, Transport Map, ÖPNV, Humanitarian). Each is a different cartographic style applied to the same underlying data.

Step 3. Click Share → HTML. The embed code contains a bounding box and a base layer parameter. Note that the URL itself encodes the map view — ?mlat=51.5&mlon=-0.1#map=12/51.5/-0.1 — which means any web map view can be bookmarked and shared.

Observation to record: the same data (OpenStreetMap) can be visualised many different ways. Data and style are separate concerns.

Part 2 — Inspect tile requests

Step 4. Open developer tools (F12) and switch to the Network tab. Filter requests by Img.

Step 5. Pan or zoom the map once. You should see a burst of 256×256 pixel image requests to URLs like https://a.tile.openstreetmap.org/12/2047/1362.png.

Step 6. Click one of those requests. The three path components are {z}/{x}/{y} — zoom level, column, row. This is the slippy map tile scheme introduced by Google Maps in 2005, now the de facto standard.

Observation to record: the map isn't a single image. It's a pyramid of tiles, each 256×256 pixels, indexed by zoom level and column/row. Zoom 0 is one tile for the whole world; zoom 18 is ~70 billion tiles.

Part 3 — Identify a coordinate reference system

Step 7. In the URL bar, note the coordinates: lat, lon. These are WGS84 geographic coordinates (EPSG:4326) — degrees of latitude and longitude on the ellipsoid.

Step 8. The rendered tiles are actually in a different CRS: Web Mercator (EPSG:3857). OpenStreetMap transforms geographic coordinates into projected metres before tiling. Module 4 covers this in detail.

Observation to record: web maps almost always mix two CRSs — geographic (EPSG:4326) for input/output, Web Mercator (EPSG:3857) for tile rendering.

Part 4 — Measure a distance

Step 9. In OpenStreetMap, click the ruler icon (or use a tool like geojson.io). Click two points — say, from your home city to another major city.

Step 10. Record the distance reported.

Step 11. Switch to CalcMaps.com/measure-distance and measure the same pair of points. Compare the result.

You should see a small difference — under 0.5% for most short distances. The difference comes from whether the tool uses great-circle (geodesic) distance on the ellipsoid or Euclidean distance in Web Mercator metres. Geodesic is closer to truth.

Observation to record: distance on a sphere depends on how you measure it. Module 3 and Module 4 unpack this.

Part 5 — Export a screenshot

Step 12. Frame a map view you want to keep (e.g., your home neighbourhood at zoom 16).

Step 13. Use the Share → Image export, or simply take a screenshot (Cmd/Ctrl + Shift + 4 on macOS/Windows).

Step 14. Save the image as lab1-map.png in a new folder called gis-basics-labs/ on your computer.

You've produced your first deliverable.

Part 6 — Quick reflection

Answer the following in a notebook or text file (you'll refer back to these answers in Module 4 and Module 17):

1. What zoom levels did you use? Roughly how many tiles did the map request at each level?
2. Which coordinate reference system is the input to the map? Which is the rendering CRS?
3. By how much did the two distance-measuring tools disagree? Why?

Troubleshooting

• Blank tiles — check your network connection; OpenStreetMap tile servers rate-limit very heavy use.
• Developer tools don't show tile requests — make sure the filter is set to All or Img, not JS.
• Different CRS shown in URL — some maps use z/y/x or /z/x/y.pbf for vector tiles; the principle is the same.

Self-check exercises

1. Why does a web map use two CRSs — one for input and one for tiles?

Users think in latitude/longitude (EPSG:4326), which is intuitive but not flat. Tile rendering requires a flat, equal-pixel-size grid — Web Mercator (EPSG:3857) — so coordinates get transformed before drawing. The separation lets users share lat/lon URLs while engines render from a pre-computed tile pyramid.

2. Roughly how many tiles exist at zoom 12 for the whole world?

At zoom level z the world is divided into 2^z × 2^z tiles. At zoom 12 that's 4096 × 4096 = 16,777,216 tiles. Each tile is 256 × 256 pixels, which is why map servers need caching and CDNs.

3. What's the difference between geodesic and Web Mercator distance?

Geodesic distance is measured along the ellipsoid (great-circle on a sphere). Web Mercator distance is Euclidean distance in the projected Mercator metres — which distorts more as you move away from the equator. Over short distances the difference is small; over long distances, especially near the poles, it's dramatic.

Summary

• Web maps are GIS clients: tiled, projected, layered.
• Browser dev tools expose the tile pyramid, the CRS, and the attribution metadata.
• Measurement tools differ because they use different underlying distance functions.
• Save your lab deliverables — you'll build on them across the course.

Further reading

• OpenStreetMap Wiki — Slippy Map Tilenames.
• MapBox — How Web Maps Work overview.
• Leaflet tutorial — Interactive Choropleth Map.
• Martin — Understanding Map Projections (Esri, free PDF).