L.SVG.prototype
leafletGeoJson = L.geoJSON(testFeature, {
style: function (feature) {
return {color: "#ff00ff"};
}
});
leafletGeoJson._path
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: clippedSVG
});
L.geoJSON(geoJson, {
style: function (feature) {
return {color: "#ff00ff"};
}
}).addTo(map)
// leafletGeoJson.addTo(map);
map.fitBounds(bounds);
}
L.Util.stamp
clippedSVG._layers
clippedSVG = new ClippedSVG()
L.Util.splitWords
ClippedSVG = {
const { stamp, splitWords } = L.Util;
const { create } = L.SVG;
const parent = L.SVG.prototype;
return L.SVG.extend({
options: {
padding: 0.1,
continuous: true,
},
_initContainer() {
parent._initContainer.call(this);
this._defs = create("defs");
this._container.prepend(this._defs);
},
_destroyContainer() {
parent._destroyContainer.call(this);
delete this._defs;
},
_initPath(layer) {
const layerStamp = stamp(layer);
const clipPath = layer._clipPath = create('clipPath');
clipPath.setAttribute("id", `clip_${layerStamp}`);
const path = layer._path = create('path');
path.setAttribute("id", `path_${layerStamp}`);
clipPath.append(path);
const use = layer._use = create('use');
use.setAttribute("href", "#" + layer._path.id);
if (layer.options.className) {
path.classList.add(...splitWords(layer.options.className));
}
if (layer.options.interactive) {
path.classList.add('leaflet-interactive');
}
this._updateStyle(layer);
this._layers[layerStamp] = layer;
},
_addPath(layer) {
if (!this._rootGroup || !this._defs) { this._initContainer(); }
this._defs.appendChild(layer._clipPath);
this._rootGroup.appendChild(layer._use);
layer.addInteractiveTarget(layer._use);
},
_removePath(layer) {
layer._clipPath.remove();
layer._path.remove();
layer.removeInteractiveTarget(layer._use);
delete this._layers[stamp(layer)];
},
_updateStyle(layer) {
parent._updateStyle.call(this, layer);
const use = layer._use,
options = layer.options;
if (options.clip || options.clip === undefined) {
use.setAttribute('clip-path', `url(#${layer._clipPath.id})`);
}
else {
use.removeAttribute('clip-path');
}
},
_bringToFront(layer) {
L.DomUtil.toFront(layer._use);
},
_bringToBack(layer) {
L.DomUtil.toBack(layer._use);
}
});
}
new L.Bounds()
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;
}
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>`
import { sampleGeoJson as geoJson } from "053fea843f886be5"
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
turf = await require('@turf/turf@6.5.0/turf.min.js')
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.
