30:T516,{ const w = 640; return Plot.plot({ width: w, projection: { type: "reflect-y", domain: bounds.feature }, marks: [ Plot.geo(layers.get("Clerkenwell"), { fill: "oklch(98% 0.02 80deg)", stroke: "#ccc" }), Plot.geo(layers.get("field"), { fill: "oklch(95% 0.04 110deg)", stroke: "#ccc" }), Plot.geo(layers.get("garden"), { fill: "oklch(90% 0.05 120deg)", stroke: "#ccc" }), Plot.geo(layers.get("building"), { fill: "oklch(60% 0.05 30deg)", stroke: "#ccc" }), Plot.geo(layers.get("New River Head"), { fill: "oklch(85% 0.02 250deg)", stroke: "#ccc" }), Plot.geo(layers.get("New Reservoir"), { fill: "oklch(85% 0.02 250deg)", stroke: "#ccc" }), Plot.geo(layers.get("Reservoir"), { fill: "oklch(85% 0.02 250deg)", stroke: "#ccc" }), Plot.geo(layers.get("Round Pond"), { fill: "oklch(80% 0.05 250deg)", stroke: "#ccc" }), Plot.geo(layers.get("Coldbath Fields Gaol")[1], { fill: "oklch(40% 0.01 250deg)", stroke: "#ccc" }), Plot.geo(geoFleet, { stroke: "oklch(80% 0.02 250deg)", strokeWidth: 0.01 * w }) ] }); }31:T6b9,aggregateDefs([ createDashesRegular("dashesCombined", { stroke: "black", opacity: 0.1, strokeWidth: 4, lineSpacing: 4, strokeDashArray: [7, 2], rotate: 3 }), createDashesRegular("dashesGarden", { stroke: "oklch(40% 0.1 140deg)", opacity: 0.2, strokeWidth: 4, lineSpacing: 4, strokeDashArray: [7, 2], rotate: -12 }), createDashesRegular("dashesField", { stroke: "oklch(30% 0.1 140deg)", opacity: 0.05, strokeWidth: 3, lineSpacing: 6, strokeDashArray: [9, 2] }), createDotsRegular("dotsBuilding", { fill: "brown", opacity: 0.1, rotate: -5 }), createDotsRegular("dotsGarden", { fill: "oklch(50% 0.1 140deg)", opacity: 0.1, rotate: -85 }), createDotsRegular("dotsWater", { fill: "oklch(50% 0.1 210deg)", r: 0.9, spacing: 5, opacity: 0.2, rotate: 5 }), createVignette("vignetteCombined", { r: 200, strength: 0.6, dark: "black" }), createVignette("vignettePrison", { r: 100, strength: 0.5, dark: "black" }), createGradient("gradientPrison", { dark: "brown", rotate: 70, strength: 0.3, start: 0, end: 2 }), createVignette("vignetteBackground", { r: 200, strength: 0.4, light: "oklch(98% 0.02 80deg)", dark: "oklch(48% 0.02 80deg)" }), createVignette("vignetteGarden", { r: 200, strength: 0.3, dark: "oklch(40% 0.1 140deg)" }), createVignette("vignetteField", { r: 100, strength: 0.4, light: "oklch(90% 0.05 110deg)", dark: "oklch(60% 0.1 110deg)" }), createGradient("seGradientCombined", { dark: "brown", rotate: 70, strength: 0.5, start: 0.8, end: 2 }) ])32:T13c6,tyrerMap = { const w = 900; const waterFeatures = [ ...layers.get("New River Head"), ...layers.get("New Reservoir"), ...layers.get("Reservoir"), ...layers.get("Round Pond") ]; return Plot.plot({ style: `background:oklch(100% 0.01 60deg); box-shadow: inset 0 0 8em 8em oklch(40% 0.2 30deg /4%); /* Vignette effect */`, width: w, projection: { type: "reflect-y", domain: bounds.feature }, marks: [ // -------------- Background area Plot.geo(layers.get("Clerkenwell"), { fill: "oklch(98% 0.02 80deg)", stroke: "#ccc" }), drawFillTexture(layers.get("Clerkenwell"), { fill: "url(#vignetteBackground)" }), // -------------- Fields drawShadow(layers.get("field"), { fill: "oklch(95% 0.04 110deg)", shadow: "oklch(70% 0.04 110deg / 30%)" }), drawFillTexture(layers.get("field"), { fill: "url(#dashesField)" }), drawOutline(layers.get("field"), { opacity: 0.1, shadowWidth: 10, shadowOpacity: 0.04 }), drawFillTexture(layers.get("field"), { fill: "url(#vignetteField)" }), // -------------- Gardens drawShadow(layers.get("garden"), { fill: "oklch(90% 0.05 120deg)", shadow: "oklch(70% 0.05 120deg / 20%)" }), drawFillTexture(layers.get("garden"), { fill: "url(#dashesGarden)" }), drawFillTexture(layers.get("garden"), { fill: "url(#dotsGarden)" }), drawFillTexture(layers.get("garden"), { fill: "url(#vignetteGarden)" }), drawOutline(layers.get("garden")), // -------------- Buildings drawShadow(layers.get("building"), { fill: "oklch(70% 0.2 50deg)" }), drawFillTexture(layers.get("building"), { fill: "url(#dashesCombined)" }), drawFillTexture(layers.get("building"), { fill: "url(#dotsBuilding)" }), drawFillTexture(layers.get("building"), { fill: "url(#vignetteCombined)" }), drawFillTexture(layers.get("building"), { fill: "url(#seGradientCombined)" }), drawOutline(layers.get("building")), // -------------- Water features Plot.geo(waterFeatures, { fill: "oklch(85% 0.02 210deg)" }), drawFillTexture(waterFeatures, { fill: "url(#dotsWater)" }), drawFillTexture(waterFeatures, { fill: "url(#vignetteCombined)" }), drawOutline(waterFeatures, { opacity: 0.1 }), // -------------- Prison drawShadow(layers.get("Coldbath Fields Gaol")[1], { fill: "#000", shadow: "oklch(40% 0.02 50deg /20%)" }), drawFillTexture(layers.get("Coldbath Fields Gaol")[1], { fill: "url(#vignettePrison)" }), drawFillTexture(layers.get("Coldbath Fields Gaol")[1], { fill: "url(#gradientPrison)" }), // -------------- River Plot.geo(geoFleet, { stroke: "oklch(80% 0.02 250deg)", strokeWidth: 0.01 * w }), // -------------- Headings and borders Plot.geo(border1, { strokeWidth: 2, opacity: 0.8 }), Plot.geo(border2, { strokeWidth: 3, opacity: 0.8 }), Plot.geo(border3, { strokeWidth: 2, opacity: 0.3 }), Plot.text(["CLERKENWELL"], { x: (bounds.x1 + bounds.x2) / 2, y: bounds.y2, lineAnchor: "bottom", dy: -w / 50, fontSize: w / 20, fontFamily: fnt.display, opacity: 0.6 }), Plot.text(["To\nThe Inhabitants of"], { x: bounds.x1 + 250, y: bounds.y1 + 370, lineAnchor: "bottom", fontSize: w / 30, fontFamily: fnt.script, opacity: 0.6 }), Plot.text(["CLERKENWELL"], { x: bounds.x1 + 250, y: bounds.y1 + 300, lineAnchor: "bottom", fontSize: w / 35, fontFamily: fnt.display, opacity: 0.5 }), Plot.text( [ "and its Environs\nThis PLAN\nis respectfully dedicated\nby their most Obedient Servt" ], { x: bounds.x1 + 250, y: bounds.y1 + 90, lineAnchor: "bottom", fontSize: w / 35, fontFamily: fnt.script, opacity: 0.6 } ), Plot.text(["JAMES TYRER."], { x: bounds.x1 + 380, y: bounds.y1 + 30, lineAnchor: "bottom", fontSize: w / 55, fontFamily: fnt.display, opacity: 0.5 }), Plot.text( [ "Obtained its name from a spring in Ray Street formerly called Clerks or Clerkenwell from the Parish Clerke of LONDON who used annually to meet there & represent certain parts Scripture in a Theatrical manner. \n\nThe Present Church stands on part of the site of the Old Church, and was Consecrated by Beilby Bishop of London, 10th July 1792." ], { x: bounds.x2 - 420, y: bounds.y2, textAnchor: "start", lineAnchor: "top", lineWidth: 17, lineHeight: 1.2, fontSize: w / 70, fontFamily: fnt.serif, opacity: 0.7 } ) ] }); }33:[] 2e:{"title":"30 Day Map Challenge: 7. Vintage style","cells":[{"id":0,"value":"# 30 Day Map Challenge: 7. Vintage style","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"For this challenge, I wanted to explore how far I can push standard [Observable Plot](https://observablehq.com/plot/) specifications to suggest vintage styles. I've explored this before with [Playfair's Wheat and Wages](https://observablehq.com/@jwolondon/wheat-and-wages), but mapping introduces new challenges.","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"## Data Source and processing\nPart of the difficulty, especially for a daily challenge where I only have a few hours to work on the full design, is getting hold of suitable data. So today, I decided to reuse some previously digitised boundary data representing features of [Tyrer's Plan for Clerkenwell, 1805](https://commons.wikimedia.org/wiki/File:Clerkenwell_1805_Cartographer;_Tyrer,_James.jpg). Although the techniques I describe below would work with a variety of geoJSON features, such as those from [OpenStreetMap](https://www.openstreetmap.org/export#map=17/51.524946/-0.106575).\n\nThis comprises a geoJSON file of polygons (`geoPoly`) representing landuse and buildings and another (`geoFleet`) containing a simple line feature representing the River Fleet.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"geoPoly = topojson.feature(\n await d3.json(\n \"https://gicentre.github.io/data/30dayMapChallenge/clerkenwell1805Polys.json\"\n ),\n \"clerkenwell\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"geoFleet = topojson.feature(\n await d3.json(\n \"https://gicentre.github.io/data/30dayMapChallenge/riverFleet.json\"\n ),\n \"fleet\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"bounds = TDMC.boundsFromGeo(geoPoly, {\n easting: \"x\",\n northing: \"y\",\n inset: 100,\n insetTop: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"Plot.plot({\n width: 500,\n projection: { type: \"reflect-y\", domain: bounds.feature },\n marks: [\n Plot.geo(geoPoly, { stroke: \"black\" }),\n Plot.geo(geoFleet, { stroke: \"steelblue\", strokeWidth: 4 })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"When building up a more complex visual design, I find it useful to separate the components of the map into _layers_, so that I can apply different visual effects on each. In the case of the polygon file, we can separate it into layers according to the `properties.name` element of each feature:","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"Plot.plot(\n (() => {\n const n = 3; // number of facet columns\n const keys = [...new Set(geoPoly.features.map((d) => d.properties.name))];\n const index = new Map(keys.map((key, i) => [key, i]));\n const fx = (key) => index.get(key) % n;\n const fy = (key) => Math.floor(index.get(key) / n);\n return {\n height: 640,\n axis: null,\n projection: { type: \"reflect-y\", domain: bounds.feature },\n marks: [\n Plot.geo(geoPoly, {\n stroke: \"firebrick\",\n strokeWidth: 0.8,\n fx: (d) => fx(d.properties.name),\n fy: (d) => fy(d.properties.name)\n }),\n Plot.text(keys, { fx, fy, frameAnchor: \"top-left\", dx: 6, dy: 6 }),\n Plot.frame({ opacity: 0.2 })\n ]\n };\n })()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"layers = geoPoly.features.reduce((map, feature) => {\n const name = feature.properties.name;\n map.has(name) ? map.get(name).push(feature) : map.set(name, [feature]);\n return map;\n}, new Map())","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"This provides the opportunity to style the layers separately before overlaying them. And this is where we can start to implement a map style closer to the Tyrer original.","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"## Basemap","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"The map looks rather flat and not particularly 'vintage'. Let's consider how to add a bit of texture and depth to the features. \n\nTo experiment with approaches, I created a simple pair of polygons:","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"testGeo = new GeoJSON()\n .polygon([\n [0, 0],\n [50, 0],\n [50, 50],\n [0, 50]\n ])\n .polygon([\n [50, 0],\n [100, 0],\n [100, 12],\n [62, 12],\n [62, 37],\n [100, 37],\n [100, 50],\n [50, 50]\n ]).featureCollection","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"function drawTest(marks = [Plot.geo(testGeo)]) {\n return Plot.plot({\n width: 300,\n inset: 10,\n projection: { type: \"reflect-y\", domain: testGeo },\n marks: marks\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"drawTest()","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"### Boundary lines\n\nA simple way to add a little richness to lines is first to draw a semi-transparent thicker line before overlaying the finer line on top. This gives a slight 'bleeding' effect that softens line appearance. We can also add some semi-transparent dashed lines with irregularly overlapping gaps to give a slight unevenness to the lines.","pinned":false,"hidden":false,"mode":"md"},{"id":431,"value":"drawTest(drawOutline(testGeo))","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"function drawOutline(geo, options = {}) {\n const { shadowWidth = 4, shadowOpacity = 0.08 } = options;\n return [\n Plot.geo(geo, { strokeWidth: shadowWidth, opacity: shadowOpacity }),\n Plot.geo(geo, { opacity: 0.5, ...options }),\n Plot.geo(geo, {\n opacity: 0.3,\n strokeDasharray: [2, 2, 3, 1],\n dx: 0.05,\n dy: -0.05,\n ...options\n }),\n Plot.geo(testGeo, {\n opacity: 0.3,\n strokeDasharray: [1, 1],\n dx: -0.05,\n dy: 0.05,\n ...options\n })\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"### 3d shadow\n\nIt was common in 18th and 19th century urban maps to symbolise buildings with a perspective or 3d style. We can hint at this with a simple shadow effect, drawing the shape twice, once with a southeast offset in a darker colour and then without any offset in its base colour:","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"drawTest(drawShadow(testGeo))","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"function drawShadow(geo, options = {}) {\n const { fill = \"oklch(85% 0.08 70deg)\", shadow = \"oklch(55% 0.08 70deg)\" } =\n options;\n return [\n // Shadow\n Plot.geo(geo, {\n ...options,\n fill: shadow,\n dx: 2,\n dy: 2\n }),\n // Interior\n Plot.geo(geo, { fill: fill, ...options })\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"### Internal pattern textures\n\nWhile Plot does not implement infilling of patterned textures in its polygons directly, this is fairly easily achieved by setting an SVG `def` with a `pattern` and named `id`. This can then be applied to any Plot object setting its `fill` property to point to the named `id`.\n\nHere, for example we define a dashed line fill pattern:","pinned":false,"hidden":false,"mode":"md"},{"id":666,"value":"function aggregateDefs(defs) {\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"function createDashesRegular(id, options = {}) {\n const {\n stroke = \"black\",\n strokeWidth = 1,\n strokeDashArray = [3, 3],\n opacity = 0.1,\n spacing = 10, // Horizontal spacing\n lineSpacing = 10, // Vertical distance between lines\n rotate = 0\n } = options;\n return `\n \n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":860,"value":"aggregateDefs([\n createDashesRegular(\"dashesTest\", {\n stroke: \"firebrick\",\n opacity: 0.6,\n strokeWidth: 2,\n strokeDashArray: [4, 2],\n rotate: -5\n })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"drawTest(\n drawFillTexture(testGeo, { fill: \"url(#dashesTest)\", stroke: \"black\" })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"And another for creating dots:","pinned":false,"hidden":false,"mode":"md"},{"id":607,"value":"aggregateDefs([\n createDotsRegular(\"dotsTest\", { fill: \"firebrick\", opacity: 0.3, rotate: -5 })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"function createDotsRegular(id, options = {}) {\n const {\n fill = \"black\",\n r = 0.4,\n opacity = 0.1,\n spacing = 10,\n rotate = 0\n } = options;\n return `\n \n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"drawTest(drawFillTexture(testGeo, { fill: \"url(#dotsTest)\", stroke: \"black\" }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"### Feature vignettes\n\nThe handpainted nature of older maps would often result in a slightly darker area around the edges of regions. This can create a subtle vignette effect where the central interior is left slightly brighter. We can mimic this with an SVG radial gradient, applied in much the same way as the pattern textures above:","pinned":false,"hidden":false,"mode":"md"},{"id":625,"value":"function createVignette(id, options = {}) {\n const { dark = \"black\", light = \"white\", r = 100, strength = 0.1 } = options;\n return `\n \n \n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"aggregateDefs([\n createVignette(\"vignetteTest\", { r: 200, strength: 0.3, dark: \"firebrick\" })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"function drawFillTexture(geo, options = {}) {\n return [Plot.geo(geo, options)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"drawTest(drawFillTexture(testGeo, { fill: \"url(#vignetteTest)\" }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"### Feature gradients\n\nWe can use the same approach as the vignette to create linear gradients in any direction, which can add some depth to internal shading.","pinned":false,"hidden":false,"mode":"md"},{"id":760,"value":"function createGradient(id, options = {}) {\n const {\n dark = \"black\",\n light = \"white\",\n strength = 0.1,\n rotate = 45,\n start = 0, // Where the gradient starts\n end = 1 // Where it ends (can be more than 1 for more subtle gradients)\n } = options;\n return `\n \n \n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":772,"value":"aggregateDefs([\n createGradient(\"seGradientTest\", {\n strength: 0.3,\n start: 0.4,\n end: 2\n })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"drawTest(drawFillTexture(testGeo, { fill: \"url(#seGradientTest)\" }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"And overlaying different gradients can create more interesting combined effects. Here are the vignette and gradient fills above combined:","pinned":false,"hidden":false,"mode":"md"},{"id":841,"value":"drawTest([\n drawFillTexture(testGeo, { fill: \"url(#vignetteTest)\" }),\n drawFillTexture(testGeo, { fill: \"url(#seGradientTest)\" })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"### Combining Textures\n\nCombining all of the above we can create richer more organic looking features:","pinned":false,"hidden":false,"mode":"md"},{"id":968,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"drawTest([\n drawShadow(testGeo, { fill: \"oklch(70% 0.2 50deg)\" }),\n drawFillTexture(testGeo, { fill: \"url(#dashesCombined)\" }),\n drawFillTexture(testGeo, { fill: \"url(#dotsBuilding)\" }),\n drawFillTexture(testGeo, { fill: \"url(#vignetteCombined)\" }),\n drawFillTexture(testGeo, { fill: \"url(#seGradientCombined)\" }),\n drawOutline(testGeo)\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1228,"value":"## Typography\n\nAs was common in maps of the 19th Century, an elaborate shadowed display font would be used for the main title, a more functional serif font for reference information, and a flourishing script for a dedication. I've tried to capture the flavour of each with a selection from Google Fonts:","pinned":false,"hidden":false,"mode":"md"},{"id":1230,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1234,"value":"fnt = ({\n script: \"Pinyon Script\",\n serif: \"Old Standard TT\",\n display: \"Rye\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1386,"value":"### Borders\n\nTo create a simple border around the map, I just used the map bounds as reference to create a simple geoJSON polygon around the map area and title.","pinned":false,"hidden":false,"mode":"md"},{"id":1258,"value":"border1 = new GeoJSON().polygon([\n [bounds.x1 - 30, bounds.y1 - 50],\n [bounds.x2 + 30, bounds.y1 - 50],\n [bounds.x2 + 30, bounds.y2 + 20],\n [bounds.x1 - 30, bounds.y2 + 20]\n]).featureCollection","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"border2 = new GeoJSON().polygon([\n [bounds.x1 - 70, bounds.y1 - 85],\n [bounds.x2 + 70, bounds.y1 - 85],\n [bounds.x2 + 70, bounds.y2 + 65],\n [bounds.x2 - 400, bounds.y2 + 65],\n [bounds.x2 - 400, bounds.y2 + 135],\n [bounds.x1 + 400, bounds.y2 + 135],\n [bounds.x1 + 400, bounds.y2 + 65],\n [bounds.x1 - 70, bounds.y2 + 65]\n]).featureCollection","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"border3 = new GeoJSON().polygon([\n [bounds.x1 - 60, bounds.y1 - 75],\n [bounds.x2 + 60, bounds.y1 - 75],\n [bounds.x2 + 60, bounds.y2 + 55],\n [bounds.x2 - 410, bounds.y2 + 55],\n [bounds.x2 - 410, bounds.y2 + 125],\n [bounds.x1 + 410, bounds.y2 + 125],\n [bounds.x1 + 410, bounds.y2 + 55],\n [bounds.x1 - 60, bounds.y2 + 55]\n]).featureCollection","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"## A Vintage Map\n\nBringing all the ideas above together, here is my attempt at reflecting the style of the early 18th Century Tyrer map, using textured geo features and stylistic typography.\n\nFor the daily challenge I ran out of time to place street names on the map itself, but this would be quite possible using [curved text marks](https://observablehq.com/@jwolondon/curved-text-mark?collection=@jwolondon/utilities). ","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"import { TDMC } from \"@jwolondon/30-day-map-challenge-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"_For simple polygon generation:_","pinned":false,"hidden":false,"mode":"md"},{"id":393,"value":"import { GeoJSON } from \"@jwolondon/geojson-generator\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}