Want to help improve the web-map element? Join the Maps For HTML Community Group, and send us your comments.

The following maps are a few examples of how the web-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 hidden>
  <layer- id="osm" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" 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" label="Marker layer" src="marker.mapml"></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" alt="Circle" href='https://example.com/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" 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">
Dow's Lake area

This map illustrates a few of the features of the web-map custom element.

First, note that the web-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 web-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 web-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 web-map element is the #osm layer, which is declared checked and hidden. As a result, it is displayed on the map, but not in the controls.

Although the #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 #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 #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 available/enabled in the layer control because it overlaps the web-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 map-area links, which are similar to the 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 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 hidden>
  <layer- src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" 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" label="Fire Risk forecast" src="https://geogratis.gc.ca/mapml/en/cbmtile/fdi/"  style="opacity: 0.4"></layer->

This map declares the 'CBMTILE' projection, which is a coordinate reference system in the Lambert Conformal Conic projection in MapML. The Open Street Map 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 #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" hidden>
  <layer- src="https://geogratis.gc.ca/mapml/en/apstile/arctic/" label="Arctic Ocean Base Map" checked hidden></layer->
  <area is="map-area"shape="marker" href='http://example.com/santa/' alt="North Pole" coords="320,175" id="northPole">

This map illustrates a dramatically different projection, as well as a arealink for the North Pole. Additionally, you can see that the lack of a 'controls' attribute on the web-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