Geospatial Visual Analytics
Public
Edited
Oct 6, 2023
1 fork
MapObj = new maplibregl.Map({
//interactive: false,
boxZoom: true,
pitch: 0,
bearing: 0,
maplibreLogo: true,
container,
center: [-0.1146587332205871, 51.50664651304675],
// center: [-122.4, 37.79],
zoom: 12,
// pitch: 60,
// zoom: 10,
// style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
scrollZoom: true
})
map.on("load", function () {
const firstLabelLayerId = map
.getStyle()
.layers.find((layer) => layer.type === "symbol").id;
// console.log(map.getZoom());
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");
}
});
})
geojson = ({
type: "FeatureCollection",
features: data.map((item) => {
return {
type: "Feature",
properties: {
co2: item.availableBikes
},
geometry: {
type: "Point",
coordinates: [item.lon, item.lat]
}
};
})
})
// Add points to the map as a source and layer
map.on("load", function () {
map.addSource("points", {
type: "geojson",
data: geojson
});
map.addLayer({
id: "points",
type: "circle",
source: "points",
layout: {
visibility: "none" //initial visibility
},
paint: {
"circle-radius": 10,
"circle-color": "#16FC16"
}
});
})
data = FileAttachment("dataWithStations.json").json()
// Debugging zoom level
// MapObj.on("zoom", function () {
// console.log(MapObj.getZoom());
// })
html`<link href='https://cdn.jsdelivr.net/npm/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
Maplibre CSS`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
