map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([40.6936, -73.9833], 15);
let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.geoJson(randomPoints, {size: 1}).addTo(map);
L.geoJson(clusterGeometries, {
weight: 1,
color: '#0F0',
onEachFeature: function(feature, layer) {
const area = turf.area(feature);
layer.bindPopup(`Cluster area: <b>${area} m<sup>2</sup></b>`);
},
}).addTo(map);
}
bbox = [-74.00420665740968, 40.683697189820876, -73.96236419677736, 40.703513269579396];
randomPoints = turf.randomPoint(numberOfPoints, {bbox});
clusters = turf.clustersKmeans(randomPoints, { numberOfClusters });
clusterGeometries = {
const clusterArray = new Array(numberOfClusters).fill(null).map((item) => (new Array()));
const reducedClusters = clusters.features.reduce((product, cluster) => {
const clusterIndex = cluster.properties.cluster;
product[clusterIndex].push(cluster);
return product;
}, clusterArray);
const polygons = reducedClusters.map((cluster) => {
return turf.concave(turf.featureCollection(cluster));
});
return polygons;
}
L = require('leaflet@1.4.0')
turf = require("@turf/turf@5")
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
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.
