mapbox / mapbox/mapbox-gl-geocoder

Map is grey after a geocoding search

Open
#170 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged needs information
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
![capture d ecran 2018-11-23 a 11 07 53](https://user-images.githubusercontent.com/2973285/48938095-736f7680-ef10-11e8-93d9-f5e0f60ab0f5.png)

after a create a geocoder input and do a search
![capture d ecran 2018-11-23 a 11 08 37](https://user-images.githubusercontent.com/2973285/48938116-7cf8de80-ef10-11e8-9ce5-6636374f0276.png)

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.