Adding tabbing navigation and accessibility to map

src/mapml-viewer.js

@@ -211,6 +211,7 @@ export class MapViewer extends HTMLElement {
           this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps for HTML Community Group">Maps4HTML</a> | <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
 
           this.setControls(false,false,true);
+          this._crosshair = M.crosshair().addTo(this._map);
 
           // Make the Leaflet container element programmatically identifiable
           // (https://github.com/Leaflet/Leaflet/issues/7193).

src/mapml.css

@@ -374,3 +374,15 @@ summary {
 .leaflet-container .leaflet-control-container {
   visibility: unset!important;
 }
+
+.mapml-crosshair {
+  margin: -18px 0 0 -18px;
+  width: 36px;
+  height: 36px;
+  left: 50%;
+  top: 50%;
+  content: '';
+  display: block;
+  position: absolute;
+  z-index: 10000;
+}

src/mapml/index.js

@@ -52,6 +52,7 @@ import { QueryHandler } from './handlers/QueryHandler';
 import { ContextMenu } from './handlers/ContextMenu';
 import { Util } from './utils/Util';
 import { ReloadButton, reloadButton } from './control/ReloadButton';
+import { Crosshair, crosshair } from "./layers/Crosshair";
 
 /* global L, Node */
 (function (window, document, undefined) {
@@ -625,4 +626,7 @@ M.mapMLStaticTileLayer = mapMLStaticTileLayer;
 M.DebugOverlay = DebugOverlay;
 M.debugOverlay = debugOverlay;
 
+M.Crosshair = Crosshair;
+M.crosshair = crosshair;
+
 }(window, document));

src/mapml/layers/Crosshair.js

@@ -0,0 +1,88 @@
+export var Crosshair = L.Layer.extend({
+  onAdd: function (map) {
+
+    //SVG crosshair design from https://github.com/xguaita/Leaflet.MapCenterCoord/blob/master/src/icons/MapCenterCoordIcon1.svg?short_path=81a5c76
+    let svgInnerHTML = `<svg
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+    xmlns:cc="http://creativecommons.org/ns#"
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0px"
+    y="0px"
+    viewBox="0 0 99.999998 99.999998"
+    xml:space="preserve">
+    <g><circle
+        r="3.9234731"
+        cy="50.21946"
+        cx="50.027821"
+        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path
+        d="m 4.9734042,54.423642 31.7671398,0 c 2.322349,0 4.204185,-1.881836 4.204185,-4.204185 0,-2.322349 -1.881836,-4.204184 -4.204185,-4.204184 l -31.7671398,0 c -2.3223489,-2.82e-4 -4.20418433,1.881554 -4.20418433,4.204184 0,2.322631 1.88183543,4.204185 4.20418433,4.204185 z"
+        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path
+        d="m 54.232003,5.1650429 c 0,-2.3223489 -1.881836,-4.20418433 -4.204184,-4.20418433 -2.322349,0 -4.204185,1.88183543 -4.204185,4.20418433 l 0,31.7671401 c 0,2.322349 1.881836,4.204184 4.204185,4.204184 2.322348,0 4.204184,-1.881835 4.204184,-4.204184 l 0,-31.7671401 z"
+        style="fill:#000000;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+        d="m 99.287826,50.219457 c 0,-2.322349 -1.881835,-4.204184 -4.204184,-4.204184 l -31.76714,0 c -2.322349,0 -4.204184,1.881835 -4.204184,4.204184 0,2.322349 1.881835,4.204185 4.204184,4.204185 l 31.76714,0 c 2.320658,0 4.204184,-1.881836 4.204184,-4.204185 z"
+        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path
+        d="m 45.823352,95.27359 c 0,2.322349 1.881836,4.204184 4.204185,4.204184 2.322349,0 4.204184,-1.881835 4.204184,-4.204184 l 0,-31.76714 c 0,-2.322349 -1.881835,-4.204185 -4.204184,-4.204185 -2.322349,0 -4.204185,1.881836 -4.204185,4.204185 l 0,31.76714 z"
+        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /></g></svg>
+ `;
+
+    this._container = L.DomUtil.create("div", "mapml-crosshair", map._container);
+    this._container.innerHTML = svgInnerHTML;
+    this._mapFocused = false;
+    this._isQueryable = false;
+
+    map.on("layerchange layeradd layerremove overlayremove", this._toggleEvents, this);
+    L.DomEvent.on(map._container, "keydown keyup mousedown", this._isMapFocused, this);
+
+
+    this._addOrRemoveCrosshair();
+  },
+
+  _toggleEvents: function () {
+    if (this._hasQueryableLayer()) {
+      this._map.on("viewreset move moveend", this._addOrRemoveCrosshair, this);
+    } else {
+      this._map.off("viewreset move moveend", this._addOrRemoveCrosshair, this);
+    }
+    this._addOrRemoveCrosshair();
+  },
+
+  _addOrRemoveCrosshair: function (e) {
+    if (this._hasQueryableLayer()) {
+      this._container.style.visibility = null;
+    } else {
+      this._container.style.visibility = "hidden";
+    }
+  },
+
+  _hasQueryableLayer: function () {
+    let layers = this._map.options.mapEl.layers;
+    if (this._mapFocused) {
+      for (let layer of layers) {
+        if (layer.checked && layer._layer.queryable) {
+          return true;
+        }
+      }
+    }
+    return false;
+  },
+
+  _isMapFocused: function (e) {
+    if (["keydown", "keyup"].includes(e.type) && e.target.classList.contains("leaflet-container") && [32, 37, 38, 39, 40, 187, 189].includes(+e.keyCode)) {
+      this._mapFocused = true;
+    } else if (e.type === "keyup" && e.target.classList.contains("leaflet-container") && +e.keyCode === 9) {
+      this._mapFocused = true;
+    } else {
+      this._mapFocused = false;
+    }
+    this._addOrRemoveCrosshair();
+  },
+
+});
+
+
+export var crosshair = function (options) {
+  return new Crosshair(options);
+};

src/mapml/layers/FeatureLayer.js

@@ -36,6 +36,11 @@ export var MapMLFeatures = L.FeatureGroup.extend({
       }
     },
 
+    onAdd: function(map){
+      L.FeatureGroup.prototype.onAdd.call(this, map);
+      this._updateTabIndex();
+    },
+
     getEvents: function(){
       if(this._staticFeature){
         return {
@@ -47,6 +52,14 @@ export var MapMLFeatures = L.FeatureGroup.extend({
       };
     },
 
+    _updateTabIndex: function(){
+      for(let feature in this._features){
+        for(let path of this._features[feature]){
+          if(path._path && path._path.getAttribute("d") !== "M0 0") path._path.setAttribute("tabindex", 0);
+        }
+      }
+    },
+
     _handleMoveEnd : function(){
       let mapZoom = this._map.getZoom();
       if(mapZoom > this.zoomBounds.maxZoom || mapZoom < this.zoomBounds.minZoom){
@@ -62,6 +75,7 @@ export var MapMLFeatures = L.FeatureGroup.extend({
                             this._map.getPixelBounds(),
                             mapZoom,this._map.options.projection));
       this._removeCSS();
+      this._updateTabIndex();
     },
 
     //sets default if any are missing, better to only replace ones that are missing

src/mapml/layers/MapLayer.js

@@ -94,7 +94,7 @@ export var MapMLLayer = L.Layer.extend({
                 if (properties) {
                   var c = document.createElement('div');
                   c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-                  geometry.bindPopup(c, {autoPan:false});
+                  geometry.bindPopup(c, {autoPan:false, closeButton: false});
                 }
               }
             });
@@ -123,7 +123,7 @@ export var MapMLLayer = L.Layer.extend({
                     if (properties) {
                       var c = document.createElement('div');
                       c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-                      geometry.bindPopup(c, {autoPan:false});
+                      geometry.bindPopup(c, {autoPan:false, closeButton: false});
                     }
                   }
                 }).addTo(map);

src/mapml/layers/TemplatedFeaturesLayer.js

@@ -39,7 +39,7 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
             // need to parse as HTML to preserve semantics and styles
             var c = document.createElement('div');
             c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-            geometry.bindPopup(c, {autoPan:false});
+            geometry.bindPopup(c, {autoPan:false, closeButton: false});
           }
         });
       }
