wip docs: add overlaid example

charlieforward9 · charlieforward9 · commit 8b5c3a9f8474 · 2025-02-02T15:24:24.000-05:00
diff --git a/examples/editable-layers/getting-started b/examples/editable-layers/getting-started
diff --git a/examples/editable-layers/overlaid/README.md b/examples/editable-layers/overlaid/README.md
@@ -0,0 +1,3 @@
+# Overlaid Editable Layers example
+
+This example demonstrates how to make use of the `editable-layers` module when using an overlaid configuration on the `react-map-gl` map.
diff --git a/examples/editable-layers/overlaid/app.tsx b/examples/editable-layers/overlaid/app.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {createRoot} from 'react-dom/client';
+
+import Example from './example';
+
+const container = document.createElement('div');
+
+if (document.body) {
+  document.body.style.margin = '0';
+  document.body.appendChild(container);
+
+  const root = createRoot(container);
+  root.render(<Example />);
+}
diff --git a/examples/editable-layers/overlaid/example.tsx b/examples/editable-layers/overlaid/example.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import {Map, useControl} from 'react-map-gl/maplibre';
+import {DeckProps} from 'deck.gl';
+import {MapboxOverlay} from '@deck.gl/mapbox';
+import {
+  DrawLineStringMode,
+  DrawPolygonMode,
+  EditableGeoJsonLayer
+} from '@deck.gl-community/editable-layers';
+
+function DeckGLOverlay(props: DeckProps) {
+  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
+  overlay.setProps(props);
+  return null;
+}
+
+export default function OverlaidEditable() {
+  const [features, setFeatures] = React.useState({
+    type: 'FeatureCollection',
+    features: []
+  });
+  const [mode, setMode] = React.useState(() => DrawPolygonMode);
+  const [selectedFeatureIndexes] = React.useState([]);
+
+  const layer = new EditableGeoJsonLayer({
+    data: features,
+    mode,
+    selectedFeatureIndexes,
+    onEdit: ({updatedData}) => {
+      //FIXME: this event is not fired...
+      console.log('updatedData', updatedData);
+      setFeatures(updatedData);
+    }
+  });
+
+  React.useEffect(() => {
+    console.log(`mode changed to ${mode.name}`);
+  }, [mode]);
+
+  return (
+    <div>
+      <Map
+        style={{width: '100%', height: 500}} //FIXME: unable to get height 100% to work
+        mapStyle={'https://demotiles.maplibre.org/style.json'}
+      >
+        <DeckGLOverlay layers={[layer]} />
+      </Map>
+      <div className="controls">
+        <button
+          className={`button ${mode === DrawLineStringMode ? 'active' : ''}`}
+          onClick={() => setMode(() => DrawLineStringMode)}
+        >
+          Line
+        </button>
+        <button
+          className={`button ${mode === DrawPolygonMode ? 'active' : ''}`}
+          onClick={() => setMode(() => DrawPolygonMode)}
+        >
+          Polygon
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/editable-layers/overlaid/index.html b/examples/editable-layers/overlaid/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>deck.gl Community Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://unpkg.com/maplibre-gl@^5.0.0/dist/maplibre-gl.css" rel="stylesheet" />
+  </head>
+  <body></body>
+  <script type="module" src="./app.tsx"></script>
+</html>
diff --git a/examples/editable-layers/overlaid/package.json b/examples/editable-layers/overlaid/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "deck.gl-community-editable-layers-examples-overlaid",
+  "type": "module",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "start": "vite --open",
+    "start-local": "vite --config ../../vite.config.local.mjs"
+  },
+  "dependencies": {
+    "@deck.gl-community/editable-layers": "^9.0.3",
+    "@deck.gl/mapbox": "^9.1.0",
+    "deck.gl": "^9.1",
+    "mapbox-gl": "^3.9.4",
+    "maplibre-gl": "^5.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-map-gl": "^7.1.9"
+  },
+  "devDependencies": {
+    "vite": "^6.0.11"
+  }
+}
diff --git a/examples/editable-layers/overlaid/tsconfig.json b/examples/editable-layers/overlaid/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/",
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["./"]
+}

Original file line number	Diff line number	Diff 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.