container = html`<div style='height:${height}px; width: ${width}px'></div>`
map.getPitch()
gridSetting = {
return {
distInAngle: form.distInAngle,
scale: 5
};
}
viewof centerpoint = {
// Give the container dimensions.
yield container;
const canvas = document.getElementById("canvas-1");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
if (ctx) {
canvas.style.display = "none";
}
function animate() {
// requestAnimationFrame(animate);
}
function drawAbove() {
ctx.clearRect(0, 0, width, height);
const { scale, distInAngle } = gridSetting;
const { dist, lineWidth } = (() => {
const { w, e } = getCoordinates();
var dist = (distInAngle * width) / (e - w);
if (dist < width / 200) dist = width / 200;
var lineWidth = dist * 0.01;
if (lineWidth > 1) lineWidth = 1;
if (lineWidth < 0.5) lineWidth = 0.5;
return { dist, lineWidth };
})();
const { color1, color2, rotate } = form;
var x, y;
ctx.save();
ctx.translate(width / 2, height / 2);
ctx.rotate(rotate);
for (let i = 0; i < width; ++i) {
x = i * dist;
if (x > width) break;
if (i % scale == 0) {
ctx.strokeStyle = color1;
ctx.lineWidth = lineWidth;
} else {
ctx.strokeStyle = color2;
ctx.lineWidth = lineWidth;
}
ctx.globalAlpha = 1.0;
ctx.beginPath(),
ctx.moveTo(x, -height),
ctx.lineTo(x, height),
ctx.stroke();
ctx.beginPath(),
ctx.moveTo(-x, -height),
ctx.lineTo(-x, height),
ctx.stroke();
}
for (let i = 0; i < height; ++i) {
y = i * dist;
if (y > height) break;
if (i % scale == 0) {
ctx.strokeStyle = color1;
ctx.lineWidth = lineWidth;
} else {
ctx.strokeStyle = color2;
ctx.lineWidth = lineWidth;
}
ctx.globalAlpha = 1.0;
ctx.beginPath(),
ctx.moveTo(-width, y),
ctx.lineTo(width, y),
ctx.stroke();
ctx.beginPath(),
ctx.moveTo(-width, -y),
ctx.lineTo(width, -y),
ctx.stroke();
}
ctx.font = "20px serif";
ctx.fillStyle = "black";
ctx.fillText(
`${map.getCenter().lat.toPrecision(4)}, ${map
.getCenter()
.lng.toPrecision(4)}, ${map.getZoom().toPrecision(4)}`,
20,
30
);
ctx.restore();
}
drawAbove();
map.on("load", () => {
map.addSource("canvas-source", {
type: "canvas",
canvas: "canvas-1",
coordinates: getCoordinates().coordinates,
// Set to true if the canvas source is animated. If the canvas is static, animate should be set to false to improve performance.
animate: true
});
map.addLayer({
id: "canvas-layer",
type: "raster",
source: "canvas-source"
});
});
function batch(e) {
container.value = e.lngLat;
container.dispatchEvent(new CustomEvent("input"));
map.getSource("canvas-source").setCoordinates(getCoordinates().coordinates);
drawAbove();
}
// map.on("mousemove", (e) => {
// batch(e);
// });
map.on("zoomend", (e) => {
batch(e);
});
map.on("dragend", (e) => {
batch(e);
});
}
map.getCenter()
canvasContainer = html`<canvas id='canvas-1' height="${height}" width="${width}"></canvas>`
map = new mapboxgl.Map({
container,
center: [116.3, 39.9],
zoom: 12,
maxPitch: 45,
style: "mapbox://styles/listenzcc/cky2j3ywf13yi15nuybjj4kem"
// style: "mapbox://styles/mapbox/light-v9"
})
height = (width * 9) / 16
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;
}
href = await require.resolve("mapbox-gl/dist/mapbox-gl.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.
