// worldCopyJump
geoJson
map = {
const height = width * mapSize.height / mapSize.width;
const container = html`<div style="height:${height}px;">`;
yield container;
const bounds = L.latLngBounds(L.latLng(0, 0), L.latLng(mapSize.height, mapSize.width));
const map = L.map(container, {
crs: wrappingCrs,
minZoom: -30,
zoomSnap: 0,
renderer: new CanvasInnerStroke({ padding: 1 }),
zoomAnimation: false,
zoomSnap: 0
// worldCopyJump: true
});
/*
L.geoJSON(geoJson, {
style: function (feature) {
return {color: "#ff00ff"};
}
}).addTo(map)
*/
rtLayer.addTo(map);
// leafletGeoJson.addTo(map);
map.fitBounds(bounds);
map.on('move', onMove);
container.map = map;
yield container;
}
map.map.getZoom()
turf.featureCollection()
sp = d3.scalePow()
.exponent(2)
.domain([0, 1, 3])
.range([0.5, 0.5, 6]);
sp(3)
rtLayer = {
const scale = d3.scalePow()
.exponent(2)
.domain([0, 1, 5])
.range([1, 1, 10]);
return L.realtime(turf.featureCollection([]), {
noClip: true,
smoothFactor: 0,
weight: 1,
fnWeight(lineWidth, renderer) {
return scale(renderer._zoom) * lineWidth;
}
});
}
rtLayer.options
rtLayer.update(geoJsonSlice)
mutable mapState = ({});
function onMove(e) {
mutable mapState = {
e,
zoom: e.target?.getZoom(),
bounds: e.target?.getBounds()
};
}
clippedSVG = new ClippedSVG()
geoJson.features
geoJsonSlice = {
let index = 0;
let slice;
const features = geoJson.features;
while (true) {
if (index > features.length) index = 0;
index++;
yield turf.featureCollection(features.slice(index, index + 20));
await Promises.delay(1000);
}
}
geoJson
L.geoJSON({ type: "FeatureCollection", features: [testFeature] })
L.CRS.Simple.projection.bounds
wrappingCrs.infinite
mapSize = ({ width: 2048, height: 904 });
wrappingCrs = {
const simple = L.CRS.Simple;
const wrappingCrs = L.extend({}, simple, {
wrapLng: [0, mapSize.width],
infinite: true,
projection: {
project: function(latLng) {
const latLng2 = L.latLng(mapSize.height - latLng.lat, latLng.lng);
return simple.projection.project.call(this, latLng2);
},
unproject: function(point) {
const latLng = simple.projection.unproject.call(this, point);
return L.latLng(mapSize.height - latLng.lat, latLng.lng);
},
bounds: {
min: { x: 0, y: 0 },
max: { x: mapSize.width, y: mapSize.height }
}
}
})
return wrappingCrs;
}
topoJson
geoContiguous = {
const layer = topoJson.objects.traced;
const geoJson = topojson.feature(topoJson, layer);
}
//turf.coordAll(geoJson)
geoJson
import { sampleTopology as topoJson, sampleGeoJson as geoJson } from "053fea843f886be5"
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
turf = await require('@turf/turf@6.5.0/turf.min.js')
svg`<svg viewBox="0 0 100 100">
<defs>
<clipPath id="myClip">
<circle id="circle" cx="40" cy="35" r="35" />
</clipPath>
</defs>
<g transform="scale(1 0.5)">>
<use clip-path="url(#myClip)" href="#circle" fill="red" stroke="blue" stroke-width="10" />
</g>
</svg>`
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.
