Public
Edited
Oct 29, 2023
6 forks
// worldCopyJump
map.map.options.crs
m = new L.Map(DOM.element("div"));
map.map.getCenter()
map.map.getZoom()
map.map.flyTo({lat: -0.6364206182756988, lng: -49.91245580521718}, 7.228212509167584, { animate: false });
topoRef
mutable topoRef = false;
crs.scale(map.map.getZoom())
layers.filter(l => l.markDirty)
layers = {
const layers = [];
map.map.eachLayer(l => layers.push(l));
return layers;
}
map.map.options.crs
map.map.getBounds().toBboxArray()
map = {
const height = width * mapSize.height / mapSize.width;
const container = html`<div style="height:${height}px;">`;
yield container;
// const corner1 = L.latLng(-90, -180)
// const corner2 = L.latLng(90, 180)
// const maxBounds = L.latLngBounds(corner1, corner2)
const map = L.map(container, {
zoomAnimation: false,
zoomSnap: 0,
topoMove: true,
// maxBounds: [[-90, -Infinity], [90, Infinity]],
worldCopyJump: true,
zoomAnimation: false,
fadeAnimation: false,
renderer: new L.SVG({ padding: 1 })
});
const topo = new LeafletTopology(countries, map);
const topoLayer = topo.createLayer(countries.objects.countries);
topoLayer.addTo(map);
mutable topoRef = topo;
// const topoLayer = new TopoJsonLayer(countries, countries.objects.countries, { padding: 1 });
// topoLayer.addTo(map);
// const bounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180));
// map.fitBounds(bounds);
map.setMaxBounds([[-90, -360], [90, 360]])
function fitWorld() {
const zoomY = map.getBoundsZoom(L.latLngBounds(L.latLng(-90, 0), L.latLng(90, 0)));
const zoomX = map.getBoundsZoom(L.latLngBounds(L.latLng(0, -180), L.latLng(0, 180)));
map.setMinZoom(Math.max(zoomX, zoomY));
}
fitWorld();
map.fitBounds([[-90, -360], [90, 360]]);
invalidation.then(() => map.remove());
container.map = map;
yield container;
}
countries = {
const geojson = await fetch("https://cdn.jsdelivr.net/gh/martynafford/natural-earth-geojson/50m/cultural/ne_50m_admin_0_countries_lakes.json").then(r => r.json());
for (let c of geojson.features) {
delete c.properties;
}
let topology = topojson.topology({ countries: geojson });
return topology; // topology.presimplify
}
[
L.Map.prototype.options.crs.wrapLng,
L.Map.prototype.options.crs.wrapLat
]
L.Map.prototype.options.crs.latLngToPoint(L.latLng(0,180), -8)
L.Map.prototype.options.crs.zoom(1)
// countries = await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-10m.json").then(r => r.json());
L.CRS.Earth
map.map.getBounds()
sp = d3.scalePow()
.exponent(2)
.domain([0, 1, 3])
.range([0.5, 0.5, 6]);
sp(3)
map.getrend
rtLayer = undefined;
/*
{
const scale = d3.scalePow()
.exponent(2)
.domain([0, 1, 5])
.range([1, 1, 10]);
return L.realtime(turf.featureCollection([]), {
noClip: true,
smoothFactor: 1,
weight: 1,
fnWeight(lineWidth, renderer) {
return scale(renderer._zoom) * lineWidth;
}
});
}
*/
clippedSVG = new ClippedSVG()
mapSize = ({ width: 2048, height: 904 });
topoJson
geoJson
topoJson
import { smoothTopology, makeContiguous, sampleTopology as topoJson, topojson, sampleGeoJson as geoJson } from "8c9dbd3e4bfdb2e9"
d3 = require("d3", "d3-geo", "d3-geo-projection", "d3-regression");
Flatbush = require('flatbush@4.2.0/flatbush.js');
function bboxFromCoordArray(coords) {
let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
for (let [x, y] of coords) {
if (x < x0) x0 = x;
if (x > x1) x1 = x;
if (y < y0) y0 = y;
if (y > y1) y1 = y;
}
return [x0, y0, x1, y1];
}
L = {
const L = await require('leaflet@1.9.4/dist/leaflet-src.js');
L.Bounds.prototype.toBboxArray = function() {
const nw = this.getTopLeft();
const se = this.getBottomRight();
return bboxFromCoordArray([[nw.x, nw.y], [se.x, se.y]]);
};
L.LatLngBounds.prototype.toBboxArray = function() {
const nw = this.getNorthWest();
const se = this.getSouthEast();
return bboxFromCoordArray([[nw.lng, nw.lat], [se.lng, se.lat]]);
};
return L;
}
html`<link href='${resolve('leaflet@1.9.4/dist/leaflet.css')}' rel='stylesheet' />`
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.
