From 3bad59b9941d19c71fe42262cfefb78df40a764a Mon Sep 17 00:00:00 2001 From: Chris Gervang <chris@gervang.com> Date: Tue, 27 Feb 2024 15:13:51 -0800 Subject: [PATCH 1/7] chore(examples) Use maplibre in MapboxLayer gallery Signed-off-by: Chris Gervang <chris@gervang.com> --- examples/gallery/src/mapbox-layer.html | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/examples/gallery/src/mapbox-layer.html b/examples/gallery/src/mapbox-layer.html index f692d3915cf..4b9c2b655d2 100644 --- a/examples/gallery/src/mapbox-layer.html +++ b/examples/gallery/src/mapbox-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 Mapbox 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,11 +14,9 @@ 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 @@ -28,7 +27,7 @@ map.addLayer({ 'id': '3d-buildings', - 'source': 'composite', + 'source': 'carto', 'source-layer': 'building', 'filter': ['==', 'extrude', 'true'], 'type': 'fill-extrusion', From 50c51c26799b9b70f51db51ae0127466d1bcafbc Mon Sep 17 00:00:00 2001 From: Chris Gervang <chris@gervang.com> Date: Wed, 28 Feb 2024 11:13:14 -0800 Subject: [PATCH 2/7] chore(examples) rename mapbox to maplibre in gallery Signed-off-by: Chris Gervang <chris@gervang.com> --- .../images/{mapbox-layer.jpg => maplibre-layer.jpg} | Bin .../src/{mapbox-layer.html => maplibre-layer.html} | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename examples/gallery/images/{mapbox-layer.jpg => maplibre-layer.jpg} (100%) rename examples/gallery/src/{mapbox-layer.html => maplibre-layer.html} (96%) diff --git a/examples/gallery/images/mapbox-layer.jpg b/examples/gallery/images/maplibre-layer.jpg similarity index 100% rename from examples/gallery/images/mapbox-layer.jpg rename to examples/gallery/images/maplibre-layer.jpg diff --git a/examples/gallery/src/mapbox-layer.html b/examples/gallery/src/maplibre-layer.html similarity index 96% rename from examples/gallery/src/mapbox-layer.html rename to examples/gallery/src/maplibre-layer.html index 4b9c2b655d2..caf77d93ac9 100644 --- a/examples/gallery/src/mapbox-layer.html +++ b/examples/gallery/src/maplibre-layer.html @@ -1,6 +1,6 @@ <html> <head> - <title>Interleaving deck.gl with Mapbox Layers using MapboxLayer</title> + <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> From 5c1a2d02a3c68ebb5d1cfe621521c072b1406a64 Mon Sep 17 00:00:00 2001 From: Chris Gervang <chris@gervang.com> Date: Wed, 28 Feb 2024 17:37:18 -0800 Subject: [PATCH 3/7] chore(examples) rename mapbox to maplibre in links Signed-off-by: Chris Gervang <chris@gervang.com> --- docs/developer-guide/base-maps/using-with-mapbox.md | 2 +- docs/get-started/using-with-map.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/developer-guide/base-maps/using-with-mapbox.md b/docs/developer-guide/base-maps/using-with-mapbox.md index 6e49c28cfe8..837d362c3c3 100644 --- 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/maplibre-layer) | [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 index 19cbace7afe..e88eee2e7a0 100644 --- 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/mapbox) | [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/mapbox) | [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/maplibre-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/mapbox) | [example](https://deck.gl/gallery/maplibre-layer) | [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. From 4609d50de973c1e5f822b642dd0d096ffd38d0d0 Mon Sep 17 00:00:00 2001 From: Chris Gervang <chris@gervang.com> Date: Thu, 29 Feb 2024 16:24:00 -0800 Subject: [PATCH 4/7] fix 3d building height Signed-off-by: Chris Gervang <chris@gervang.com> --- examples/gallery/src/maplibre-layer.html | 5 ++--- examples/gallery/src/maplibre-overlay.html | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/examples/gallery/src/maplibre-layer.html b/examples/gallery/src/maplibre-layer.html index caf77d93ac9..202002730c7 100644 --- a/examples/gallery/src/maplibre-layer.html +++ b/examples/gallery/src/maplibre-layer.html @@ -29,7 +29,6 @@ 'id': '3d-buildings', 'source': 'carto', 'source-layer': 'building', - 'filter': ['==', 'extrude', 'true'], 'type': 'fill-extrusion', 'minzoom': 15, 'paint': { @@ -40,12 +39,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 index ead61805afa..800a05c7056 100644 --- a/examples/gallery/src/maplibre-overlay.html +++ b/examples/gallery/src/maplibre-overlay.html @@ -29,7 +29,6 @@ 'id': '3d-buildings', 'source': 'carto', 'source-layer': 'building', - 'filter': ['==', 'extrude', 'true'], 'type': 'fill-extrusion', 'minzoom': 15, 'paint': { @@ -40,12 +39,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 } From 573b194e8b4803f0fd8ce582919efcbad8f7fbd4 Mon Sep 17 00:00:00 2001 From: Chris Gervang <chris@gervang.com> Date: Thu, 29 Feb 2024 16:39:31 -0800 Subject: [PATCH 5/7] remove 2d building layer Signed-off-by: Chris Gervang <chris@gervang.com> --- examples/gallery/src/maplibre-layer.html | 4 +++- examples/gallery/src/maplibre-overlay.html | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/gallery/src/maplibre-layer.html b/examples/gallery/src/maplibre-layer.html index 202002730c7..9e3af59627a 100644 --- a/examples/gallery/src/maplibre-layer.html +++ b/examples/gallery/src/maplibre-layer.html @@ -22,9 +22,11 @@ pitch: 60 }); - 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', diff --git a/examples/gallery/src/maplibre-overlay.html b/examples/gallery/src/maplibre-overlay.html index 800a05c7056..3a2d4849195 100644 --- a/examples/gallery/src/maplibre-overlay.html +++ b/examples/gallery/src/maplibre-overlay.html @@ -22,9 +22,11 @@ pitch: 60 }); - 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', From 15f3f3763f095679be249e82f5dc19c23a7669e4 Mon Sep 17 00:00:00 2001 From: Chris Gervang <chris@gervang.com> Date: Wed, 6 Mar 2024 09:54:36 -0800 Subject: [PATCH 6/7] chore(gallery) add mapbox-overlay example Signed-off-by: Chris Gervang <chris@gervang.com> --- examples/gallery/src/mapbox-overlay.html | 90 ++++++++++++++++++++++ examples/gallery/src/maplibre-layer.html | 3 +- examples/gallery/src/maplibre-overlay.html | 3 +- 3 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 examples/gallery/src/mapbox-overlay.html diff --git a/examples/gallery/src/mapbox-overlay.html b/examples/gallery/src/mapbox-overlay.html new file mode 100644 index 00000000000..5d7a073b1f6 --- /dev/null +++ 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> \ No newline at end of file diff --git a/examples/gallery/src/maplibre-layer.html b/examples/gallery/src/maplibre-layer.html index 9e3af59627a..8a057ae201f 100644 --- a/examples/gallery/src/maplibre-layer.html +++ b/examples/gallery/src/maplibre-layer.html @@ -19,7 +19,8 @@ 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('style.load', () => { diff --git a/examples/gallery/src/maplibre-overlay.html b/examples/gallery/src/maplibre-overlay.html index 3a2d4849195..d95ccf0d439 100644 --- a/examples/gallery/src/maplibre-overlay.html +++ b/examples/gallery/src/maplibre-overlay.html @@ -19,7 +19,8 @@ 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('style.load', () => { From fab6f69d1b4052a71262cb1e6103d4819e9398e5 Mon Sep 17 00:00:00 2001 From: Chris Gervang <chris@gervang.com> Date: Wed, 6 Mar 2024 10:01:30 -0800 Subject: [PATCH 7/7] fix doc links Signed-off-by: Chris Gervang <chris@gervang.com> --- docs/developer-guide/base-maps/using-with-mapbox.md | 2 +- docs/get-started/using-with-map.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/developer-guide/base-maps/using-with-mapbox.md b/docs/developer-guide/base-maps/using-with-mapbox.md index 2d3691ea0e4..50a855a1e9e 100644 --- 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/maplibre-overlay) | +| ✓ | ✓ | [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 index a1d0e75816d..c60971aa5c3 100644 --- a/docs/get-started/using-with-map.md +++ b/docs/get-started/using-with-map.md @@ -23,7 +23,7 @@ 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/mapbox) | [example](https://deck.gl/examples/mapbox) | [link](../developer-guide/base-maps/using-with-mapbox.md) | +| [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) | | |