Skip to content

Commit 8b5c3a9

Browse files
charlieforward9charlieforward9
committed
wip docs: add overlaid example
1 parent ef8739c commit 8b5c3a9

File tree

7 files changed

+125
-1
lines changed

7 files changed

+125
-1
lines changed

‎examples/editable-layers/getting-started‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/editable-layers/overlaid/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Overlaid Editable Layers example
2+
3+
This example demonstrates how to make use of the `editable-layers` module when using an overlaid configuration on the `react-map-gl` map.

‎examples/editable-layers/overlaid/app.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from 'react';
2+
import {createRoot} from 'react-dom/client';
3+
4+
import Example from './example';
5+
6+
const container = document.createElement('div');
7+
8+
if (document.body) {
9+
document.body.style.margin = '0';
10+
document.body.appendChild(container);
11+
12+
const root = createRoot(container);
13+
root.render(<Example />);
14+
}

‎examples/editable-layers/overlaid/example.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import {Map, useControl} from 'react-map-gl/maplibre';
3+
import {DeckProps} from 'deck.gl';
4+
import {MapboxOverlay} from '@deck.gl/mapbox';
5+
import {
6+
DrawLineStringMode,
7+
DrawPolygonMode,
8+
EditableGeoJsonLayer
9+
} from '@deck.gl-community/editable-layers';
10+
11+
function DeckGLOverlay(props: DeckProps) {
12+
const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
13+
overlay.setProps(props);
14+
return null;
15+
}
16+
17+
export default function OverlaidEditable() {
18+
const [features, setFeatures] = React.useState({
19+
type: 'FeatureCollection',
20+
features: []
21+
});
22+
const [mode, setMode] = React.useState(() => DrawPolygonMode);
23+
const [selectedFeatureIndexes] = React.useState([]);
24+
25+
const layer = new EditableGeoJsonLayer({
26+
data: features,
27+
mode,
28+
selectedFeatureIndexes,
29+
onEdit: ({updatedData}) => {
30+
//FIXME: this event is not fired...
31+
console.log('updatedData', updatedData);
32+
setFeatures(updatedData);
33+
}
34+
});
35+
36+
React.useEffect(() => {
37+
console.log(`mode changed to ${mode.name}`);
38+
}, [mode]);
39+
40+
return (
41+
<div>
42+
<Map
43+
style={{width: '100%', height: 500}} //FIXME: unable to get height 100% to work
44+
mapStyle={'https://demotiles.maplibre.org/style.json'}
45+
>
46+
<DeckGLOverlay layers={[layer]} />
47+
</Map>
48+
<div className="controls">
49+
<button
50+
className={`button ${mode === DrawLineStringMode ? 'active' : ''}`}
51+
onClick={() => setMode(() => DrawLineStringMode)}
52+
>
53+
Line
54+
</button>
55+
<button
56+
className={`button ${mode === DrawPolygonMode ? 'active' : ''}`}
57+
onClick={() => setMode(() => DrawPolygonMode)}
58+
>
59+
Polygon
60+
</button>
61+
</div>
62+
</div>
63+
);
64+
}

‎examples/editable-layers/overlaid/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>deck.gl Community Example</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link href="https://unpkg.com/maplibre-gl@^5.0.0/dist/maplibre-gl.css" rel="stylesheet" />
8+
</head>
9+
<body></body>
10+
<script type="module" src="./app.tsx"></script>
11+
</html>

‎examples/editable-layers/overlaid/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "deck.gl-community-editable-layers-examples-overlaid",
3+
"type": "module",
4+
"private": true,
5+
"license": "MIT",
6+
"scripts": {
7+
"start": "vite --open",
8+
"start-local": "vite --config ../../vite.config.local.mjs"
9+
},
10+
"dependencies": {
11+
"@deck.gl-community/editable-layers": "^9.0.3",
12+
"@deck.gl/mapbox": "^9.1.0",
13+
"deck.gl": "^9.1",
14+
"mapbox-gl": "^3.9.4",
15+
"maplibre-gl": "^5.0.0",
16+
"react": "^18.3.1",
17+
"react-dom": "^18.3.1",
18+
"react-map-gl": "^7.1.9"
19+
},
20+
"devDependencies": {
21+
"vite": "^6.0.11"
22+
}
23+
}

‎examples/editable-layers/overlaid/tsconfig.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"extends": "../../../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "dist/",
5+
"skipLibCheck": true,
6+
"resolveJsonModule": true
7+
},
8+
"exclude": ["node_modules", "dist"],
9+
"include": ["./"]
10+
}

0 commit comments

Comments
 (0)