CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-gl
Samyar
Samyar

Reputation: 533

Mapbox buildings are separate, not connected or combined in the building layer

I wrote code to when user hovers over the buildings it should be highlighted but some buildings when i hover over them only a part of them get's highlighted.

Here is an example building in which one building can be hovered in 3 different ways and my desired result is the last one in which all the building is selected:

enter image description here

enter image description here

And here is the satellite image of the building:

enter image description here

I couldn't find a way to fix this so i did not try any solution.

Upvotes: -1

Views: 80

Answers (1)

Samyar
Samyar

Reputation: 533

OK so basically the idea is we find the overlapping buildings with the current hovered building or clicked building.

This is the end result i came up with:

/**
 * Get combined building features based on the current event features.
 *
 * @param map - Reference to the map instance.
 * @param currentEventFeatures - Array of features from the current event.
 * @returns Combined array of features including overlapped and connected buildings.
 */
export function getCombinedBuildingFeatures(
  map: MapRef,
  currentEventFeatures: Feature[]
) {
  const buildingFeatures = map?.queryRenderedFeatures({
    // @ts-expect-error
    layers: ['building'],
  })

  const coreOverlappedBuildings = filterBuildingsByOverlaps(
    buildingFeatures,
    currentEventFeatures
  )

  const connectedBuildings = filterBuildingsByOverlaps(
    buildingFeatures,
    coreOverlappedBuildings
  )

  const connectedSeconderBuildings = filterBuildingsByOverlaps(
    buildingFeatures,
    connectedBuildings
  )

  return [
    ...currentEventFeatures,
    ...coreOverlappedBuildings,
    ...connectedBuildings,
    ...connectedSeconderBuildings,
  ]
}

/**
 * Filter buildings based on overlaps with a set of features.
 *
 * @param buildingFeatures - Array of all building features.
 * @param featuresToCheck - Array of features to check for overlaps.
 * @returns Filtered array of building features that overlap with the specified features.
 */
export function filterBuildingsByOverlaps(
  buildingFeatures: Feature[],
  featuresToCheck: Feature[]
) {
  return buildingFeatures.filter((feature) => {
    if (!featuresToCheck) return false
    for (const overlapped of featuresToCheck) {
      if (turf.booleanOverlap(feature, overlapped)) {
        return true
      }
    }
    return false
  })
}

Upvotes: 0

Related Questions