This report outlines the use cases and requirements for standardizing modern Web maps, in a way that works for map content authors, webpage authors, and website users. The use cases and requirements were gathered in consultation with the Maps for HTML Community Group and others.
Comments, corrections, and suggested additions should be made as GitHub issues. If that is not possible, send an email comment to firstname.lastname@example.org.
Web maps today are indispensable to billions of people, for exploring and understanding the world around them. Like paper maps before them, web maps are used for planning, wayfinding, analysis, and more. But the power of an interactive, hyperlinked medium supports a richer experience than could have been imagined by a cartographer from a previous century. Online maps can be dynamically redrawn with new data, or according to the user's preferences. They can connect to other maps — for adjacent areas, finer detail, or different geographical features — and can link out to complex information about the places they represent.
But despite their ubiquity on the web, maps have no native, semantic representation in HTML.
HTML has had “image maps” —
hyperlinked graphics, where selecting different parts of the graphic triggers a different URL —
from its early days.
These were quickly adopted to
represent simple cartographic maps.
sounds like it should be the basis of a web map,
but its basic functionality
(to define geometric areas on an image that represent distinct hyperlinks)
has not evolved to include what users today consider a standard web map
(such as those provided by Google, Bing, or OpenStreetMap).
Web mapping technology has undergone a long period of evolution. Today's web maps are usually sophisticated client-server applications, dynamically combining many types of spatial data on demand for web users. Implementations vary widely, but some of the underlying techniques, software, semantics and formats have become accepted patterns (for example, the tile naming systems), or formal standards (for example, the standards published by the Open Geospatial Consortium, some of which are also ISO standards).
Web maps today may not be perfect, but they have filled a clear need for website authors and users. The multiple frameworks used to generate web maps implement the same capabilities with different code — code that needs to be downloaded and processed for each website with a map in it. These core aspects of Web maps represent mature, ubiquitous user interface (UI) and application programming interface (API) patterns. It is now reasonable to consider standardizing these capabilities for implementation by web browsers directly.
A key challenge is to do so in a way that is compatible with the core values of the open web, and integrated with other web platform technologies.
The Maps For HTML Community Group (Maps4HTML) arose as a result of face-to-face discussions at the Linking Geospatial Data workshop 2014, co-sponsored by the W3C and the Open Geospatial Consortium.
The group operates within the structure of a W3C community group, with clear license terms for contributions of intellectual property. The community group process designed to support the eventual transition of the group's work to become open web standards. The group attempts to follow the established best practices for web standard development, as outlined in the guiding principles for this report.
The initial requirements sketched out at LGD2014 were expanded into an initial use cases and requirements summary. That work was the basis of the draft [[[MapML]]] specification and [[[HTML-map-element]]] proposal. Although MapML has had notable support and development efforts from within the geospatial community, as of early 2019 it has not received significant support from web browser developers or HTML standards teams. For that reason, the current document rolls back the focus to the discussion of mapping use cases and requirements. The structure of this report is intended to more comprehensively explain why native HTML web maps would be beneficial, and how they should best be defined.
This report is a work in progress! Feedback and contributions are welcome. To make substantive contributions (that is, anything that is bigger than typo corrections or formatting fixes), you will need to first become a member of the community group and make the corresponding IP commitments.
The purpose of this report is to describe (1) why and how the open web would benefit from having web map features built in to web browsers, and (2) what this native web mapping function should look like, to website creators and to end users.
This report uses an empirical approach to identify required features of web maps, by looking for the common features of web map frameworks used today. However, we also recognize that web maps today have limitiations. A proposal for a native HTML web map, built in to web browsers, needs to be assessed on the same merits as any other proposed web standard.
In , we outline the theoretical factors we use for assessing whether a given feature should be included as a requirement. In , we introduce the web map frameworks that are used in the empirical review.
The review of potential requirements is then divided into three parts:
Within each part, we identify potential use cases: problems that a website author or user wants a web map to solve. The use cases are defined in pragmatic terms, describing a specific function or action. Real-world, domain-specific applications of the use case are summarized in an introductory description.
For each use case, we then list capabilities: features, which a web map might include, that could help solve the use case. Capabilities are potential requirements for a native HTML web map. To assess whether the capability should be a requirement, we examine:
For each capability, we conclude by summarizing its costs and potential benefits (using tags defined in the next section) for integration as a native HTML web map feature. We assign it one of three possible conclusions:
If there is not yet enough evidence for a conclusion, the capability will be marked undecided.
The structure of this review is inspired by many other projects that have outlined best practices for web standards developments. This section briefly outlines the principles behind our approach, with links to further reading.
The report uses an evidence-based approach, defining requirements not based on hypothetical use cases but on web map tools that are already in use. We assume that the common features of existing, widely-used web map frameworks represent core functionality that web users and website authors expect from native web maps.
This approach is inspired by [[[EXTENSIBLE]]] which aims to “tighten the feedback loop between the editors of web standards and web developers,” establishing “a clear path for good ideas by web developers to become part of the infrastructure of the web” [[EXTENSIBLE]].
Much of the manifesto focuses on making it easier for developers to experiment with new features — to expose web platform capabilities at a more granular level, so that developers can remix and extend them to try out new ideas. HTML custom elements and CSS custom properties are just two of many examples of how web standards efforts since 2012 have focused on creating better building blocks for web developers.
But the implicit second step of the extensible web approach is that, once a consensus has developed from real-world experience with particular features or patterns on the web, those features can be standardized with confidence.
Web maps are extremely complex user interfaces. If that complexity is to be built-in to web browsers, the extensible web mindset requires that it be exposed to developers as individual capabilities that can be remixed and extended. For that reason, this review breaks web map functionality into very low-level capabilities. In addition to describing how each capability is used in mapping, we discuss how the same building block could be used for other web content. Focusing on these low-level capabilities also ensures that we do not overlook important details, such as the need to make individual interactions accessible to all users.
To decide whether a capability should or shouldn't be considered a requirement for web maps, we need to assess its benefits and costs. But benefits and costs are subjective: to calculate them, we need a set of values or principles defining best practices for web standards. Only then can we assess whether integrating a feature into web browsers can bring the web closer to our ideals.
Benefits and costs are also different from different perspectives. Integrating web maps into HTML means convincing other web standard editors and web browser developers. But once a web standard is adopted, the number of website authors who use it will (hopefully) be much larger than the number of people who worked on the initial standard; the number of people who use those websites will be larger still. The [[[html-design-principles]]] rely on these numbers to establish a “priority of constituencies”:
In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. … Of course, it is preferred to make things better for multiple constituencies at once. [[html-design-principles]]
This section introduces the categories by which we measure costs and benefits to each of these constituencies.
An inclusive web is available to everyone, to connect and create in the ways most comfortable to them.
In this report, the user-friendliness of a potential web map feature is assessed on these points:
Can this feature be implemented in a privacy-respecting manner? Are there any other security concerns from this feature? Would making it a built-in feature, standardized in web browsers, improve privacy & security compared to current web practice?
Tags for the costs and benefits of potential requirements:
Does including this capability in a web map standard make it easier to ensure an accessible experience (assuming an accessibility-focused browser implementation)?
Can this feature be implemented in a manner that works for all languages and regions? Does building it into the browser increase the likelihood that internationalization is done correctly?
Would building in this feature significantly reduce the amount of data downloaded to the user device, or the amount of custom code that needs to run? Or would it impose heavy computation demands on the user device?
Implementers, for a web standard, are the people who build and maintain web browsers and other user agent software. Because much of the work of a web browser is to work as the user's agent, features that are good for the user when it comes to security or performance are also good for implementers. But some implementer benefits aren't directly exposed to the user:
An implementation that already exists is always easier. Could this feature reuse code that is already available to the browser?
Numerous options currently exist for a website author who wants to include a map viewer in a web page, with a minimum of custom code. The examples reviewed in this section are used to identify the common features (and limitations) of web map viewers.
Need data on the frequency of use of the different JS tools. has numbers, but no methodology.
The reviewed implementations come in three forms:
iframe; configuration options are set through the URL in
Need to identify reasonably popular web maps tools based on custom elements.
With these different structures, comparisons are not always exact. Similar functionality may be generated from very different APIs. We assess first whether a given capability is present in each implementation, and second whether there are common patterns in how that capability is exposed.
For each capability (potential web map feature) that we review, we assign one of the following implementation levels to each of the reference tools:
Compiling and serving map data is a complex, expensive enterprise. Many of the map data and search services require registered developer accounts, with usage-based pricing. This review focuses on features that are free-to-use for website creators, at least for low-traffic websites, or that use data which is available from many interchangeable sources. However, because of the complexities of pricing models used by some services, we don't strictly exclude paid features from our assessment of support.
By far the most frequently used map widget on the web, Google Maps established many of the de facto standards in how a web map works.
Customized iframe embed URLs can be generated from the maps website (search/customize the view and then select "share"), or by constructing the URL query string yourself (a developer API key and account is required).
Leaflet isn't associated with any particular map data source. It can use image tiles from most web map (tile) services.
This review is based on the version 1.4.0 API docs.
The map viewer widget is the interactive component that displays a map to end users. The map might be the primary purpose of a website, or a small embedded element in a larger HTML page.
This is an abstract use case: it covers all the generic features that are common to map widgets, ignoring the details about how the map location or specific geographic features specified.
For this section,
we simply assume the browser can convert the map data into images on screen.
The potential requirements in this section describe ways in which map viewers
enhance the normal experience of viewing a static image (e.g.,
in a web page.
Often, the website author does not want to specify the map data source or other details about the map; they just want a generic wayfinding map of the area.
The embeds and commerical APIs all provide default street maps without the author needing to specify the map source. In contast, the more flexible APIs must be combined with an separate map provider (e.g., OpenStreetMap).
No non-map uses for generating a default street map. But, there may be interest in displaying default maps as static images in addition to using them within map widgets.
This functionality is a highly valuable enhancement for native web maps, especially if it could be built on native platform features that allow the users to download maps in advance for later use. However, if user agents cannot integrate with a native operating system feature, they would need to rely on a third-party service for the map data.
A key part of the interactivity of a web map widget is that the user can change the region displayed. To pan the map is to shifting the view horizontally or vertically, so a different location is centered in the map display.
For mapping, panning is tightly linked with zooming and with dynamic loading of new content. For this discussion, we've divided them into separate features so that the costs, benefits, and non-mapping use cases can be assessed separately.
The following UI is standard among the reviewed map viewers:
The following UI is available in some viewers, but not all:
None (?) of the map viewers show a visible indication of keyboard focus for panning, or any other affordances to indicate how keyboard panning should work.
The standard panning interactions are also common on the web for other JS-enhanced zoom and pan graphics (e.g., a close up of a product photograph, a data chart). Similar interactions may be used in some games, or in navigation of large spreadsheets. Creating a native way to trigger panning within a web layout could help ensure consistent, accessible user experiences for panning.
From a rendering perspective, panning a map is very similar to scrolling a section of a CSS layout. Important differences:
Panning interactions also overlap with the proposed CSS spatial navigation spec.
In web maps and many other applications,
panning effects are combined with zoom effects;
for that reason, panning is often implemented using
CSS transforms or SVG
which can also handle zoom.
Panning the map is universally supported in JS web maps, and is therefore a requirement for native web maps. The relevant specification should be coordinated with CSS, considering other use cases for panning on the web. Thought is needed on how to make panning accessible to all users.
In addition to panning the view, it is standard to allow the user to adjust the map scale: zooming in to increase magnifaction (show finer detail), zooming out to decrease magnification (show a wider area).
The following UI is standard across the reviewed map widgets:
Localized zooming is used on the web for charts and diagrams, photographs (e.g., to examine details in a product photo, or for photo editing apps), embedded documents (e.g., a PDF viewer), and sometimes data tables.
Zooms are often implemented using transforms,
which defines the scale as a multiplicative factor compared to the normal size
scale(2) for doubling the size, zooming in;
scale(0.5) to zoom out by the same amount).
Scale transforms are paired with translations to create zoom and pan effects.
An alternative approach for describing zoom and pan
is used in SVG
and in spatial media fragments.
In this system, the container element defines its own width and height (e.g., with CSS)
plus a target rectangle in the zoomable graphic's coordinate system
(x and y offset, plus width and height);
the user agent then zooms and pans the graphic
to display the target rectangle in the available space.
This functionality is a requirement for modern web maps, with other uses in the web platform. A zoom specification will need to carefully consider all uses so it can be implemented consistently, and should be coordinated with panning.
Zooming a map widget is different from magnifying a regular image, or adjusting the overall browser zoom level; the layout is magnified, but annotations such as text size and stroke width do not.
Standard practice in the reviewed web map tools is to display this attribution in the lower right of the map widget. For map viewers that provide their own map data, the links and copyright is automatically generated. For map frameworks that allow the developer to specify the map data source, these "attribution control" values can be set in configuration.
For a website creator, this is the simplest web map use case: display a map from a description of a location.
This type of web map is used by websites for stores, restaurants, and countless other organizations with physical locations. It is also used by newsmedia to display the location described in an article. In social media and blogs, a single-location map can be used to show where a post was uploaded from, or where a photograph or video was taken.
Latitude and longitude defines a point on the Earth's surface, without requiring any further information. For website content, latitude and longitude data might come from photo or video metadata (from GPS-enabled cameras), or it might be calculated by the author using map search services. In a dynamic web app, latitude and longitude might be generated from geolocation on the user's device.
All the reference tools allow the website author to display a specific location, defined by latitude and longitude, from a map tile set.
The Geolocation API and Geolocation Sensor API expose the user's location using latitude and longitude data. It should be possible to set the view on a web map using data returned from these APIs. Both of these APIs use the [[[WGS84]]] as the technical definition of longitude and latitude (consistent with most modern geospatial standards), and a web map standard should use the same definition. [[geolocation-API]][[geolocation-sensor]][[WGS84]]
This functionality is a requirement for modern web maps.
For many mapping use cases, a website author won't have exact latitude and longitude values pre-calculated. They'll have street addresses or place names in a human-readable, localized format. To convert these addresses or names into a point on a web map, the web mapping service needs access to a Gazeteer search and corresponding databases.
For the user, it is often useful to bookmark or save a location from a map, separate from the website which included it. The user may want to export the location to a GPS or native mapping application so they can calculate directions to it.
Many different types of spatial data can be integrated in a web map: satellite imagery, cartographic representations of roads and terrain, 3D building profiles, pinpoint locations with annotated descriptions, route directions or other polyline paths, and more. Many standard and proprietary formats exist to describe this data.
A built-in web map viewer will need to work with spatial data that is already available from web servers, or that can be provided with minor server upgrades.
To Do: finish the script to generate a summary table from the annotated markup.
We are tracking issues on Github.
Based on the limited data, we are undecided about whether this should be a requirement.