[docs] Interleaved example on v9.1

docs/whats-new.md

@@ -6,16 +6,18 @@ Please refer the documentation of each module for detailed news, e.g:
 
 - [`graph-layers`](/docs/modules/graph-layers#whats-new)
 - [`arrow-layers`](/docs/modules/arrow-layers#whats-new)
-- [`editable-layers`](/docs/modules/editable-layers#uhats-new)
+- [`editable-layers`](/docs/modules/editable-layers#whats-new)
 - [`layers`](/docs/modules/editable-layers#whats-new)
 
 ## High-Level updates
 
+February 8, 2025: [**`@deck.gl-community/layers`**](/docs/modules/layers) v9.1 - deck.gl community-layers now support deck.gl v9.1.
+
 November 20, 2024 [**`@deck.gl-community/editable-layers`**](/docs/modules/editable-layers)) - When drawing circles or ellipses properties of the created geometry are now stored in the vector's properties.
 
 April 15, 2024: [**`@deck.gl-community/editable-layers`**](/docs/modules/editable-layers)) v9 - This new layer pack is a fork of Uber's [nebula.gl](https://nebula.gl) framework which is no longer maintained. nebula.gl has been an important part of the deck.gl ecosystem but the repository has lacked maintainers for several years and the repository no longer accepts external contributions.
 
-Feb 29, 2024: [**`@deck.gl-community/layers`**](/docs/modules/layers) v9 - deck,gl community-layers now support deck.gl v9.
+Feb 29, 2024: [**`@deck.gl-community/layers`**](/docs/modules/layers) v9 - deck.gl community-layers now support deck.gl v9.
 
 December 22, 2023: [**`@deck.gl-community/layers`**](/docs/modules/layers) v0 - A new module intended to containing a collection of useful community layers. Initial layers are `TileSourceLayer`, `DataDrivenTile3DLayer`.
 

examples/editable-layers/interleaved/README.md

@@ -0,0 +1,3 @@
+# Interleaved Editable Layers example
+
+This example demonstrates how to make use of the `editable-layers` module when using an interleaved configuration on the `react-map-gl` map.

examples/editable-layers/interleaved/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 />);
+}

examples/editable-layers/interleaved/example.tsx

@@ -0,0 +1,69 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+import React from 'react';
+import {Map, useControl, NavigationControl} from 'react-map-gl/maplibre';
+import {MapboxOverlay, type MapboxOverlayProps} from '@deck.gl/mapbox';
+import {
+  DrawLineStringMode,
+  DrawPolygonByDraggingMode,
+  DrawPolygonMode,
+  EditableGeoJsonLayer,
+  EditAction,
+  type GeoJsonEditMode,
+  type FeatureCollection
+} from '@deck.gl-community/editable-layers';
+
+function DeckGLOverlay(props: MapboxOverlayProps) {
+  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
+  overlay.setProps(props);
+  return null;
+}
+
+export default function App() {
+  const [features, setFeatures] = React.useState<FeatureCollection>({
+    type: 'FeatureCollection',
+    features: []
+  });
+  const [mode, setMode] = React.useState<GeoJsonEditMode>(() => DrawPolygonMode);
+
+  const layer = new EditableGeoJsonLayer({
+    data: features,
+    mode,
+    selectedFeatureIndexes: [],
+    onEdit: ({updatedData}: EditAction<FeatureCollection>) => setFeatures(updatedData)
+  });
+
+  return (
+    <div>
+      <Map
+        style={{width: '100%', height: 500}}
+        mapStyle={'https://demotiles.maplibre.org/style.json'}
+        dragPan={mode !== DrawPolygonByDraggingMode}
+        dragRotate={mode !== DrawPolygonByDraggingMode}
+      >
+        {/* this will fail with interleaved={false}, issue reported in https://github.com/visgl/deck.gl-community/issues/237 */}
+        <DeckGLOverlay layers={[layer]} interleaved={false} />
+        <NavigationControl />
+      </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>
+        <button
+          className={`button ${mode === DrawPolygonByDraggingMode ? 'active' : ''}`}
+          onClick={() => setMode(() => DrawPolygonByDraggingMode)}
+        >
+          Lasso
+        </button>
+      </div>
+    </div>
+  );
+}

examples/editable-layers/interleaved/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>

examples/editable-layers/interleaved/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "deck.gl-community-editable-layers-examples-interleaved",
+  "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.1.0-beta.5",
+    "@deck.gl/mapbox": "^9.1.0",
+    "deck.gl": "^9.1.0",
+    "maplibre-gl": "^4.7.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-map-gl": "^7.1.9"
+  },
+  "devDependencies": {
+    "vite": "^6.0.11"
+  }
+}

examples/editable-layers/interleaved/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/",
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["./"]
+}

examples/graph-layers/graph-viewer/package.json

@@ -9,7 +9,7 @@
     "start-local": "vite --config ../vite.config.local.mjs"
   },
   "dependencies": {
-    "@deck.gl-community/graph-layers": "9.0.2",
+    "@deck.gl-community/graph-layers": "9.1.0-beta.0",
     "@deck.gl-community/react": "9.0.2",
     "deck.gl": "^9.0.0"
   },

modules/editable-layers/package.json

@@ -67,11 +67,12 @@
     "eventemitter3": "^5.0.0",
     "lodash.omit": "^4.1.1",
     "lodash.throttle": "^4.1.1",
+    "mjolnir.js": "^3.0.0",
     "uuid": "9.0.0",
     "viewport-mercator-project": ">=6.2.3"
   },
   "peerDependencies": {
-    "@deck.gl-community/layers": "^9.1.0-beta.2",
+    "@deck.gl-community/layers": "^9.1.0-beta.5",
     "@deck.gl/core": "^9.1.0",
     "@deck.gl/extensions": "^9.1.0",
     "@deck.gl/geo-layers": "^9.1.0",

modules/template/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "description": "Project description",
   "license": "MIT",
-  "version": "0.0.4",
+  "version": "0.0.0",
   "_publishConfig": {
     "access": "public"
   },

package.json

@@ -62,7 +62,8 @@
   },
   "resolutions": {
     "react": "18.2.0",
-    "typescript": "^5.4.0"
+    "typescript": "^5.4.0",
+    "mjolnir.js": "3.0.0"
   },
   "volta": {
     "node": "20.11.1",