How to control the visilibilyt of the drawer?

[alamenai]

Hi everyone, I have create a polygon with this plugin and I want to control its visibility without adding and deleting each time as I did, do you have any suggestions:

Create the polygons

const createFootPrintLayer = (parsedGeometry: any, index: number, draw: MapboxDraw): LayerIds => {
  const featureIds = draw.add({
    id: `footprint-layer-${index}`,
    type: "Feature",
    geometry: parsedGeometry,
    properties: {
      isFootprint: true,
      buildingIndex: index,
    },
  })

  return { sourceId: featureIds[0], layerId: featureIds[0] }
}

Control the visibility

export const updateFootPrintLayersVisibility = (
  mapRef: React.MutableRefObject<mapboxgl.Map | null>,
  footPrintLayersRef: React.MutableRefObject<AreaLayers>,
  drawRef: React.MutableRefObject<MapboxDraw | null>,
  footPrintGeometriesRef: React.MutableRefObject<FootPrintGeometry[]>,
  isVisible: boolean
): void => {
  const map = mapRef.current
  const draw = drawRef.current
  if (!map || !draw) return

  // Clear existing draw features
  if (footPrintLayersRef.current.drawFeatureIds) {
    footPrintLayersRef.current.drawFeatureIds.forEach((featureId) => {
      try {
        draw.delete(featureId)
      } catch (error) {
        // Feature might already be deleted
      }
    })
  }

  if (isVisible && footPrintGeometriesRef.current.length > 0) {
    // Recreate the footprint layers WITHOUT recreating building index layers
    const { drawFeatureIds } = createFootPrintLayers(
      map,
      footPrintGeometriesRef.current,
      footPrintLayersRef,
      draw,
      isVisible,
      false // Don't recreate building index layers
    )

    // Update the ref with new IDs
    footPrintLayersRef.current.drawFeatureIds = drawFeatureIds
  } else {
    // Just update visibility of existing building index layers
    footPrintGeometriesRef.current.forEach((_, index) => {
      updateBuildingIndexLayerVisibility(map, index, isVisible)
    })
  }

  // Handle markers
  footPrintLayersRef.current?.markers?.forEach((marker) => {
    marker.getElement().style.display = isVisible ? "block" : "none"
  })
}