What is a web map?

Web maps are dynamic, interactive maps that are hosted on the web and can be shared to others via a link. Web maps are ubiquitous in our everyday: for example, you likely use a web map on your phone to navigate around the city or plan hikes, track an online order, ride, or bus, and check the weather forecast near you.

Web maps differ from digital maps, which are simply static maps derived from a computer and produced/published/stored in a digital format (such as an image or PDF). (The term “born digital” is often used to describe these kind of maps.) Examples of digital maps include scans of historical maps, or maps embedded online as graphics.

In contrast, Web maps can be identified based on some key characteristics:

Dynamic scales and content Web maps are not static images. Different scales display varying levels of detail. For instance, zooming in may reveal information that wasn’t apparent before. For this reason, web maps are not designed for print.
Interactive Web maps are built to be interacted with by an end user, often in order for the user to explore a dataset and learn something. Take for example Climate Central’s Surging Seas Risk Zone Map. Or, listen to the radio anywhere in the world with radio.garden.
Display real-time data updates Web maps are useful for geovisualizing real-time data like weather. Check out a local transit enthusiast’s real-time map of Metro Vancouver buses, made with Leaflet, or watch the wind blow across the country on Ventusky.
Often rely on web and mobile technology For example, Google Maps’ navigation algorithm that helps you find directions or search for coffee shops around town, or TransLink’s trip planner (which seems also to use Google’s routing algorithm). For app builders, web maps might provide a method for routing to locations using a mobile device’s geolocation features.

Examples of webmaps

The most basic web map is a basemap, contained in a viewbox with controls and an attribution at the bottom.

Web maps can show a drop-pin location…

Or display one or more data layers.

_{View in Full Screen}

Cluster maps take point data and generalize it at specific zoom levels. As you zoom in, aggregated data will disperse. Whether webmapping online or with code, you don’t need to write the clustering function yourself as it is already part of the code libraries powering your map.

Some other reference web maps out there:

T-Comm, a live bus map of Metro Vancouver for transit enthusiasts, powered by Leaflet.
Falling Fruit is a foraging map, hosted by Google Maps. Everyday people can anonomysouly upload finds such as a lush patch of blackberries, alleyway lemonbalm, or a plum tree in a yard slated for demolition.
Native-land.ca shows Indigenous territories across Turtle Island and around the world. You can search First Nations by territories, languages, or treaties. The map can be overlaid upon a colonial, cartesian basemap. This web map is powered by Mapbox, with basemap tiles from Open Street Map.
Queering the map visualizes anonymized, user-submitted queer experiences around the world. While their basemap used to be Google Maps, it recently changed to Open Street Map. It’s unclear what library is powering the interactivity of this web map, but extended documentation is impressively available on Radical-data’s Github.

So far, all of the above webmap examples have been reference maps. You can also make thematic webmaps, but that is beyond the scope of today’s workshop.