Cannot access Geolocate Control in Mapbox GL JS to change/add attributes

1
votes

Simple question: what selector is needed to access the Geolocate Control in Mapbox GL JS?

You can easily get access to all the various map controls to add attributes such as title tags, accessibility tags (aria-label, etc) and even to enable bootstrap tooltips and data-toggles and so forth.

However,I have not been able to get access to the Geolocate Control, either through straight javascript or jquery, despite using a wide variety of attempted selectors. It simply doesn't respond to anything that I've tried.

Below is a jsfiddle showing the situation. This is the simple case of adding title attributes. I show it successfully on the navigation controls, then unsuccessfully on the geolocate control.

Is this just some obvious selector error, or is there something fundamentally different about the geolocate control that I'm missing? Or is this a bug? https://jsfiddle.net/5413yjmr/

Works:

document.querySelector('.mapboxgl-ctrl-compass').setAttribute('title', 'Compass Control');

Doesn't Work:

document.querySelector('.mapboxgl-ctrl-geolocate').setAttribute('title', 'Find My Current Location');

Also doesn't work:

document.querySelector('.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate').setAttribute('title', 'Find My Current Location');

I've also gone fairly crazy trying all kinds of different selectors, using jquery to get to them, etc.

2
javascriptjquerymapboxmapbox-gl-js
PS. The aria-label should already be set on the GeolocateControl button. – AndrewHarvey
Yes, but that label simply says "Geolocate" which isn't exactly user friendly... also I'd like to add more attributes than just that. – Jason
Please consider submitting a pull request on GitHub to change this to something better. – AndrewHarvey

2 Answers

0
votes

The GeolocateControl UI Button is only setup after the async response of if the browser supports geolocation, so it's not immediately available in the DOM.

https://github.com/mapbox/mapbox-gl-js/blob/d78b2d1cb162388fd16c4b3607cd2f27bd333a5f/src/ui/control/geolocate_control.js#L120

The control doesn't fire any events when the UI is ready so your only option is to keep checking via a poll every 100ms or so.

I'd suggest you open a ticket at https://github.com/mapbox/mapbox-gl-js/issues to get this addressed in Mapbox GL JS.

PS. I'd also suggest you open a ticket about the title attributes, this sounds like a good idea that should be done automatically.

0
votes

I've just had a similar issue and I've found this way to access mapbox navigation control styles and attributes. In my case, I've used it to change the style, but we can access the DOM attributes too:

let geoCoder = map.addControl(
                    new MapboxGeocoder({
                        accessToken: mapboxgl.accessToken,
                        countries: 'us',
                        marker: false,
                    }),
                    'top-right'
                )

                let geoCoderCtrl = geoCoder._controls[2].container
                if (geoCoderCtrl) {
                    geoCoderCtrl.style.boxShadow = 'none'
                }