<-- You will see the old image map behaviour if: -->
<-- * you're using an IE browser, this page should force IE7 mode -->
<-- * in FireFox, if Web Components are enabled, I believe the HTML import for the map custom element won't work -->
<-- * in any browser if you disable javascript -->
<-- else the map@is=web-map should have custom behaviour, including zoom, pan, layers, controls etc. -->

<-- The img element is only used for fallback processing, otherwise it is deleted by the custom element on load -->
<img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area" />

<-- The map element can be set up by the HTML author to provide the old image map behaviour -->
<map name="dowslake" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" width="700" height="400" controls hidden>
  <layer- id="osm" src="http://geogratis.gc.ca/mapml/osm/" label="Open Street Map" checked hidden></layer->
  <layer- id="canvec" src="http://geogratis.gc.ca/mapml/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='http://example.com/marker/' alt="Marker" coords="265,185" shape="marker">
  The shape=marker keyword is new, if we want a link there in old UAs we have to provide a fallback, using rect
  <area is="map-area" href='http://example.com/marker/' alt="Marker" coords="255,145,275,190" shape="rect" style="fill: none">
  <area is="map-area"id="line" href='http://example.com/line/' alt="Line" coords="275,275,540,107" shape="line">
  <area is="map-area"id="donut" alt="Circle" href='http://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='http://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='http://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>
      
Dow's Lake area