skorasaurus / mapbox-gl-accessibility

An accessibility control for Mapbox GL JS

Mapbox GL Accessibility Plugin

An accessibility control for mapbox-gl-js.

Note: This is a work in progress and we welcome contributions. See issues to learn what needs to be worked on!

Demo

1. Go to https://labs.mapbox.com/mapbox-gl-accessibility
2. Enable voice-over in your browser
3. Press tab to hear the result

Usage

// 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'
    ]
  }));
});

Developing

npm install & npm start

Visit http://localhost:9966/example/ to load the demo