Versions tried "deck.gl": "^9.0.27", "maplibre-gl": "^4.0.0"
and
"deck.gl": "^9.1.4", "maplibre-gl": "^5.1.1"
I'm using Deck.gl and MapLibre to visualize H3 hexagons on a map, but I'm experiencing issues with the layers not overlapping correctly at zoom level 16 and up. Here is my current implementation:
"use client";
import React from 'react';
import { PickingInfo, H3HexagonLayer, DeckGL } from 'deck.gl';
import { Map } from "react-map-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import maplibregl from "maplibre-gl";
type DataType = {
hex: string;
count: number;
};
const HvlMap = () => {
const layer = new H3HexagonLayer<DataType>({
id: 'H3HexagonLayer',
data: '.gl-data/master/website/sf.h3cells.json',
extruded: false,
getHexagon: (d: DataType) => d.hex,
getFillColor: (d: DataType) => [255, (1 - d.count / 500) * 255, 0],
//getElevation: (d: DataType) => d.count,
//elevationScale: 20,
pickable: true,
opacity: 0.5
});
const INITIAL_VIEW_STATE = {
longitude: 32.61300538819346,
latitude: 39.885875158950185,
zoom: 12,
minZoom: 2,
maxZoom: 15,
pitch: 40.5,
bearing: -5
};
return <div onContextMenu={evt => evt.preventDefault()}>
<DeckGL
initialViewState={{
longitude: 32.61300538819346,
latitude: 39.885875158950185,
zoom: 15,
maxZoom: 16
}}
controller
getTooltip={({ object }: PickingInfo<DataType>) => object && `${object.hex} count: ${object.count}`}
layers={[layer]}
>
<Map
mapLib={maplibregl}
className=""
initialViewState={INITIAL_VIEW_STATE}
style={{ width: "100%", height: "100%" }}
mapStyle=".json?key=YOURKEY"
>
</Map>
</DeckGL>
</div>;
}
export default HvlMap;```
At zoom level 16, the layers from Deck.gl and MapLibre do not overlap correctly.