Mapbox geocoding search result in infobox

Question

I want to create a map where every time a user searches using a geocoder, an info box appears on top of the map with the attributes of the tileset underneath the geocoding result (point). I am able to trigger a pop up to appear every time geocoder is used, and was able to successfully make infobox appear whenever I click anywhere on the map using "map.queryRenderedFeatures", but trying to combine the two has been unsuccessful. It seems somehow map.queryRenderedFeatures doesn't like to work with the coordinates from the geocoding (geometry.coordinates). Could anyone help me?

<script>
    mapboxgl.accessToken = 'xxxxx';
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'xxxxx',
    center: [-95.925, 29.575],
    zoom: 7
    });


  var businessgeocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    zoom: 15,
    placeholder: 'Business location',
     marker: {
     color: 'red'
     },
    mapboxgl: mapboxgl
    })


  map.addControl(businessgeocoder);


 map.on('load', function() {
      businessgeocoder.on('result', function(resultinfobox) {
          
          
          var point = map.project([resultinfobox.result.center[0], resultinfobox.result.center[1]]); 
                  console.log([resultinfobox.result.center[0], resultinfobox.result.center[1]])
                  console.log(point)
          var test = map.queryRenderedFeatures(point, {
              layers: ['tract-4332-1sbuyl','blockgroups-4332-9mehvk'] 
              });
              if (!test.length) {
                 return;
                 }
               var censustracts = test[0];
               var censusblockgroups = test[1];
              
              console.log(censusblockgroups.properties.LMIPerc)
      });
    });
    

  
  
  map.on('click', function(clickinfobox) {
  var features = map.queryRenderedFeatures(clickinfobox.point, {
                 layers: ['tract-4332-1sbuyl','blockgroups-4332-9mehvk'] 
                 });

  if (!features.length) {
    return;
  }

  var censustract = features[0];
  var censusblockgroup = features[1];
  var popup = new mapboxgl.Popup({ offset: [0, -15] })
    .setLngLat(clickinfobox.lngLat)
    .setHTML('<h4>' + censustract.properties.CountyName + '</h4><h4>' + censustract.properties.NAMELSAD + '</h4><h4>' + censusblockgroup.properties.NAMELSAD + '</h4>' +
             '<table><tr><th></th><th>CT</th><th>BG</th></tr><tr><td>Poverty Rate</td><td>' 
             + censustract.properties.PovRate + "%" + '</td><td>' 
             + censusblockgroup.properties.PovRate + "%" + '</td></tr><tr><td>LMI</td><td>' 
             + censustract.properties.LMIPerc + "%" + '</td><td>' + censusblockgroup.properties.LMIPerc + "%" + '</td></tr></table>'
            )
    .addTo(map);
  });  
    

</script>

Steve Bennett Steve Bennett · Accepted Answer · 2020-07-29T12:50:45

I have fallen into this trap so many times.

map.queryRenderedFeatures() takes screen coordinates, in pixels. Not geographic coordinates in degrees.

You can use map.project(result.geometry.coordinates) to get the screen coordinates.

Mapbox geocoding search result in infobox

1 Answers