mapbox / mapbox/mapbox-gl-geocoder
Map is grey after a geocoding search
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 388
- Forks
- 181
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
when a create a Geocoder html element **after** the map have already been loaded, the map turns grey after the geocoder search.
My use case: i have a Vue app where i first load the map when the user arrive on the view. In this view, the user have the possibility to open a form with the geocoder input (outside the map). So the creation of the geocoder input is made by a function that can or can't be called (if the user open the form or not).
See screenshot:
on page load, the map is displayed correctly

after a create a geocoder input and do a search

this is my Map class that i use (`init` is called when the view is loaded, and `getGeocoder` is called when required and the `htmlElement` is then inserted into the DOM.
```
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
export default new class Map {
constructor() {
mapboxgl.accessToken = 'myToken';
}
init() {
this.map = new mapboxgl.Map({
container: 'mapContainer',
style: 'mapbox://styles/mapbox/streets-v9',
zoom: 11,
center: [-74.006, 40.7128]
});
}
getGeocoder() {
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken
});
const htmlElement = geocoder.onAdd(this.map);
return { geocoder, htmlElement };
}
}();
```
What is also odd, is that when I load the view directly with the form open, the geocoder search works correctly. But when I open the form after some time, the geocoder search transform the map into grey.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reported init and getGeocoder entry points and reproduce the timing difference: initialize the map first, then create the MapboxGeocoder and call onAdd before searching. Compare that with loading the geocoder form immediately, using the provided Vue-style example as the reproduction. Done means a later geocoder creation and search no longer turns the map grey.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100