add(examples) Interleaving deck.gl with MapboxOverlay (#8555)

visgl · Feb 29, 2024 · 5339730 · 5339730
1 parent a5eccec
commit 5339730
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 0 deletions.
diff --git a/examples/gallery/images/maplibre-overlay.jpg b/examples/gallery/images/maplibre-overlay.jpg
diff --git a/examples/gallery/src/maplibre-overlay.html b/examples/gallery/src/maplibre-overlay.html
@@ -0,0 +1,87 @@
+<html>
+  <head>
+    <title>Interleaving deck.gl with Maplibre Layers using MapboxOverlay</title>
+
+    <script src="https://unpkg.com/deck.gl@^9.0.0-beta.5/dist.min.js"></script>
+    <script src="https://unpkg.com/maplibre-gl@^3.0.0/dist/maplibre-gl.js"></script>
+
+    <link href="https://unpkg.com/maplibre-gl@^3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
+  </head>
+
+  <body style="margin:0"></body>
+
+  <script type="text/javascript">
+
+    const {MapboxOverlay, ScatterplotLayer, ArcLayer} = deck;
+
+    const map = new maplibregl.Map({
+      container: document.body,
+      style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+      center: [-122.4, 37.79],
+      zoom: 15,
+      pitch: 60
+    });
+
+    map.on('load', () => {
+      const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;
+
+      map.addLayer({
+        'id': '3d-buildings',
+        'source': 'carto',
+        'source-layer': 'building',
+        'filter': ['==', 'extrude', 'true'],
+        'type': 'fill-extrusion',
+        'minzoom': 15,
+        'paint': {
+            'fill-extrusion-color': '#aaa',
+
+            // use an 'interpolate' expression to add a smooth transition effect to the
+            // buildings as the user zooms in
+            'fill-extrusion-height': [
+                "interpolate", ["linear"], ["zoom"],
+                15, 0,
+                15.05, ["get", "height"]
+            ],
+            'fill-extrusion-base': [
+                "interpolate", ["linear"], ["zoom"],
+                15, 0,
+                15.05, ["get", "min_height"]
+            ],
+            'fill-extrusion-opacity': .6
+        }
+      }, firstLabelLayerId);
+
+      const deckOverlay = new MapboxOverlay({
+        interleaved: true,
+        layers: [
+          new ScatterplotLayer({
+            id: 'deckgl-circle',
+            data: [
+              {position: [-122.402, 37.79], color: [255, 0, 0], radius: 1000}
+            ],
+            getPosition: d => d.position,
+            getFillColor: d => d.color,
+            getRadius: d => d.radius,
+            opacity: 0.3,
+            beforeId: firstLabelLayerId
+          }),
+          new ArcLayer({
+            id: 'deckgl-arc',
+            data: [
+              {source: [-122.3998664, 37.7883697], target: [-122.400068, 37.7900503]}
+            ],
+            getSourcePosition: d => d.source,
+            getTargetPosition: d => d.target,
+            getSourceColor: [255, 208, 0],
+            getTargetColor: [0, 128, 255],
+            getWidth: 8
+          })
+        ]
+      });
+
+      map.addControl(deckOverlay);
+    });
+
+
+  </script>
+</html>