DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix(carto): render GeoJSON layers after map style changes

Browse source
This commit is contained in:
Paul Chavard 2022-03-18 15:29:45 +01:00
parent f033194ffa
commit af166f5520
1 changed files with 57 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
app/javascript/components/MapReader/components/GeoJSONLayer.tsx
View file

@ -144,20 +144,24 @@ function LineStringLayer({
const sourceId = String(feature.properties?.id); const sourceId = String(feature.properties?.id);
const layerId = `${sourceId}-layer`; const layerId = `${sourceId}-layer`;
useEffect(() => { const render = () => {
map if (!map.getSource(sourceId)) {
.addSource(sourceId, { map
type: 'geojson', .addSource(sourceId, {
data: feature type: 'geojson',
}) data: feature
.addLayer({ })
id: layerId, .addLayer({
source: sourceId, id: layerId,
type: 'line', source: sourceId,
paint: lineStringSelectionLine type: 'line',
}); paint: lineStringSelectionLine
}, [map, layerId, sourceId, feature]); });
}
};
useEffect(render, [map, layerId, sourceId, feature]);
useMapEvent('styledata', render);
useMapEvent('mouseenter', onMouseEnter, layerId); useMapEvent('mouseenter', onMouseEnter, layerId);
useMapEvent('mouseleave', onMouseLeave, layerId); useMapEvent('mouseleave', onMouseLeave, layerId);
@ -177,20 +181,24 @@ function PointLayer({
const sourceId = String(feature.properties?.id); const sourceId = String(feature.properties?.id);
const layerId = `${sourceId}-layer`; const layerId = `${sourceId}-layer`;
useEffect(() => { const render = () => {
map if (!map.getSource(sourceId)) {
.addSource(sourceId, { map
type: 'geojson', .addSource(sourceId, {
data: feature type: 'geojson',
}) data: feature
.addLayer({ })
id: layerId, .addLayer({
source: sourceId, id: layerId,
type: 'circle', source: sourceId,
paint: pointSelectionCircle type: 'circle',
}); paint: pointSelectionCircle
}, [map, layerId, sourceId, feature]); });
}
};
useEffect(render, [map, layerId, sourceId, feature]);
useMapEvent('styledata', render);
useMapEvent('mouseenter', onMouseEnter, layerId); useMapEvent('mouseenter', onMouseEnter, layerId);
useMapEvent('mouseleave', onMouseLeave, layerId); useMapEvent('mouseleave', onMouseLeave, layerId);
@ -211,26 +219,30 @@ function PolygonLayer({
const layerId = `${sourceId}-layer`; const layerId = `${sourceId}-layer`;
const lineLayerId = `${sourceId}-line-layer`; const lineLayerId = `${sourceId}-line-layer`;
useEffect(() => { const render = () => {
map if (!map.getSource(sourceId)) {
.addSource(sourceId, { map
type: 'geojson', .addSource(sourceId, {
data: feature type: 'geojson',
}) data: feature
.addLayer({ })
id: lineLayerId, .addLayer({
source: sourceId, id: lineLayerId,
type: 'line', source: sourceId,
paint: polygonSelectionLine type: 'line',
}) paint: polygonSelectionLine
.addLayer({ })
id: layerId, .addLayer({
source: sourceId, id: layerId,
type: 'fill', source: sourceId,
paint: polygonSelectionFill type: 'fill',
}); paint: polygonSelectionFill
}, [map, layerId, lineLayerId, sourceId, feature]); });
}
};
useEffect(render, [map, layerId, lineLayerId, sourceId, feature]);
useMapEvent('styledata', render);
useMapEvent('mouseenter', onMouseEnter, layerId); useMapEvent('mouseenter', onMouseEnter, layerId);
useMapEvent('mouseleave', onMouseLeave, layerId); useMapEvent('mouseleave', onMouseLeave, layerId);