@@ -87,6 +87,7 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
           parser = new DOMParser(),
           features = this._features,
           map = this._map,
+          context = this,
           MAX_PAGES = 10,
         _pullFeatureFeed = function (url, limit) {
           return (fetch (url,{redirect: 'follow',headers: headers})
@@ -111,6 +112,7 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
       _pullFeatureFeed(this._getfeaturesUrl(), MAX_PAGES)
         .then(function() { 
           map.addLayer(features);
+          M.TemplatedFeaturesLayer.prototype._updateTabIndex(context);
         })
         .catch(function (error) { console.log(error);});
     },
@@ -119,6 +121,13 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
         this._updateZIndex();
         return this;
     },
+    _updateTabIndex: function(context){
+      let c = context || this;
+      for(let layerNum in c._features._layers){
+        let layer = c._features._layers[layerNum];
+        if(layer._path && layer._path.getAttribute("d") !== "M0 0") layer._path.setAttribute("tabindex", 0);
+      }
+    },
     _updateZIndex: function () {
         if (this._container && this.options.zIndex !== undefined && this.options.zIndex !== null) {
             this._container.style.zIndex = this.options.zIndex;

src/web-map.js

@@ -224,6 +224,7 @@ export class WebMap extends HTMLMapElement {
           this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps for HTML Community Group">Maps4HTML</a> | <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
 
           this.setControls(false,false,true);
+          this._crosshair = M.crosshair().addTo(this._map);
           if (this.hasAttribute('name')) {
             var name = this.getAttribute('name');
             if (name) {

test/e2e/core/keyboardInteraction.html

@@ -0,0 +1,85 @@
+<html>
+
+<head>
+  <title>Keyboard Interaction Test</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="module" src="mapml-viewer.js"></script>
+</head>
+
+<body>
+  <mapml-viewer style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040"
+    lon="-75.2202344" controls>
+    <layer- label="Fire" checked>
+      <extent units="CBMTILE">
+        <input name="z" type="zoom" value="18" min="0" max="18" />
+        <input name="txmin" type="location" units="tilematrix" position="top-left" axis="easting" min="-2.003750834E7"
+          max="2.003750834E7" />
+        <input name="tymin" type="location" units="tilematrix" position="bottom-left" axis="northing"
+          min="-2.003750834E7" max="2.003750834E7" />
+        <input name="txmax" type="location" units="tilematrix" position="top-right" axis="easting" min="-2.003750834E7"
+          max="2.003750834E7" />
+        <input name="tymax" type="location" units="tilematrix" position="top-left" axis="northing" min="-2.003750834E7"
+          max="2.003750834E7" />
+        <link rel="tile"
+          tref="https://cwfis.cfs.nrcan.gc.ca/geoserver/public/wms?service=WMS&version=1.3.0&request=GetMap&layers=public:fdr_current&styles=&bbox={txmin},{tymin},{txmax},{tymax}&width=256&height=256&crs=EPSG:3978&FORMAT=image/png&TRANSPARENT=TRUE&m4h=t" />
+        <input name="i" type="location" units="map" axis="i" />
+        <input name="j" type="location" units="map" axis="j" />
+        <input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" min="-2.003750834E7"
+          max="2.003750834E7" />
+        <input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="-2.003750834E7"
+          max="2.003750834E7" />
+        <input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="-2.003750834E7"
+          max="2.003750834E7" />
+        <input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-2.003750834E7"
+          max="2.003750834E7" />
+        <input name="w" type="width" />
+        <input name="h" type="height" />
+        <link rel="query"
+          tref="https://cwfis.cfs.nrcan.gc.ca/geoserver/public/wms?i={i}&j={j}&service=WMS&version=1.3.0&request=GetFeatureInfo&layers=public:fdr_current&QUERY_LAYERS=current:fdr_current&styles=&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&srs=EPSG:3978&INFO_FORMAT=text/html&m4h=t" />
+      </extent>
+    </layer->
+
+    <layer- label="Arizona" checked>
+      <meta name="projection" content="CBMTILE" />
+      <meta name="zoom" content="min=1,max=5,value=0" />
+      <meta name="cs" content="gcrs" />
+      <meta name="extent" content="zoom=0,top-left-column=0,top-left-row=0,bottom-right-column=5,bottom-right-row=5" />
+      <feature zoom="2" class="refDiff">
+        <properties>
+          <h1>Test</h1>
+        </properties>
+        <geometry cs="tilematrix">
+          <polygon>
+            <coordinates>11 11 12 11 12 12 11 12</coordinates>
+          </polygon>
+        </geometry>
+      </feature>
+
+      <feature zoom="2" class="refDiff">
+        <properties>
+          <h1>Test</h1>
+        </properties>
+        <geometry cs="pcrs">
+          <polygon>
+            <coordinates>257421 -3567196 -271745 1221771 -3896544 242811 -3183549 -2613313</coordinates>
+          </polygon>
+        </geometry>
+      </feature>
+
+      <feature zoom="2" class="refDiff">
+        <properties>
+          <h1>Test</h1>
+        </properties>
+        <geometry cs="tcrs">
+          <polygon>
+            <coordinates>2771 3106 2946 3113 2954 3210 2815 3192</coordinates>
+          </polygon>
+        </geometry>
+      </feature>
+    </layer->
+    <layer- id="vector" label="vector states" src="data/us_pop_density.mapml"></layer->
+  </mapml-viewer>
+</body>
+
+</html>