This repository has been archived by the owner on Sep 21, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 3a2d6b6
Showing
8 changed files
with
5,740 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' | ||
] | ||
})); | ||
}); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
source: example |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' | ||
] | ||
})); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} |
Oops, something went wrong.