map.on("load", function () {
const firstLabelLayerId = map
.getStyle()
.layers.find((layer) => layer.type === "symbol").id;
map.addLayer(
new deck.MapboxLayer({
id: "screengrid-layer",
data,
type: deck.ScreenGridLayer,
pickable: false,
opacity: 0.8,
cellSizePixels: 50,
colorRange: [
[0, 25, 0, 25],
[0, 85, 0, 85],
[0, 127, 0, 127],
[0, 170, 0, 170],
[0, 190, 0, 190],
[0, 255, 0, 255]
],
visibility: "visible",
getPosition: (d) => [d.lon, d.lat, 0],
getWeight: (d) => d.availableBikes
})
);
map.on("zoom", function () {
if (map.getZoom() >= 14) {
map.setLayoutProperty("screengrid-layer", "visibility", "none");
map.setLayoutProperty("points", "visibility", "visible");
} else {
map.setLayoutProperty("screengrid-layer", "visibility", "visible");
map.setLayoutProperty("points", "visibility", "none");
}
});
})