mapbox / mapbox/mapbox-gl-draw
How to control the visilibilyt of the drawer?
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 612
- Avg merge
- 8d 9h
- Merged PRs (30d)
- 5
Description
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
```ts
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
```ts
export const updateFootPrintLayersVisibility = (
mapRef: React.MutableRefObject,
footPrintLayersRef: React.MutableRefObject,
drawRef: React.MutableRefObject,
footPrintGeometriesRef: React.MutableRefObject,
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"
})
}
```
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the issue's createFootPrintLayer and updateFootPrintLayersVisibility examples, then inspect the MapboxDraw integration points in this repository. Determine whether visibility can be controlled without deleting and recreating features; done would require a documented, reproducible approach or a clearly scoped repository change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100