Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from Feb 29, 2024
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca9eabc
add(examples) Interleaving deck.gl with MapboxOverlay
chrisgervang Feb 27, 2024
164e2e8
chore(examples) rename mapbox to maplibre in gallery
chrisgervang Feb 28, 2024
2751cd4
Merge branch 'master' into chr/mapbox-overlay-interleave-example
chrisgervang Feb 28, 2024
b8d2554
Merge branch 'chr/mapbox-overlay-interleave-example' of https://githu…
chrisgervang Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Binary file added examples/gallery/images/mapbox-overlay.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 87 additions & 0 deletions examples/gallery/src/mapbox-overlay.html
View file
Open in desktop
@@ -0,0 +1,87 @@
<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/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>