Published
Edited
Nov 11, 2020
1 fork
container = html`<div style='height:500px;' />`
map = {
let map = this;
const mapboxStyle = FileAttachment("os_night.json").url();
if (!map) {
map = new mapboxgl.Map({
container,
center: [0.05, 51.459],
zoom: 12,
pitch: 45,
style:
'https://s3.us-east-2.amazonaws.com/eviction-lab-prototypes/bubble-colors/assets/style.json'
});
}
let trafficLayer = {
id: "traffic_points",
type: "circle",
source: "traffic",
paint: {
"circle-color": circleColor,
"circle-opacity": circleOpacity,
"circle-stroke-color": circleStrokeColor,
"circle-stroke-width": 0.75,
"circle-radius": 10
}
};
// 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', bgColor);
if (!map.getSource('traffic')) {
map.addSource('traffic', {
type: 'geojson',
data: {
type: "FeatureCollection",
features: traffic
}
});
}
if (map.getLayer(trafficLayer.id)) {
map.removeLayer(trafficLayer.id);
}
map.addLayer(trafficLayer);
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mouseenter', 'traffic_points', function(e) {
map.getCanvas().style.cursor = 'pointer';
var coordinates = e.features[0].geometry.coordinates.slice();
var props = Object.keys(e.features[0].properties).filter(
el => el.indexOf('road') !== -1
);
var filter = {};
props.map(el => (filter[el] = e.features[0].properties[el]));
var description = `<pre>${JSON.stringify(filter, null, 2).replace(
/{|}/g,
''
)}</pre>`;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
popup
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
map.on('mouseleave', 'traffic_points', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});
}
json = function() {
const url =
'https://roadtraffic.dft.gov.uk/api/count-points?filter[local_authority_id]=105';
const r = d3.json(url);
return r;
}
traffic
viewof circleColor = html`<input type="color" value="#ff0400">`
viewof circleStrokeColor = html`<input type="color" value="#ffffff">`
viewof bgColor = html`<input type="color" value="#46464D">`
viewof circleOpacity = html`<input type="number" min="0", max="1" step="0.01" value="0.65">`
FileAttachment("os_night.json").url()
import { soFetch } from '@alecglassford/so-fetch'
d3 = require('d3')
mapboxgl = {
let mapboxgl = await require('mapbox-gl@0.43.0');
return mapboxgl;
}
link = html`<link href='https://unpkg.com/mapbox-gl@0.43.0/dist/mapbox-gl.css' rel='stylesheet' />`
md`# Bibliography`
md`@pjsier/mapbox-gl-bubble-map#counties`
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.
