Public
Edited
Nov 29, 2022
1 fork
viewof basemap = Inputs.radio(["voyager", "positron", "dark-matter"], {value: 'positron', label: "CARTO basemap"})
World = {
const container = yield html`<div style="height:800px;">`;
const map = (container.value = new maplibregl.Map({
//interactive: false,
boxZoom: true,
pitch: 0,
bearing: 0,
maplibreLogo: true,
container,
center: [-70.2568, 43.64],
zoom: 12,
style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
scrollZoom: true
}));
map.on('load', function() {
map.addSource('schools', {
'type': 'geojson',
'data': editedSchoolData
});
map.addLayer({
'id': 'schoolPoints',
'type': 'circle',
'source': 'schools',
});
});
map.on('mouseenter', 'schoolPoints', function (e) {
popup.setLngLat(e.lngLat).setHTML('<h3>' + 'Test' + '</h3>').addTo(map);
});
map.on('mouseleave', 'earthquakes', function (e) {
popup.remove();
});
}
popup = new maplibregl.Popup({
closeButton: false,
closeOnClick: false
});
maplibregl = require("maplibre-gl@2.1.9")
import {maineSchoolsGeoJson} from "f305f4a853afe835"
maineSchoolsGeoJson
editedSchoolData = {
return{
"type": "FeatureCollection",
"features":test
}}
test = maineSchoolsGeoJson.features.map( d => ({
type: "Feature",
properties: d.properties,
geometry: {
type: "Point",
coordinates: [d.geometry.coordinates[0], d.geometry.coordinates[1]]
}
}))
data = d3.json('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson')
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.
