Mapbox mapbox-gl-geocoder container overlaps results

Question

I have 2 standard mapbox mapbox-gl-geocoder containers one over another. And when the search results from the first one appears in the drop down list, the second container overlays the results. I tried css z-index 1000 over li, ul etc., but nothing works. Now I ended up with

geocoderStart.on('results', function(ev) {
            document.getElementById('geocoderEnd').style.visibility = "hidden";
        });
        geocoderStart._inputEl.addEventListener('input', function (e) { document.getElementById('geocoderEnd').style.visibility = "hidden"; });
        geocoderStart._inputEl.addEventListener('blur', function (e) { document.getElementById('geocoderEnd').style.visibility = "visible"; });

but it is buggy. Is there a simple css way to overlay second input with li results? Thanks

My Code

const geocoderStart = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            countries: 'us',
            marker : false,
            flyTo : false,
            placeholder : "Starting point",
        });
        const geocoderEnd = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            countries: 'us',
            marker : false,
            flyTo : false,
            placeholder : "Destination point",
        });

        document.getElementById('geocoderEnd').appendChild(geocoderEnd.onAdd(map));
        document.getElementById('geocoderStart').appendChild(geocoderStart.onAdd(map));

Adriana Babakanian Adriana Babakanian · Accepted Answer · 2020-03-04T23:52:37

This can be fixed by adding the following CSS:

.mapboxgl-ctrl-geocoder:first-child {
  z-index: 1001;
}

to your implementation. When you add the geocoder instances to the map by executing

map.addControl(geocoderStart); 
map.addControl(geocoderEnd);

, two DOM elements with class="mapboxgl-ctrl-geocoder mapboxgl-ctrl" are added as children of the div with class="mapboxgl-ctrl-top-right" (unless an alternate position is specified when the MapboxGeocoder is instantiated). As shown in the source code for the mapbox-gl-geocoder plugin here, the z-index of the .suggestions class is 1000, so by setting the z-index of the geocoderStart object (the first child of the mapbox-ctrl-top-right DOM element) to 1001 with the above CSS, the suggestions dropdown of the geocoderStart will sit on top of the geocoderEnd.

Here is a JSFiddle demonstrating the solution in action: https://jsfiddle.net/njevh376/ (note that you will have to add your own Mapbox access token to view the result).

That being said, from the naming conventions being used in your code (namely geocoderStart, "Starting point", geocoderEnd, and "Destination point"), it looks like you are trying to implement a way to integrate geocoding and directions with your GL JS map. You could use the mapbox-gl-directions plugin instead of trying to re-implement a similar solution. As shown in this example, the plugin makes it easy to add this functionality to your map in just a few short lines of code. There are also several options for customization and extension of the plugin, as detailed here.

Mapbox mapbox-gl-geocoder container overlaps results

1 Answers