maplibre-gl-js
maplibre-gl-js copied to clipboard
maplibre
Create a deck.gl example in the MapLibre GL JS docs
Interestingly, there is currently no example of deck.gl in the MapLibre GL JS examples.
I would like to add one. Something like https://github.com/visgl/deck.gl/blob/master/examples/get-started/pure-js/mapbox/app.js would probably be good, but I don't know how to make this into stand-alone html file.
With the code below, I get an Uncaught ReferenceError: MapboxOverlay is not defined error...
Does anyone know how to fix this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@latest/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/mapbox@latest/dist.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new maplibregl.Map({
container: 'map', // container id
style: 'https://demotiles.maplibre.org/style.json', // style URL
center: [0, 0], // starting position [lng, lat]
zoom: 1 // starting zoom
});
const AIR_PORTS =
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
const deckOverlay = new MapboxOverlay({
layers: [
new GeoJsonLayer({
id: 'airports',
data: AIR_PORTS,
// Styles
filled: true,
pointRadiusMinPixels: 2,
pointRadiusScale: 2000,
getPointRadius: f => 11 - f.properties.scalerank,
getFillColor: [200, 0, 80, 180],
// Interactive props
pickable: true,
autoHighlight: true,
onClick: info =>
// eslint-disable-next-line
info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
}),
new ArcLayer({
id: 'arcs',
data: AIR_PORTS,
dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
// Styles
getSourcePosition: f => [-0.4531566, 51.4709959], // London
getTargetPosition: f => f.geometry.coordinates,
getSourceColor: [0, 128, 200],
getTargetColor: [200, 0, 80],
getWidth: 1
})
]
});
map.addControl(deckOverlay);
map.addControl(new maplibregl.NavigationControl());
</script>
</body>
</html>
Everything is under the global deck namespace, so deck.MapboxOverlay, deck.GeoJsonLayer etc.
Btw you don't need to include @deck.gl/layers and @deck.gl/mapbox if you are already using the master package (deck.gl).
@wipfli Can you add this html example to the examples in the main repo? Now that the docs are updated, adding an example should be super easy.
MapTiler also has a great example: https://docs.maptiler.com/deck-gl/interleaved/
Yup, @SnailBones you told me that you tested your code with deck.gl, if you could create an example page it will help testing these things in the future and also add it to the maplibre docs - the examples in the docs now are super easy to add.
@HarelM Yup, I just copied the MapTiler example. Not sure what the licensing is and whether we can add that here?
Oh, I see, I believe it's better to use original data and example, just in case...
There are two examples now, sure they can look better if someone would like to add/improve them, but I think this issue can be closed: https://maplibre.org/maplibre-gl-js/docs/examples/add-deckgl-layer-using-rest-api/