viewof map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = container.value = new mapboxgl.Map({
container,
center: [-77.033485, 38.897205],
zoom: 10,
style: "mapbox://styles/mapbox/streets-v11",
scrollZoom: false
});
function addCircle(data){
data.forEach((obj, idx)=>{
var center = turf.point([obj.nowLong, obj.nowLat]);
var radius = 0.5;
var options = {
steps: 40,
units: 'kilometers'
};
var circleData = turf.circle(center, radius, options);
map.addLayer({
"id": `circle-fill-${idx}`,
"type": "fill",
"source": {
"type": "geojson",
"data": circleData
},
"paint": {
"fill-color": "red",
"fill-opacity": 0.6
}
});
})
}
map.on('load', function(){
addCircle(sheetData)
})
invalidation.then(() => map.remove());
}
turf.point([-74.50, 40]);
// You’ll need to replace this with your own MapBox token.
// See https://www.mapbox.com/help/how-access-tokens-work/
accessToken = "pk.eyJ1IjoibW9sbGllbWFyaWUiLCJhIjoiY2txNXF0Mmw5MTVvdDJ3b2N3bHhobXN6aCJ9.ztC4Av-WFMynvpwyFgUiGw"
sheetData = sheet_data_fn("https://docs.google.com/spreadsheets/d/e/2PACX-1vQbgbfOxSdUNEgmvaXIYOyLUe1bLFzl_451R17Cdk91j-IlrKMGUkAnucKVUugoRDhG_tF87z8lgq6o/pub?gid=1988711147&single=true&output=tsv")
mapboxgl = {
const gl = await require("mapbox-gl@1");
if (!gl.accessToken) {
gl.accessToken = accessToken;
const href = await require.resolve("mapbox-gl@1/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
turf = require("@turf/turf@6")
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.
