<-- 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>