🗣️

mapbox · Nov 16, 2017 · 3a2d6b6 · 3a2d6b6
commit 3a2d6b6
Show file tree

Hide file tree

Showing 8 changed files with 5,740 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,32 @@
+Mapbox GL Accessibility Plugin
+---
+
+An accessibility control for [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js).
+
+### Usage
+
+```js
+// Should be run after the map has been initialized
+
+map.on('load', () => {
+  map.addControl(new MapboxAccessibility({
+
+    // A string value representing a property key in the data. This 
+    // will be used as the text in voiceover.
+    accessibleLabelProperty: 'name',
+
+    // The layers within the style that
+    // 1. Contain the `accessibleLabelProperty` value as a key
+    // 2. Should be used for voiceover.
+    layers: [
+      'poi-scalerank4-l15',
+      'poi-scalerank4-l1',
+      'poi-scalerank3',
+      'poi-scalerank2',
+      'poi-scalerank1',
+      'poi-parks_scalerank4',
+      'rail-label'
+    ]
+  }));
+});
+```
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+source: example
diff --git a/example/example.css b/example/example.css
@@ -0,0 +1,18 @@
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+button {
+  background: transparent;
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border-radius: 0;
+  border: none;
+}
+
+.mapboxgl-accessibility-marker:focus {
+  border: 2px solid black;
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
+  <link href='example.css' rel='stylesheet'>
+</head>
+<body>
+  <script src='bundle.js'></script>
+</body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,33 @@
+import mapboxgl from 'mapbox-gl'
+import MapboxAccessibility from '../'
+
+mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';
+
+const div = document.body.appendChild(document.createElement('div'));
+div.style.position = 'absolute';
+div.style.top = 0;
+div.style.right = 0;
+div.style.left = 0;
+div.style.bottom = 0;
+
+const map = new mapboxgl.Map({
+  container: div,
+  style: 'mapbox://styles/mapbox/streets-v9',
+  center: [-79.387, 43.656],
+  zoom: 13.5
+});
+
+map.on('load', () => {
+  map.addControl(new MapboxAccessibility({
+    accessibleLabelProperty: 'name',
+    layers: [
+      'poi-scalerank4-l15',
+      'poi-scalerank4-l1',
+      'poi-scalerank3',
+      'poi-scalerank2',
+      'poi-scalerank1',
+      'poi-parks_scalerank4',
+      'rail-label'
+    ]
+  }));
+});
diff --git a/index.js b/index.js
@@ -0,0 +1,69 @@
+'use strict';
+
+import xtend from 'xtend';
+
+export default class MapboxAccessibility {
+  constructor(options) {
+    const defaultOptions = {
+      width: 24,
+      height: 24
+    };
+
+    if (!options && !options.layers) {
+      throw new Error('An array of layers is required');
+    }
+
+    if (!options && !options.accessibleLabelProperty) {
+      throw new Error('a valid accessibleLabelProperty is required');
+    }
+
+    this.options = xtend(defaultOptions, options);
+  }
+
+  clearMarkers = () => {
+    if (this.features) {
+      this.features.forEach(feature => {
+        if (feature.marker) {
+          this.map.getCanvasContainer().removeChild(feature.marker);
+          delete feature.marker;
+        }
+      });
+    }
+  };
+
+  queryFeatures = () => {
+    this.features = this.map.queryRenderedFeatures({ layers: this.options.layers });
+    this.features.map((feature, index) => {
+      const { width, height } = this.options;
+      const position = this.map.project(feature.geometry.coordinates);
+
+      feature.marker = document.createElement('button');
+      feature.marker.setAttribute('aria-label', feature.properties[this.options.accessibleLabelProperty]);
+      feature.marker.setAttribute('tabindex', index);
+      feature.marker.style.display = 'block';
+      feature.marker.style.width = `${width}px`;
+      feature.marker.style.height = `${height}px`;
+      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;
+    });
+  };
+
+  onAdd(map) {
+    this.map = map;
+    this.queryFeatures();
+    this.map.on('moveend', this.queryFeatures);
+    this.map.on('movestart', this.clearMarkers);
+    this.container = document.createElement('div');
+    return this.container;
+  }
+
+  onRemove() {
+    this.container.parentNode.removeChild(this.container);
+    this.map.off('moveend', this.queryFeatures);
+    this.map.off('movestart', this.clearMarkers);
+    delete this.map;
+  }
+}