Want to help improve the HTML <map> element? Join the W3C Maps for HTML Community Group and send us your comments on WICG Discourse or contribute on Github.
The following maps are a few examples of how the <map> custom element works. Each map is preceded by the markup that creates the map, and each map is annotated to describe and point out the effect of the markup.
<map is="web-map" zoom="17" lat="45.398043" lon="-75.70683" width="700" height="400" controls>
<layer- id="osm" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="OpenStreetMap" checked hidden></layer->
<layer- id="cbmt" src="https://geogratis.gc.ca/mapml/en/osmtile/cbmt/" label="Canada Base Map"></layer->
<layer- id="canvec" src="https://geogratis.gc.ca/api/beta/vectors/canvec/50k/features/" label="CanVec+ 031G" class="transparency"></layer->
<layer- id="marker" src="marker.mapml" label="Marker layer" checked></layer->
<area is="map-area" id="marker2" href="https://example.com/marker/" alt="Marker" coords="265,185" shape="marker">
<area is="map-area" id="line" href="https://example.com/line/" alt="Line" coords="275,275,540,107" shape="line">
<area is="map-area" id="doughnut" href="https://example.com/circle/" alt="Circle" coords="250,250,25" shape="circle" style="fill: white; stroke: aqua; stroke-width: 5px; fill-opacity: 0.0">
<area is="map-area" id="hole" alt="Hole" coords="250,250,7" shape="circle" style="fill: blue; stroke: none; fill-opacity: 0.3;">
<area is="map-area" id="rect" href="https://example.com/rectangle/" alt="Rectangle" coords="345,290,415,320" shape="rect" style="fill: greenyellow; stroke: blue; stroke-width: 3px; fill-opacity: 0.4">
<area is="map-area" id="poly" href="https://example.com/polygon/" alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly" style="fill: pink; stroke: blue; stroke-width: 3px; fill-opacity: 0.4">
</map>
This map illustrates a few of the features of the <map> custom element.
First, note that the map element has a controls attribute. This requests the user-agent to present default controls, such as zoom and layer controls to the user.
Also, there is no projection attribute on the map element, and as a result, the map has the default projection whose value is implicitly OSMTILE. Consequently, all the <layer-> element children of the map element must support the OSMTILE projection, otherwise they will be disabled by the web-map application.
The layers have an inherent projection that is unknown to the client until the URL is fetched. When the MapML response is parsed, the code enables/disables the layer in the layer control checkbox based on whether the layer shares the projection of the map element, and is visible i.e. within the zoom and bounds of the map.
Next, the first <layer-> child of map element is the id="osm" layer, which is declared checked and hidden. As a result, it is displayed on the map, but not in the controls.
Although the id="cbmt" layer shares the OSMTILE projection and it has a checked attribute directing it to be displayed, when the page is loaded the map discovers that the layer resource does not serve the zoom level at which the map initially loads, and therefore it is initially disabled in the layer control. Zooming out a few levels should result in the id="cbmt" layer being enabled/available in the layer control and displayed on the map. This behaviour also illustrates the painters model in which <layer-> elements which are later in document order are drawn on top of earlier layer- elements
The id="canvec" layer is a vector feature layer in the MapML WGS84 projection. The layer references a linked CSS stylesheet. The WGS84 projection is a kind of "wildcard" coordinate reference system that can be overlayed on any projected coordinate reference system known to MapML. It is initially enabled and available in the layer control because it overlaps the map element's initial extent and zoom level. If you pan or zoom the map, it too should be enabled/disabled automatically based on the discovered extent.
The map includes a few <area> links, which are similar to the standard map element's area element children. These elements create a style-able map feature and optionally declare it as a hyperlink. There are two additional shape attribute values allowed compared to the standard area element: marker and line. The marker value designates a point feature to be symbolized. The intention of the implementation is to allow such markers to be styled with CSS and represented by SVG graphic symbols. The current custom element implementation uses a fixed familiar place marker icon image.
Finally, the layer control shows a layer called "Marker layer", which is a simple MapML file created by the HTML author within their domain. This shows the different behaviour between features encoded in MapML and included as layers versus features encoded in HTML area elements and included on the map as links.
<map is="web-map" zoom="2" lat="67.101360" lon="-91.121469" projection="CBMTILE" width="640" height="480" controls>
<layer- src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="OpenStreetMap" checked></layer->
<layer- src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" label="Canada Base Map" checked></layer->
<layer- src="https://geogratis.gc.ca/api/beta/vectors/canvec/50k/features/" label="CanVec+ 031G" class="transparency"></layer->
<layer- id="fdr" src="https://geogratis.gc.ca/mapml/en/cbmtile/fdi/" label="Fire Risk forecast" style="opacity: 0.4"></layer->
</map>
This map declares the CBMTILE projection, which is a coordinate reference system in the Lambert Conformal Conic projection in MapML. The OpenStreetMap layer is in the Web Mercator (OSMTILE) projection, and is therefore disabled/unavailable, no matter how much you zoom and pan.
If you zoom in on the Ottawa region displayed in the first map above (the map projected in the default OSMTILE projection), you can see that the id="canvec2" layer becomes enabled in the layer control, such that you can click/tap to enable it.
The final example is the Arctic Ocean Base Map, which uses the APSTILE projection, which is a coordinate reference system based on the Polar Stereographic projection in MapML:
<map is="web-map" zoom="3" lat="90.0" lon="0.0" projection="APSTILE" width="640" height="480">
<layer- src="https://geogratis.gc.ca/mapml/en/apstile/arctic/" label="Arctic Ocean Base Map" checked hidden></layer->
<area id="northPole" is="map-area" shape="marker" href="https://example.com/santa/" alt="North Pole" coords="320,240">
</map>
This map illustrates the dramatically different projection APSTILE, with an <area> link for the North Pole. The lack of a controls attribute on the map element results in a clean map that looks like an image but behaves like a map.
The Arctic Ocean Base Map Terms of Use are available from ArcGIS.com.