viewof map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = container.value = new mapboxgl.Map({
container,
// Bogotá 4.7110° N, 74.0721° W
center: [-74.0721, 4.7110],
zoom: 10,
pitch:80,
style: "mapbox://styles/mapbox/streets-v10",
scrollZoom: true
});
invalidation.then(() => map.remove());
// Setup our svg layer that we can manipulate with d3
const bb = container.getBoundingClientRect();
var svg = d3.select(container)
.append("svg")
.style("position", "absolute")
.style("top", 0)
.style("left", 0)
.attr("width", bb.width)
.attr("height", bb.height)
.style("pointer-events", "none"); // the svg shouldn't capture mouse events, so we can have pan and zoom from mapbox
//Project any point to map's current state
function projectPoint(lon, lat) {
var point = map.project(new mapboxgl.LngLat(lon, lat));
this.stream.point(point.x, point.y);
}
//Projection function
var transform = d3.geoTransform({point:projectPoint});
var path = d3.geoPath().projection(transform);
const dots = svg.selectAll(".puesto")
.data(votingStations.features)
.join("path")
.attr("class", "puesto")
.style("fill", "salmon")
.on("mouseover", d => mutable hovered=d)
.style("pointer-events", "all");
const update = () => {
dots.attr("d", path);
}
// Every time the map changes, update the dots
map.on("viewreset", update);
map.on("move", update);
map.on("moveend", update);
update();
}
viewof pureMapbox = {
const container = html`<div style="height:600px;">`;
yield container;
const map = container.value = new mapboxgl.Map({
container,
center: [-74.0721, 4.7110],
zoom: 10,
style: "mapbox://styles/mapbox/streets-v10",
scrollZoom: false
});
invalidation.then(() => map.remove());
let countiesLayer = {
id: "puestos",
type: "circle",
source: "puestos",
paint: {
"circle-color": "steelblue",
"circle-radius": 4
}
};
// Wait until the map loads, then yield the container again.
yield new Promise(resolve => {
if (map.loaded()) resolve(map);
else map.on('load', () => resolve(map));
});
// let bgLayer = map.setPaintProperty('background', 'background-color', "grey");
if (!map.getSource('puestos')) {
map.addSource('puestos', { type: 'geojson', data: votingStations});
}
if (map.getLayer(countiesLayer.id)) {
map.removeLayer(countiesLayer.id);
}
map.addLayer(countiesLayer);
yield container;
}
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.
