updateMapboxParamDiv = () => {
map.getSource("fullpassesSource").setData(fullpasses);
map.getSource("fulldirectionSource").setData(fulldirection);
}
cityCenter = {
return {
shanghai: [121.47204, 31.216047],
beijing: [116.40067, 39.887172],
tianjin: [117.21687, 39.097083],
names: ["shanghai", "beijing", "tianjin"]
};
}
// Initialize the mapbox
{
map.on("load", () => {
// Init source
map.addSource("fullpassesSource", {
type: "geojson",
data: fullpasses
});
map.addSource("fulldirectionSource", {
type: "geojson",
data: fulldirection
});
map.addLayer({
id: "fullpass-point",
type: "circle",
source: "fullpassesSource",
paint: {
"circle-color": "#ff0000", //["get", "clAuth"],
"circle-opacity": 0.5,
"circle-radius": 4,
"circle-stroke-width": 1,
"circle-stroke-color": "#fff",
"circle-stroke-opacity": 0.5
}
});
map.addLayer({
id: "fullpass-symbol",
type: "symbol",
source: "fullpassesSource",
layout: {
"text-field": ["get", "name"],
"text-font": [
"literal",
["DIN Offc Pro Italic", "Arial Unicode MS Regular"]
],
"text-offset": [0, 1.25],
"text-anchor": "top"
}
});
map.addLayer({
id: "outline",
type: "line",
source: "fulldirectionSource",
layout: {},
paint: {
"line-color": "#00f",
"line-width": 2
}
});
// map.addLayer({
// id: "unclustered-point",
// type: "circle",
// source: "stationSource",
// filter: ["!", ["has", "point_count"]],
// paint: {
// "circle-color": ["get", "clAuth"],
// "circle-radius": 4,
// "circle-stroke-width": 1,
// "circle-stroke-color": "#fff"
// }
// });
// Add handlers
{
map.on("dragend", () => {
console.log("dragend");
updateMapboxParamDiv();
});
map.on("zoomend", () => {
console.log("zoomend");
updateMapboxParamDiv();
});
map.on("pitchend", () => {
console.log("pitchend");
updateMapboxParamDiv();
});
}
});
}
data = fullpasses.features
data
Type Table, then Shift-Enter. Ctrl-space for more options.
fullpasses = FileAttachment("fullpasses.geojson").json()
fulldirection = FileAttachment("fulldirection@1.geojson").json()
map = {
reloadButton;
const map = new mapboxgl.Map({
container,
center: cityCenter["beijing"],
zoom: 5,
maxPitch: 80,
// style: "mapbox://styles/listenzcc/cky2j3ywf13yi15nuybjj4kem"
style: "mapbox://styles/listenzcc/cky2j3ywf13yi15nuybjj4kem"
// style: "mapbox://styles/mapbox/light-v9"
});
return map;
}
aspect = 9 / 16
height = width * aspect
mapboxgl = {
const gl = await require("mapbox-gl");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoibGlzdGVuemNjIiwiYSI6ImNrMzU5MmpxZDAxMXEzbXQ0dnd4YTZ2NDAifQ.GohcgYXFsbDqfsi_7SXdpA";
const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
coordtransform = require("coordtransform")
d3 = require("d3")
// import { ForceGraph } from "@d3/force-directed-graph"
import { ToC } from "@rmw4269/contents"
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.
