chore(examples) Add interleaved mapbox-overlay to gallery (#8556)

* chore(examples) Use maplibre in MapboxLayer gallery * fix 3d building height in maplibre examples * chore(gallery) add mapbox-overlay example --------- Signed-off-by: Chris Gervang <[email protected]>
visgl · Mar 6, 2024 · ef324f8 · ef324f8
1 parent 2e0fd4a
commit ef324f8
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 22 deletions.
diff --git a/docs/developer-guide/base-maps/using-with-mapbox.md b/docs/developer-guide/base-maps/using-with-mapbox.md
@@ -2,7 +2,7 @@
 
 | Pure JS | React | Overlaid | Interleaved |
 | ----- | ----- | ----- | ----- |
-|  ✓ | ✓ | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/mapbox) | [example](https://deck.gl/gallery/mapbox-layer) |
+|  ✓ | ✓ | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/mapbox) | [example](https://deck.gl/gallery/mapbox-overlay) |
 
 [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) is a powerful open-source map renderer from [Mapbox](https://mapbox.com). deck.gl's `MapView` is designed to sync perfectly with the camera of Mapbox, at every zoom level and rotation angle.
 

diff --git a/docs/get-started/using-with-map.md b/docs/get-started/using-with-map.md
@@ -23,8 +23,8 @@ There are two types of integration between deck.gl and a base map renderer:
 | [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/deckgl-overlay-view) | ✓ | ✓ | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/google-maps) | [example](https://developers.google.com/maps/documentation/javascript/examples/deckgl-tripslayer) | [link](../developer-guide/base-maps/using-with-google-maps.md) |
 | [harp.gl](https://www.harp.gl/) | ✓ | | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/harp.gl) |  | |
 | [Leaflet](https://leafletjs.com/) | ✓ | | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/leaflet) |  | |
-| [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/) | ✓ | ✓ | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/maplibre) | [example](https://deck.gl/gallery/mapbox-layer) | [link](../developer-guide/base-maps/using-with-mapbox.md) |
-| [MapLibre GL JS](https://maplibre.org/maplibre-gl-js-docs/api/) | ✓ | ✓ | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/maplibre) | [example](https://deck.gl/gallery/mapbox-layer) | [link](../developer-guide/base-maps/using-with-mapbox.md#compatibility-with-mapbox-gl-js-forks) |
+| [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/) | ✓ | ✓ | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/mapbox) | [example](https://deck.gl/gallery/mapbox-overlay) | [link](../developer-guide/base-maps/using-with-mapbox.md) |
+| [MapLibre GL JS](https://maplibre.org/maplibre-gl-js-docs/api/) | ✓ | ✓ | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/mapbox) | [example](https://deck.gl/gallery/maplibre-overlay) | [link](../developer-guide/base-maps/using-with-mapbox.md#compatibility-with-mapbox-gl-js-forks) |
 | [OpenLayers](https://openlayers.org/) | ✓ | | [example](https://github.com/visgl/deck.gl/tree/master/examples/get-started/pure-js/openlayers) |  | |
 
 It is also important to understand the difference between the JS library that renders the map and the map data provider. For example, you can use Mapbox GL JS with the Mapbox service, but also with any other service that hosts Mapbox Vector Tiles. When using a base map, be sure to follow the terms and conditions, as well as the attribution requirements of both the JS library and the data provider.
diff --git a/examples/gallery/images/mapbox-layer.jpg → examples/gallery/images/maplibre-layer.jpg b/examples/gallery/images/mapbox-layer.jpg → examples/gallery/images/maplibre-layer.jpg
diff --git a/examples/gallery/src/mapbox-overlay.html b/examples/gallery/src/mapbox-overlay.html
@@ -0,0 +1,90 @@
+<html>
+  <head>
+    <title>Interleaving deck.gl with Mapbox 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/mapbox-gl@^3.0.0/dist/mapbox-gl.js"></script>
+
+    <link href="https://unpkg.com/mapbox-gl@^3.0.0/dist/mapbox-gl.css" rel="stylesheet" />
+  </head>
+
+  <body style="margin:0"></body>
+
+  <script type="text/javascript">
+
+    const {MapboxOverlay, ScatterplotLayer, ArcLayer} = deck;
+
+    mapboxgl.accessToken = '<mapbox-access-token>';
+
+    const map = new mapboxgl.Map({
+      container: document.body,
+      style: 'mapbox://styles/mapbox/light-v9',
+      center: [-122.4, 37.79],
+      zoom: 15,
+      pitch: 60,
+      antialias: true
+    });
+
+    map.on('load', () => {
+      const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;
+
+      map.addLayer({
+        'id': '3d-buildings',
+        'source': 'composite',
+        '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>
diff --git a/examples/gallery/src/mapbox-layer.html → examples/gallery/src/maplibre-layer.html b/examples/gallery/src/mapbox-layer.html → examples/gallery/src/maplibre-layer.html
@@ -1,10 +1,11 @@
 <html>
   <head>
-    <title>Interleaving deck.gl with Mapbox Layers</title>
-    <script src="https://unpkg.com/deck.gl@^8.8.0/dist.min.js"></script>
-    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
+    <title>Interleaving deck.gl with Maplibre Layers using MapboxLayer</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://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
+    <link href="https://unpkg.com/maplibre-gl@^3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
   </head>
 
   <body style="margin:0"></body>
@@ -13,24 +14,24 @@
 
     const {MapboxLayer, ScatterplotLayer, ArcLayer} = deck;
 
-    mapboxgl.accessToken = '<mapbox-access-token>';
-
-    const map = new mapboxgl.Map({
+    const map = new maplibregl.Map({
       container: document.body,
-      style: 'mapbox://styles/mapbox/light-v9',
+      style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
       center: [-122.4, 37.79],
       zoom: 15,
-      pitch: 60
+      pitch: 60,
+      antialias: true
     });
 
-    map.on('load', () => {
+    map.on('style.load', () => {
       const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;
 
+      map.removeLayer('building')
+      map.removeLayer('building-top')
       map.addLayer({
         'id': '3d-buildings',
-        'source': 'composite',
+        'source': 'carto',
         'source-layer': 'building',
-        'filter': ['==', 'extrude', 'true'],
         'type': 'fill-extrusion',
         'minzoom': 15,
         'paint': {
@@ -41,12 +42,12 @@
             'fill-extrusion-height': [
                 "interpolate", ["linear"], ["zoom"],
                 15, 0,
-                15.05, ["get", "height"]
+                15.05, ["get", "render_height"]
             ],
             'fill-extrusion-base': [
                 "interpolate", ["linear"], ["zoom"],
                 15, 0,
-                15.05, ["get", "min_height"]
+                15.05, ["get", "render_min_height"]
             ],
             'fill-extrusion-opacity': .6
         }

diff --git a/examples/gallery/src/maplibre-overlay.html b/examples/gallery/src/maplibre-overlay.html
@@ -19,17 +19,19 @@
       style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
       center: [-122.4, 37.79],
       zoom: 15,
-      pitch: 60
+      pitch: 60,
+      antialias: true
     });
 
-    map.on('load', () => {
+    map.on('style.load', () => {
       const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;
 
+      map.removeLayer('building')
+      map.removeLayer('building-top')
       map.addLayer({
         'id': '3d-buildings',
         'source': 'carto',
         'source-layer': 'building',
-        'filter': ['==', 'extrude', 'true'],
         'type': 'fill-extrusion',
         'minzoom': 15,
         'paint': {
@@ -40,12 +42,12 @@
             'fill-extrusion-height': [
                 "interpolate", ["linear"], ["zoom"],
                 15, 0,
-                15.05, ["get", "height"]
+                15.05, ["get", "render_height"]
             ],
             'fill-extrusion-base': [
                 "interpolate", ["linear"], ["zoom"],
                 15, 0,
-                15.05, ["get", "min_height"]
+                15.05, ["get", "render_min_height"]
             ],
             'fill-extrusion-opacity': .6
         }