31:T437,Choosing good label points for polygons is hard. The other day, [Felt](https://felt.com/) published a blog article entitled ["How Tippecanoe makes Felt’s polygons look good, part 1: choosing good label points"](https://felt.com/blog/tippecanoe-label-points) (go read it, it's very good & interesting!). The blog post is discussing the pros and cons of using a few methods for finding polygon label points. Among others, a polygons centroid, a point-on-surface (POS), as well as [Polylabel](https://github.com/mapbox/polylabel) are explored. I was wondering how the [GEOSMaximumInscribedCircle](https://libgeos.org/doxygen/geos__c_8h.html#ac7980d2fa0fe572204c3d2f3340083ff) would compare to the others, as it's a function specifically made for finding the largest possible circle within a polygon → the perfect spot for a label! This notebook calculates label positions using four different methods for ${countries.length} country boundaries. You can also paste your own GeoJSON in the textbox below, or draw a Polygon using the draw tools in the map. Happy exploring!32:T1b5a,{ const container = html`

`; yield container; mapboxgl.accessToken = "pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw"; let initialPolygon = viewof selectedCountry.value; if (customGeojsonString) { initialPolygon = JSON.parse(customGeojsonString); } else { initialPolygon = countries.features.find( ({ properties: { name } }) => name === initialPolygon ); } const map = new mapboxgl.Map({ container: container, style: "mapbox://styles/toffi/clnx5216j006b01qm3ijohntw", center: turf.center(initialPolygon).geometry.coordinates, zoom: 10 }); map.fitBounds(turf.bbox(initialPolygon), { padding: 20, duration: 0 }); const options = { displayControlsDefault: false, controls: { polygon: true, trash: true }, userProperties: true }; const Draw = new MapboxDraw(options); map.addControl(Draw, "top-left"); let fc = turf.featureCollection([]); function calcLabelPositions(polygon) { // make sure polygon is a feature if (polygon.type === "FeatureCollection") polygon = polygon.features[0]; // Turf.js // Centroid const startCentroid = performance.now(); const centroid = turf.centroid(polygon); centroid.properties = { type: "Centroid", name: polygon.properties?.name || "Unnamed", ID: polygon.ID }; const endCentroid = performance.now(); mutable times.Centroid += ~~(endCentroid - startCentroid); // Point on surface const startPos = performance.now(); const pos = turf.pointOnSurface(polygon); pos.properties = { type: "Point on surface (POS)", name: polygon.properties?.name || "Unnamed", ID: polygon.ID }; const endPos = performance.now(); mutable times.POS += ~~(endPos - startPos); // Polylabel const startPolylabel = performance.now(); const polylabelPos = findPolylabel( polygon, viewof polylabelPrecision.value ); const polylab = turf.point(polylabelPos); polylab.properties = { type: "Polylabel", name: polygon.properties?.name || "Unnamed", ID: polygon.ID }; const endPolylabel = performance.now(); mutable times.Polylabel += ~~(endPolylabel - startPolylabel); // GEOS // Maximum inscribed circle const startMic = performance.now(); const geomPtr = geojsonToGeosGeom(polygon); const micPtr = geos.GEOSMaximumInscribedCircle( geomPtr, viewof micTolerance.value ); // the mic is a GEOSGeom linestring with two points, // the first point is the center of the mic, the second // point is the distance (tolerance) of the mic const centerPtr = geos.GEOSGeomGetPointN(micPtr, 0); const mic = turf.feature(geosGeomToGeojson(centerPtr)); mic.properties = { type: "Maximum inscribed circle (MIC)", name: polygon.properties?.name || "Unnamed", ID: polygon.ID }; // free memory geos.GEOSFree(centerPtr); geos.GEOSFree(micPtr); geos.GEOSFree(geomPtr); const endMic = performance.now(); mutable times.MIC += ~~(endMic - startMic); fc.features.push(centroid, pos, mic, polylab); } viewof selectedCountry.addEventListener("change", () => { const newSelectedCountryName = viewof selectedCountry.value; const newSelectedCountryBoundary = countries.features.find( ({ properties: { name } }) => name === newSelectedCountryName ); map.fitBounds(turf.bbox(newSelectedCountryBoundary), { padding: 20 }); }); function updateLabels() { // reset performance times mutable times = { Centroid: 0, POS: 0, Polylabel: 0, MIC: 0 }; // reset fc fc = turf.featureCollection([]); countries.features.forEach((country) => { calcLabelPositions(country); }); console.log(mutable times); map.getSource("label-points").setData(fc); } // create a minimal debounced update labels function, since Observable sliders // fire change events constantly while sliding const debouncedUpdateLabels = _.debounce(updateLabels, 10); viewof micTolerance.addEventListener("change", debouncedUpdateLabels); viewof polylabelPrecision.addEventListener("change", debouncedUpdateLabels); map.on("load", function () { if (customGeojsonString) { const ID = Draw.add(initialPolygon); initialPolygon.ID = ID[0]; calcLabelPositions(initialPolygon); } countries.features.forEach((country) => { const ID = Draw.add(country); country.ID = ID[0]; calcLabelPositions(country); }); console.log(mutable times); map.on("draw.create", (e) => { // create labels for new poly, mutates fc calcLabelPositions(e.features[0]); map.getSource("label-points").setData(fc); }); map.on("draw.delete", (e) => { console.log(e.features[0], fc); fc.features = fc.features.filter( ({ properties: { ID, id } }) => ID !== e.features[0].ID && ID !== e.features[0].id && id !== e.features[0].id ); map.getSource("label-points").setData(fc); }); map.addSource("label-points", { type: "geojson", data: fc }); map.addLayer({ id: "label-position", type: "circle", source: "label-points", paint: { // Make circles larger as the user zooms from z12 to z22. "circle-radius": 5, // Color circles by ethnicity, using a `match` expression. "circle-color": [ "match", ["get", "type"], "Centroid", "#fbb03b", "Maximum inscribed circle (MIC)", "#223b53", "Polylabel", "#e55e5e", "Point on surface (POS)", "#21a373", /* other */ "#ccc" ] } }); map.addLayer({ id: "label-points-labels", type: "symbol", source: "label-points", layout: { "text-field": ["get", "name"], "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], "text-size": 18 }, paint: { "text-color": "#fff", "text-halo-width": 1, "text-halo-color": "grey" }, ...(viewof radios.value !== "All" ? { filter: ["==", "type", viewof radios.value] } : {}) }); }); function changeLabelPos() { const curValue = viewof radios.value; if (curValue === "All") { map.setFilter("label-points-labels", null); } else { map.setFilter("label-points-labels", ["==", "type", curValue]); } } viewof radios.addEventListener("change", changeLabelPos); invalidation.then(() => { map.remove(); viewof micTolerance.removeEventListener("change", debouncedUpdateLabels); viewof polylabelPrecision.removeEventListener( "change", debouncedUpdateLabels ); viewof radios.removeEventListener("change", changeLabelPos); }); }33:T1a32,function geojsonToGeosGeom(geojson) { // assume only 2d (x, y) geometries switch (geojson.type) { case "Feature": return geojsonToGeosGeom(geojson.geometry); case "FeatureCollection": if (geojson.features.length === 0) { return geos.GEOSGeom_createEmptyCollection(7); // geos.GEOS_GEOMETRYCOLLECTION } else { const geoms = []; // iterate over each feature geojson.features.forEach((feature) => { geoms.push(geojsonToGeosGeom(feature.geometry)); }); const geomsPtr = geos.Module._malloc(geoms.length * 4); const geomsArr = new Uint32Array(geoms); geos.Module.HEAPU32.set(geomsArr, geomsPtr / 4); const multiGeomsPtr = geos.GEOSGeom_createCollection( 7, // geos.GEOS_GEOMETRYCOLLECTION geomsPtr, geoms.length ); geos.Module._free(geomsPtr); return multiGeomsPtr; } case "GeometryCollection": if (geojson.geometries.length === 0) { return geos.GEOSGeom_createEmptyCollection(7); // geos.GEOS_GEOMETRYCOLLECTION } else { const geoms = []; // iterate over each feature geojson.geometries.forEach((feature) => { geoms.push(geojsonToGeosGeom(feature)); }); const geomsPtr = geos.Module._malloc(geoms.length * 4); const geomsArr = new Uint32Array(geoms); geos.Module.HEAPU32.set(geomsArr, geomsPtr / 4); const multiGeomsPtr = geos.GEOSGeom_createCollection( 7, // geos.GEOS_GEOMETRYCOLLECTION geomsPtr, geoms.length ); geos.Module._free(geomsPtr); return multiGeomsPtr; } case "Point": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyPoint(); } else { return geos.GEOSGeom_createPointFromXY( geojson.coordinates[0], geojson.coordinates[1] ); } case "LineString": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyLineString(); } else { const seq = geojsonCoordsToGeosCoordSeq(geojson.coordinates); return geos.GEOSGeom_createLineString(seq); } case "Polygon": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyPolygon(); } else { const shellSeq = geojsonCoordsToGeosCoordSeq(geojson.coordinates[0]); const shell = geos.GEOSGeom_createLinearRing(shellSeq); const holes = []; if (geojson.coordinates.length > 1) { for (let i = 1; i < geojson.coordinates.length; i++) { const holeSeq = geojsonCoordsToGeosCoordSeq(geojson.coordinates[i]); holes.push(geos.GEOSGeom_createLinearRing(holeSeq)); } } let holesPtr = null; if (holes.length > 0) { const holesArr = new Uint32Array(holes); holesPtr = geos.Module._malloc(holes.length * 4); geos.Module.HEAPU32.set(holesArr, holesPtr / 4); } const polyPtr = geos.GEOSGeom_createPolygon( shell, holesPtr, holes.length ); if (holes.length > 0) { geos.Module._free(holesPtr); } return polyPtr; } case "MultiPoint": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyCollection(4); // geos.GEOS_MULTIPOINT } else { const points = []; for (let i = 0; i < geojson.coordinates.length; i++) { points.push( geos.GEOSGeom_createPointFromXY( geojson.coordinates[i][0], geojson.coordinates[i][1] ) ); } const pointsPtr = geos.Module._malloc(points.length * 4); const pointsArr = new Uint32Array(points); geos.Module.HEAPU32.set(pointsArr, pointsPtr / 4); const multiPointPtr = geos.GEOSGeom_createCollection( 4, // geos.GEOS_MULTIPOINT pointsPtr, points.length ); geos.Module._free(pointsPtr); return multiPointPtr; } case "MultiLineString": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyCollection(5); // geos.GEOS_MULTILINESTRING } else { const lines = []; for (let i = 0; i < geojson.coordinates.length; i++) { const seq = geojsonCoordsToGeosCoordSeq(geojson.coordinates[i]); lines.push(geos.GEOSGeom_createLineString(seq)); } const linesPtr = geos.Module._malloc(lines.length * 4); const linesArr = new Uint32Array(lines); geos.Module.HEAPU32.set(linesArr, linesPtr / 4); const multiLinePtr = geos.GEOSGeom_createCollection( 5, // geos.GEOS_MULTILINESTRING linesPtr, lines.length ); geos.Module._free(linesPtr); return multiLinePtr; } case "MultiPolygon": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyCollection(6); // geos.GEOS_MULTIPOLYGON } else { const polygons = []; for (let i = 0; i < geojson.coordinates.length; i++) { const shellSeq = geojsonCoordsToGeosCoordSeq( geojson.coordinates[i][0] ); const shell = geos.GEOSGeom_createLinearRing(shellSeq); const holes = []; if (geojson.coordinates[i].length > 1) { for (let j = 1; j < geojson.coordinates[i].length; j++) { const holeSeq = geojsonCoordsToGeosCoordSeq( geojson.coordinates[i][j] ); holes.push(geos.GEOSGeom_createLinearRing(holeSeq)); } } let holesPtr = null; if (holes.length > 0) { const holesArr = new Uint32Array(holes); holesPtr = geos.Module._malloc(holes.length * 4); geos.Module.HEAPU32.set(holesArr, holesPtr / 4); } const polyPtr = geos.GEOSGeom_createPolygon( shell, holesPtr, holes.length ); if (holes.length > 0) { geos.Module._free(holesPtr); } polygons.push(polyPtr); } const polygonsPtr = geos.Module._malloc(polygons.length * 4); const polygonsArr = new Uint32Array(polygons); geos.Module.HEAPU32.set(polygonsArr, polygonsPtr / 4); const multiPolyPtr = geos.GEOSGeom_createCollection( 6, // geos.GEOS_MULTIPOLYGON polygonsPtr, polygons.length ); geos.Module._free(polygonsPtr); return multiPolyPtr; } default: return null; } }34:T12b8,function geosGeomToGeojson(geomPtr) { if (!geomPtr) { return null; } const geomType = geos.GEOSGeomTypeId(geomPtr); switch (geomType) { case 0: { // geos.GEOS_POINT const seq = geos.GEOSGeom_getCoordSeq(geomPtr); const coords = []; const sizePtr = geos.Module._malloc(4); geos.GEOSCoordSeq_getSize(seq, sizePtr); const size = geos.Module.getValue(sizePtr, "i32"); geos.Module._free(sizePtr); if (size === 1) { const xPtr = geos.Module._malloc(8); const yPtr = geos.Module._malloc(8); geos.GEOSCoordSeq_getXY(seq, 0, xPtr, yPtr); const x = geos.Module.getValue(xPtr, "double"); const y = geos.Module.getValue(yPtr, "double"); geos.Module._free(xPtr); geos.Module._free(yPtr); coords.push(x, y); } const pointJson = { type: "Point", coordinates: coords }; return pointJson; } case 1: { // geos.GEOS_LINESTRING const seq = geos.GEOSGeom_getCoordSeq(geomPtr); const coords = geosCoordSeqToGeojsonCoords(seq); const lineJson = { type: "LineString", coordinates: coords }; return lineJson; } // case 2: // geos.GEOS_LINEARRING ... should not happen case 3: { // geos.GEOS_POLYGON const coords = []; const shell = geos.GEOSGetExteriorRing(geomPtr); if (shell !== 0) { const shellSeq = geos.GEOSGeom_getCoordSeq(shell); const sizePtr = geos.Module._malloc(4); geos.GEOSCoordSeq_getSize(shellSeq, sizePtr); const size = geos.Module.getValue(sizePtr, "i32"); geos.Module._free(sizePtr); if (size > 0) { coords.push(geosCoordSeqToGeojsonCoords(shellSeq)); const numRings = geos.GEOSGetNumInteriorRings(geomPtr); for (let i = 0; i < numRings; i++) { const hole = geos.GEOSGetInteriorRingN(geomPtr, i); const holeSeq = geos.GEOSGeom_getCoordSeq(hole); coords.push(geosCoordSeqToGeojsonCoords(holeSeq)); } } } const polyJson = { type: "Polygon", coordinates: coords }; return polyJson; } case 4: { // geos.GEOS_MULTIPOINT const coords = []; const numPoints = geos.GEOSGetNumGeometries(geomPtr); for (let i = 0; i < numPoints; i++) { const point = geos.GEOSGetGeometryN(geomPtr, i); const seq = geos.GEOSGeom_getCoordSeq(point); const xPtr = geos.Module._malloc(8); const yPtr = geos.Module._malloc(8); geos.GEOSCoordSeq_getXY(seq, 0, xPtr, yPtr); const x = geos.Module.getValue(xPtr, "double"); const y = geos.Module.getValue(yPtr, "double"); geos.Module._free(xPtr); geos.Module._free(yPtr); coords.push([x, y]); } const multiPointJson = { type: "MultiPoint", coordinates: coords }; return multiPointJson; } case 5: { // geos.GEOS_MULTILINESTRING const coords = []; const numLines = geos.GEOSGetNumGeometries(geomPtr); for (let i = 0; i < numLines; i++) { const line = geos.GEOSGetGeometryN(geomPtr, i); const seq = geos.GEOSGeom_getCoordSeq(line); coords.push(geosCoordSeqToGeojsonCoords(seq)); } const multiLineJson = { type: "MultiLineString", coordinates: coords }; return multiLineJson; } case 6: { // geos.GEOS_MULTIPOLYGON const coords = []; const numPolys = geos.GEOSGetNumGeometries(geomPtr); for (let i = 0; i < numPolys; i++) { const poly = geos.GEOSGetGeometryN(geomPtr, i); const polyCoords = []; const shell = geos.GEOSGetExteriorRing(poly); const shellSeq = geos.GEOSGeom_getCoordSeq(shell); polyCoords.push(geosCoordSeqToGeojsonCoords(shellSeq)); const numRings = geos.GEOSGetNumInteriorRings(poly); for (let j = 0; j < numRings; j++) { const hole = geos.GEOSGetInteriorRingN(poly, j); const holeSeq = geos.GEOSGeom_getCoordSeq(hole); polyCoords.push(geosCoordSeqToGeojsonCoords(holeSeq)); } coords.push(polyCoords); } const multiPolyJson = { type: "MultiPolygon", coordinates: coords }; return multiPolyJson; } case 7: { // geos.GEOS_GEOMETRYCOLLECTION const geoms = []; const numGeoms = geos.GEOSGetNumGeometries(geomPtr); for (let i = 0; i < numGeoms; i++) { const geom = geos.GEOSGetGeometryN(geomPtr, i); geoms.push(geosGeomToGeojson(geom)); } const geomCollJson = { type: "GeometryCollection", geometries: geoms }; return geomCollJson; } default: return null; } }35:[{"id":"a6102ce0722dca12160996e330c4fa60c06773980df4a03525e78feabe4a5efc696a5d6f30be9a740b14c5696d35b777d003505ec54c499b7b3947dffd2d5b95","href":"https://static.observableusercontent.com/files/a6102ce0722dca12160996e330c4fa60c06773980df4a03525e78feabe4a5efc696a5d6f30be9a740b14c5696d35b777d003505ec54c499b7b3947dffd2d5b95","name":"world.geojson","type":"application/geo+json","lastModified":1697723047364.236,"size":11777464}] 2f:{"title":"Exploring different options for polygon label placement","cells":[{"id":0,"value":"# Exploring different options for polygon label placement","pinned":false,"hidden":false,"mode":"md"},{"id":500,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":353,"value":"viewof selectedCountry = Inputs.select(\n countries.features.map(({ properties: { name } }) => name),\n {\n sort: \"ascending\",\n value: \"Bermuda\",\n label: \"Fly to a specifc country\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"viewof customGeojsonString = Inputs.textarea({\n label: \"Or paste a GeoJSON string\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"viewof polylabelPrecision = Inputs.range([0, 10], {\n label: \"Polylabel precision\",\n value: 1,\n step: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"viewof micTolerance = Inputs.range([0, 0.1], {\n label: \"Maximum inscribed circle tolerance\",\n step: 0.001,\n value: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"The following table shows a performance comparison between the four methods to calculate label positions for the ${countries.features.length} country borders:\n\n| Method \t| Time (ms, lower is better) \t|\n|--------------------------\t|----------------------------\t|\n| Centroid \t|${times.Centroid}|\n| Point on surface (POS) \t|${times.POS}|\n| Polylabel \t|${times.Polylabel}|\n| Maximum inscribed circle \t|${times.MIC}|","pinned":false,"hidden":false,"mode":"md"},{"id":391,"value":"viewof radios = Inputs.radio(\n [\n \"All\",\n \"Centroid\",\n \"Point on surface (POS)\",\n \"Polylabel\",\n \"Maximum inscribed circle (MIC)\"\n ],\n { label: \"Show country name label next to\", value: \"All\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"Swatches(\n d3.scaleOrdinal(\n [\n \"Centroid\",\n \"Point on surface (POS)\",\n \"Polylabel\",\n \"Maximum inscribed circle (MIC)\"\n ],\n [\"#fbb03b\", \"#21a373\", \"#e55e5e\", \"#223b53\"]\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"bermuda = countries.features.find(\n ({ properties: { name } }) => name === \"Bermuda\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"countries = FileAttachment(\"world.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"function findPolylabel(feature, precision) {\n if (feature.type === \"FeatureCollection\") feature = feature.features[0];\n let output = [];\n if (feature.geometry.type === \"Polygon\") {\n output = polylabel(feature.geometry.coordinates, precision);\n } else {\n let maxArea = 0,\n maxPolygon = [];\n for (let i = 0, l = feature.geometry.coordinates.length; i < l; i++) {\n const p = feature.geometry.coordinates[i];\n const area = d3.geoArea({ type: \"Polygon\", coordinates: p });\n if (area > maxArea) {\n maxPolygon = p;\n maxArea = area;\n }\n }\n output = polylabel(maxPolygon);\n }\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"mutable times = ({\n Centroid: 0,\n POS: 0,\n Polylabel: 0,\n MIC: 0\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"function geojsonCoordsToGeosCoordSeq(coords) {\n if (!coords || coords.length === 0) {\n return null;\n }\n const N = coords.length;\n const dim = 2; // coords[0].length\n const coordArr = new Float64Array(coords.flat());\n const coordPtr = geos.Module._malloc(N * dim * 8);\n geos.Module.HEAPF64.set(coordArr, coordPtr / 8);\n const seqPtr = geos.GEOSCoordSeq_copyFromBuffer(coordPtr, N, false, false);\n geos.Module._free(coordPtr);\n return seqPtr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function geosCoordSeqToGeojsonCoords(seqPtr) {\n if (!seqPtr) {\n return null;\n }\n const sizePtr = geos.Module._malloc(4);\n geos.GEOSCoordSeq_getSize(seqPtr, sizePtr);\n const size = geos.Module.getValue(sizePtr, \"i32\");\n geos.Module._free(sizePtr);\n if (size === 0) {\n return [];\n }\n const coords = [];\n const coordsPtr = geos.Module._malloc(size * 2 * 8);\n geos.GEOSCoordSeq_copyToBuffer(seqPtr, coordsPtr, false, false);\n const view = new Float64Array(\n geos.Module.HEAPF64.buffer,\n coordsPtr,\n size * 2\n );\n for (let i = 0; i < size * 2; i = i + 2) {\n coords.push([view[i], view[i + 1]]);\n }\n geos.Module._free(coordsPtr);\n return coords;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":482,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"polylabel = require(\"https://bundle.run/polylabel@1.1.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"geos = {\n const initGeosJs = (\n await import(\"https://cdn.skypack.dev/geos-wasm@1.1.6?min\")\n ).default;\n const geos = await initGeosJs();\n return geos;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"MapboxDraw = {\n const MapboxDraw = await require(\"@mapbox/mapbox-gl-draw\");\n {\n const href = await require.resolve(\n \"@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css\"\n );\n document.head.appendChild(html``);\n }\n return MapboxDraw;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.15.0\");\n if (!gl.accessToken) {\n // token allowed only this Observable\n gl.accessToken =\n \"pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw\";\n const href = await require.resolve(\"mapbox-gl@2.15.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}