viewof numTiles = Inputs.range([8, 11], {value: 10.5, step: 0.5, label: "Number of Tiles"})
showTile(tileID)
showTile = (i) =>
createMap({
type: "FeatureCollection",
features: [
// tiles.features,
...sites
.filter((d) => findTile(d) === i)
.map((d) => ({
type: "Point",
coordinates: [+d.Long, +d.Lat],
properties: d
}))
]
})
({type: "FeatureCollection",
features: [
// tiles.features,
...sites
.filter((d) => findTile(d) === 0)
.map((d) => ({
type: "Point",
coordinates: [+d.Long, +d.Lat],
properties: d
}))
]})
[...sites]
tiles0 = {
// Zoom is used to control the number of tiles
// Higher zoom generates more tiles
const zoom = numTiles
// We generate tiles for each feature geometry using cover.tiles
const limits = { min_zoom: zoom, max_zoom: zoom }
const tiles = cover.geojson(geometryCollection['geometry'], { min_zoom: zoom, max_zoom: zoom})
return tiles
}
// tileSites = {
// let results = [];
// sites.map(function(d){
// let tile = findTile(d)
// results.push({tile: tile, site:d.SITE_ID})
// });
// let map = d3.group(results, d => d.tile)
// const arr = Array.from(map, ([key, value]) => {
// return {tile:key,value};
// });
// let results2 = [];
// arr.map(function(d){
// let tile = d.tile
// let siteArr = [];
// d.value.map(function(e){
// siteArr.push(e.site)
// })
// results2.push({tile: tile, sites: siteArr})
// });
// return results2
// }
cover = import('https://cdn.skypack.dev/tile-cover@3.0.1?min')
geometryCollection = ({
type: "GeometryCollection",
geometry: {
type: 'MultiPolygon',
coordinates: mergedTopo.coordinates
}
})
LADTopo = topojson.topology(LADGeoJSON.features)
mergedTopo = topojson.merge(LADTopo, Object.values(LADTopo.objects))
// Add an ID property to all the tiles, for leaflet popups
tiles = ({
type: "FeatureCollection",
features: Array.from(tiles0.features, (t, i) => ({
...t,
properties: { ID: `tile ${i}` }
}))
})
topojson = require("https://unpkg.com/topojson@3")
findTile = {
const corners = tiles.features.map((d, i) => [
...d.geometry.coordinates[0][2],
i
]);
const x = d3.sort(d3.group(corners, (d) => +d[0]).keys());
const y = d3.sort(d3.group(corners, (d) => +d[1]).keys());
const I = d3.rollup(
corners,
(v) => v[0][2],
(d) => +d[0],
(d) => +d[1]
);
return ({ Long, Lat }) => {
const x0 = x[d3.bisect(x, +Long)];
const y0 = y[d3.bisect(y, +Lat)];
const i = I.get(x0)?.get(y0);
// Here we could return i, but it's safer to double-check that the polygon
// we've reached does indeed contain the point. We use d3.polygonContains
// because the grid is planar not spherical.
return i !== undefined
? d3.polygonContains(tiles.features[i].geometry.coordinates[0], [
+Long,
+Lat
])
? i
: undefined
: undefined;
};
}
createMap({
type: "FeatureCollection",
features: [
// ...tiles.features,
...sites
.filter(d => d.N_SURVEYS > 100)
// .filter((d) => findTile(d) === undefined)
.map((d) => ({
type: "Point",
coordinates: [+d.Long, +d.Lat],
properties: d
}))
]
})
import {LADGeoJSON} from "@theorashid/england-geojson"
function* createMap(geojson) {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([40.7299, -73.9923], 13);
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
ext: "png"
}
).addTo(map);
if (geojson) {
const layer = L.geoJson(geojson, {
weight: 1,
color: "#432",
onEachFeature: (feature, layer) =>
layer.bindPopup(
`${Object.entries(feature.properties)
.map(([, v]) => v)
.join("<br>\n")}`
)
}).addTo(map);
map.fitBounds(layer.getBounds());
}
}
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(
(L._style = html`<link href=${href} rel=stylesheet>`)
);
}
return L;
}
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.
