PhD Candidate @densitydesign
Public
Edited
Aug 2, 2022
2 forks
viewof map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = (container.value = new mapboxgl.Map({
container,
center: [0, 0],
zoom: 0,
// SATELLITE
//style: "mapbox://styles/andreabenedetti/ck9r9bufc0w8j1inxwnkczyo8",
// TOPOGRAFICA
//style: "mapbox://styles/andreabenedetti/ck9zzrbna27s51iplbvawirif",
style: "mapbox://styles/bea9292/cl44ckkn1003i14mvzo12ku6f",
scrollZoom: true
}));
map.on("load", () => {
/*map.addSource("voronoi", {
type: "geojson",
data: voronoi
});
map.addLayer({
id: "voronoi",
type: "line",
source: "voronoi",
layout: {},
paint: {
"line-color": "#FFFFFF",
"line-width": 2
}
});*/
map.addSource("topoi", {
type: "geojson",
data: topoi
});
map.addLayer({
id: "topoi",
type: "circle",
source: "topoi",
layout: {},
paint: {
"circle-radius": 2,
"circle-color": "black",
"circle-stroke-color": "black",
"circle-stroke-width": 1,
"circle-opacity": 0.5
}
//filter: ["==", place, ['get', 'places__place__location__name']]
});
/*map.addLayer({
id: "poi-labels",
type: "symbol",
source: "topoi",
layout: {
"text-field": [
"format",
["upcase", ["get", "places__place__location__name"]],
{ "font-scale": 0.2 }
],
"text-font": ["Overpass Bold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.4],
"text-anchor": "top"
},
paint: {
"text-color": "white",
"text-halo-color": "black",
"text-halo-width": 1.5,
"text-halo-blur": 1
}
//filter: ["==", place, ["get", "places__place__location__name"]]
});*/
});
invalidation.then(() => map.remove());
}
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
// https://www.mapbox.com/help/how-access-tokens-work/
gl.accessToken =
// MAPPA TOPOGRAFICA
"pk.eyJ1IjoiYW5kcmVhYmVuZWRldHRpIiwiYSI6ImNqNWh2eGh3ejFqOG8zM3BrZjRucGZkOGEifQ.SmdBpUoSe3s0tm-OTDFY9Q";
// MAPPA SATELLITARE
// "pk.eyJ1IjoiYW5kcmVhYmVuZWRldHRpIiwiYSI6ImNqNWh2eGh3ejFqOG8zM3BrZjRucGZkOGEifQ.SmdBpUoSe3s0tm-OTDFY9Q";
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
import { text } from '@jashkenas/inputs'
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.
