I'm trying to use Deck.gl with MVTLayer to display some Elastic vector tiles.
Using maplibre-gl
So far, I've been able to make it work using the maplibre-gl library:
map.addSource(sourceName, {
'type': 'vector',
'tiles': [
`http://localhost:8099/tile?index=mobile-ping-test-2-2024&geometry=geo&renderMethod=hits&x={x}&y={y}&z={z}`
],
'minzoom': 0,
'maxzoom': 24
});
// Elasticsearch vector tile API returns tiles with 3 layers
// "hits": Contains a feature for each document (hit) matching search criteria.
// "aggs": Contains a feature for each bucket returned from geotile_grid or geohex_grid aggregation.
// "meta": Contains a single feature with meta data about the feature properties.
//
// 'vector' layer specification requires "source-layer" property. This property identifies the layer to display from the tile.
const sourceLayer = "hits"; // not arbitrary value - must be layer name provided from tile
map.addLayer(
{
'id': 'layer_point',
'type': 'circle',
'source': 'es_mvt', // arbitrary value, you can use any string you like
'source-layer': sourceLayer,
'paint': {
'circle-radius': 4,
'circle-color': 'green',
'circle-opacity': 0.5,
'circle-stroke-color': 'rgb(255,0,0)',
'circle-stroke-opacity': 1,
'circle-stroke-width': 1,
}
}
);
map.setFilter(circleStyle, [
'any',
['==', ['geometry-type'], 'Point'],
['==', ['geometry-type'], 'MultiPoint'],
]);
Using mapbox-gl and Deck.gl
But, when I'm trying to reproduce the same with Deck.gl:
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script>
<script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
<link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" />
</head>
<body>
<div id="map" style="width: 100vw; height: 100vh;"></div>
</body>
<script>
const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
initialViewState: {
latitude: 40.4165,
longitude: -3.70256,
zoom: 5,
},
controller: true,
layers: [
new deck.MVTLayer({
data: 'http://localhost:8099/tile?index=mobile-ping-test-2-2024&geometry=geo&renderMethod=hits&x={x}&y={y}&z={z}.mvt',
pointType: 'circle',
getFillColor: [255,0,0],
lineWidthMinPixels: 1
})
],
});
</script>
</html>
This is what I get:
I can even see the points if I zoom the map, but still have some tiles totally in red:
I'm using same local Tiles Server in both cases, I've made sure that the MVT responses that I get are correct, etc.
¿What am I missing to make it work with Deck.gl?