Mapbox GL js - Large polygons are clipped when I highlight the polygons by searching

Question

I have a trouble with Mapbox polygons. I have tried to highlight area polygons with search results. But the result polygons are clipped and I can't get correct polygons.

[Mapbox polygon highlight][1] [1]: https://i.stack.imgur.com/j6HWT.png

Here is my code part of searching polygons and highlight them.

const draw = new MapboxDraw({
  displayControlsDefault: false,
  controls: {
    polygon: true,
    trash: true,
    // combine_features : true,
    // uncombine_features : true,
  },
  // attributionControl: false,
  userProperties: true,
  defaultRadius: 10000,
  modes: {
    ...MapboxDraw.modes,
  }
});
...
map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [lng, lat],
      zoom: 4,
    });
map.addControl(draw);
....
map.addSource('state', {
  type: 'vector',
    url: 'mapbox://mapbox.boundaries-adm1-v3'
  });

map.addLayer({
    id: 'state',
    type: 'fill',
    source: 'state',
    'source-layer': 'boundaries_admin_1',
    paint: {
      'fill-outline-color': colors.source_outline,
      'fill-color': colors.source_fill,
      'fill-opacity': 0.4
    }
  });
...
geo.geocode('mapbox.places', searchAreaName, function (err, geoData) {
if(geoData) {
      const location = geoData.features[0].center;
      const pointer = map.current.project(new mapboxgl.LngLat(location[0], location[1]));
      console.log(pointer)
      const bbox = [
        [pointer.x - 0.2, pointer.y - 0.2],
        [pointer.x + 0.2, pointer.y + 0.2]
      ];
      const selectedFeatures = map.current.queryRenderedFeatures(pointer, {
        layers: ['state']
      });
      if(selectedFeatures[0]) {
        const draftPoly = selectedFeatures[0].geometry.coordinates;
        let draftFeatures = [];
        if(draftPoly.length == 1) {
          draftFeatures.push({
            'type': 'Feature',
            'properties': {'drawing_type': 'draft'},
            'geometry': {
              'type': 'Polygon',
              // These coordinates outline Maine.
              'coordinates': draftPoly
            }
          })
        } else {
          draftPoly.map((item)=>{
            draftFeatures.push({
              'type': 'Feature',
              'properties': {'drawing_type': 'draft'},
              'geometry': {
                'type': 'Polygon',
                // These coordinates outline Maine.
                'coordinates': item
              }
            })
          })
        }        

        draw.add(
          draftFeatures.length == 1 ? draftFeatures[0] : 
          {
            type: 'FeatureCollection',
            features: draftFeatures
          }
        );
        
      } else {
        console.log(':( Oops! Can not find the place you typed! > ', selectedFeatures[0])
      }
    }
  });   
})

I want solutions for this issue.

Answer 1

All vector features, including polygons, are cut at tile boundaries. So it's the wrong approach to find the feature that the user clicked on and then use that geometry elsewhere.

The normal way of doing this task is to find some identifying attribute of the feature the user clicked on, then use that to either:

1. Filter a secondary "highlight layer"
2. Cause the particular feature of the main layer to be highlighted, with a data-driven style

(I don't really understand why you're using Mapbox-GL-Draw here - it doesn't seem relevant to the task).

EDIT

Ok, so you really want to try editing one of these polygons.

You could try:

1. Use map.querySourceFeatures to find the other pieces of the polygon.
2. Use Turf's union function to join them together.