feat(osmPoi): accessibility using dom elements on canvas (#120)

package.json

@@ -60,6 +60,7 @@
     "capacitor-native-settings": "^6.0.0",
     "chart.js": "^4.4.1",
     "install": "^0.13.0",
+    "lodash": "^4.17.21",
     "maplibre-gl": "^4.3.2",
     "npm": "^10.5.0",
     "proj4": "^2.10.0"

src/css/app.scss

@@ -21,5 +21,6 @@
 @use 'signalement.css';
 @use 'landmark.css';
 @use 'location.css';
+@use 'mapboxgl-accessibility.css';
 @use 'action-sheet.css';
-@use 'media-queries.css';
+@use 'media-queries.css';

src/css/mapboxgl-accessibility.css

@@ -0,0 +1,13 @@
+/* Adapted from https://github.com/mapbox/mapbox-gl-accessibility
+
+Copyright (c) 2018, Mapbox
+ISC License
+*/
+.mapboxgl-accessibility-marker {
+  background: transparent;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border: none;
+  position: fixed;
+}

src/js/controls.js

@@ -20,6 +20,7 @@ import ComparePoi from "./compare-poi/compare-poi";
 import Signalement from "./signalement";
 import SignalementOSM from "./signalement-osm";
 import Landmark from "./landmark";
+import MapboxAccessibility from "./poi-accessibility";
 
 import LocationLayers from "./services/location-styles";
 
@@ -132,6 +133,7 @@ const addControls = () => {
         });
         // Poi RLT
         Globals.comparePoi = new ComparePoi(map, {});
+        Globals.osmPoiAccessibility = new MapboxAccessibility(map, {});
         Globals.myaccount.addLandmarksLayers();
         // Cercle de précision sur la position
         Globals.map.addLayer(LocationLayers["precision"]);

src/js/globals.js

@@ -87,6 +87,9 @@ let myaccount = null;
 // Global control compare Poi
 let comparePoi = null;
 
+// Global control osm poi accessibility
+let osmPoiAccessibility = null;
+
 // Global control signalement
 let signalement = null;
 let signalementOSM = null;
@@ -136,4 +139,5 @@ export default {
   signalementOSM,
   online,
   mapLoaded,
+  osmPoiAccessibility,
 };

src/js/map-interactivity/legend-plan-ign.js

@@ -214,7 +214,7 @@ function getLegend(svg, layername) {
   return html;
 }
 
-function Legend(features, zoom) {
+function legend(features, zoom) {
 
   const source = features.length > 0 ? features[0].source : "";
   let legend = "";
@@ -328,4 +328,7 @@ function Legend(features, zoom) {
   return legend;
 }
 
-export default Legend;
+export default {
+  legend,
+  beautifyLayerName
+};

src/js/map-interactivity/map-interactivity.js

@@ -142,7 +142,7 @@ class MapInteractivity {
         };
         Globals.position.compute({
           lngLat: ev.lngLat,
-          text: Legend(features, Math.floor(this.map.getZoom())),
+          text: Legend.legend(features, Math.floor(this.map.getZoom())),
           html: featureHTML.before,
           html2: featureHTML.after,
           hideCallback: deselectPoiCallback,
@@ -213,7 +213,7 @@ class MapInteractivity {
           this.#clearSources();
           await Globals.position.compute({
             lngLat: ev.lngLat,
-            text: Legend(features, Math.floor(this.map.getZoom())),
+            text: Legend.legend(features, Math.floor(this.map.getZoom())),
             html: featureHTML.before,
             html2: featureHTML.after
           });

src/js/poi-accessibility.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Institut national de l'information géographique et forestière
+ *
+ * This program and the accompanying materials are made available under the terms of the GPL License, Version 3.0.
+ *
+ * Adapted from https://github.com/mapbox/mapbox-gl-accessibility
+ * Copyright (c) 2018, Mapbox
+ * ISC License
+ *
+ */
+
+import debounce from 'lodash/debounce';
+
+import Legend from "./map-interactivity/legend-plan-ign";
+
+class MapboxAccessibility {
+  constructor(map, options) {
+    this.map = map;
+    this.layers = options.layers || [
+      'POI OSM isochrone$$$OSM.POI$GEOPORTAIL:GPP:TMS',
+      "POI OSM 14$$$OSM.POI$GEOPORTAIL:GPP:TMS",
+      "POI OSM 15$$$OSM.POI$GEOPORTAIL:GPP:TMS",
+      "POI OSM 16et17$$$OSM.POI$GEOPORTAIL:GPP:TMS",
+      "POI OSM 18et19$$$OSM.POI$GEOPORTAIL:GPP:TMS",
+    ]
+    this.features = null;
+    map.on('movestart', this._movestart);
+    map.on('moveend', this._render);
+    map.on('render', this._render);
+    this._debouncedQueryFeatures = debounce(this.queryFeatures, 100);
+  }
+
+  clearMarkers = () => {
+    if (this.features) {
+      this.features.forEach(feature => {
+        if (feature.marker) {
+          this.map.getCanvasContainer().removeChild(feature.marker);
+          delete feature.marker;
+        }
+      });
+    }
+  }
+
+  queryFeatures = () => {
+    this._debouncedQueryFeatures.cancel();
+    this.clearMarkers();
+
+    this.features = this.map.queryRenderedFeatures({ layers: this.layers });
+    this.features.map((feature) => {
+      const label = Legend.beautifyLayerName(feature, "poi_osm").split("<p class=\"positionSubTitle\">")[0];
+
+      feature.marker = document.createElement('button');
+      feature.marker.setAttribute('title', label);
+      feature.marker.setAttribute('tabindex', 0);
+      feature.marker.style.display = 'block';
+
+      let position;
+      if (feature.geometry.type === 'Point') {
+        position = this.map.project(feature.geometry.coordinates);
+      }
+      feature.marker.style.width = "24px";
+      feature.marker.style.height = "24px";
+      feature.marker.style.transform = `translate(-50%, -50%) translate(${position.x}px, ${position.y}px)`;
+      feature.marker.className = 'mapboxgl-accessibility-marker';
+
+      this.map.getCanvasContainer().appendChild(feature.marker);
+      return feature;
+    });
+  }
+
+  _movestart = () => {
+    this._debouncedQueryFeatures.cancel();
+    this.clearMarkers();
+  }
+
+  _render = () => {
+    if (!this.map.isMoving()) {
+      this._debouncedQueryFeatures();
+    }
+  }
+}
+
+export default MapboxAccessibility;