25:["$","title",null,{"children":"Leaflet POC checkpoint | mheard03 | Observable"}] 49:T810,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); } }); }4a:[] 29:{"id":"72bd8be6742b0716","slug":null,"title":"Leaflet POC checkpoint","thumbnail":"e311927d92c643e7a4f95843c148a192a1cca3be878297696b13d745174bbd09","access_level":"public","create_time":"$D2023-08-30T12:54:28.929Z","update_time":"$D2023-08-30T12:54:28.929Z","view_time":null,"first_public_time":"$D2023-08-30T12:54:28.929Z","has_unpublished_edits":null,"fork":{"id":"7e72891a23b5d28c","slug":null,"title":"Leaflet POC","owner":{"id":"02d4ccf8951f2f02","login":"mheard03","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"02d4ccf8951f2f02","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":"starter_2024","bio":"","following":false},"version":301,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6afb6cac5f188ec0","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6afb6cac5f188ec0","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Leaflet POC checkpoint","cells":[{"id":0,"value":"# Leaflet POC checkpoint","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"L.SVG.prototype","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"leafletGeoJson = L.geoJSON(testFeature, {\n style: function (feature) {\n return {color: \"#ff00ff\"};\n }\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"leafletGeoJson._path","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"map = {\n const height = width * mapSize.height / mapSize.width;\n const container = html`

`;\n yield container;\n\n const bounds = L.latLngBounds(L.latLng(0, 0), L.latLng(mapSize.height, mapSize.width));\n const map = L.map(container, {\n crs: wrappingCrs,\n minZoom: -30,\n zoomSnap: 0,\n renderer: clippedSVG\n });\n L.geoJSON(geoJson, {\n style: function (feature) {\n return {color: \"#ff00ff\"};\n }\n }).addTo(map)\n // leafletGeoJson.addTo(map);\n map.fitBounds(bounds);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"L.Util.stamp","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"clippedSVG._layers","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"clippedSVG = new ClippedSVG()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"L.Util.splitWords","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"new L.Bounds()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"testFeature = {\n const featureCoords = geoJson.features.map(f => f.geometry)\n .map(g => g.type == \"Polygon\" ? g.coordinates : g.coordinates.flat())\n .map((fc,i) => ({ index: i, xCoords: fc.flat().map(c => c[0] == 0 ? Infinity : c[0]) }))\n const leftmost = _.minBy(featureCoords, fc => _.min(fc.xCoords));\n return geoJson.features[leftmost.index];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"geoJson","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"L.geoJSON({ type: \"FeatureCollection\", features: [testFeature] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"L.CRS.Simple.projection.bounds","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"wrappingCrs.infinite","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"mapSize = ({ width: 2048, height: 904 });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"wrappingCrs = {\n const simple = L.CRS.Simple;\n const wrappingCrs = L.extend({}, simple, {\n wrapLng: [0, mapSize.width],\n infinite: true,\n projection: {\n project: function(latLng) {\n const latLng2 = L.latLng(mapSize.height - latLng.lat, latLng.lng);\n return simple.projection.project.call(this, latLng2);\n },\n unproject: function(point) {\n const latLng = simple.projection.unproject.call(this, point);\n return L.latLng(mapSize.height - latLng.lat, latLng.lng);\n },\n bounds: {\n min: { x: 0, y: 0 },\n max: { x: mapSize.width, y: mapSize.height }\n }\n }\n })\n return wrappingCrs;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"import { sampleGeoJson as geoJson } from \"053fea843f886be5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"turf = await require('@turf/turf@6.5.0/turf.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null