2d:null 2e:["$","title",null,{"children":"Raleigh Center Analysis | Ryan Cooper | Observable"}] 33:T543,viewof ralCenterMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.5}px`}); yield container; const map = container.value = L.map(container, { dragging: false, boxZoom: false, doubleClickZoom: false, zoomControl: false }).setView([35.777801,-78.642712],15); let base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }).addTo(map) let raleighCityLimitsLayer = L.geoJSON(raleighCityLimits, { style: style.cityLimits }).addTo(map) let raleighCenterLayer = L.geoJSON(raleighCenter, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.highlight }).addTo(map) raleighCenterLayer.bindTooltip("Absolute Center", { offset: [-12, 0], direction: "left", permanent: true }) let raleighBboxCenterLayer = L.geoJSON(raleighBboxCenter).addTo(map) raleighBboxCenterLayer.bindTooltip("Centroid of Raleigh Bounding Box", { direction: "right", offset: [2, 0], permanent: true }) map.setView(turf.getCoord(turf.flip(raleighCenter)), 13) }34:T5da,viewof ralCenterOfMassMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.5}px`}); yield container; const map = container.value = L.map(container, { dragging: false, boxZoom: false, doubleClickZoom: false, zoomControl: false }).setView([35.777801,-78.642712],15); let base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }).addTo(map) let raleighCityLimitsLayer = L.geoJSON(raleighCityLimits, { style: style.cityLimits }).addTo(map) let raleighCenterLayer = L.geoJSON(raleighCenter, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) raleighCenterLayer.bindTooltip("Absolute Center", { offset: [-12, 0], direction: "left", permanent: true }) let raleighCenterOfMassLayer = L.geoJSON(raleighCenterOfMass, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.highlight }).addTo(map) raleighCenterOfMassLayer.bindTooltip("Center of Mass", { offset: [0, -12], direction: "top", permanent: true }) map.setView(turf.getCoord(turf.flip(raleighCenterOfMass)), 13) }35:T726,viewof ralCentroidMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.5}px`}); yield container; const map = container.value = L.map(container, { dragging: false, boxZoom: false, doubleClickZoom: false, zoomControl: false }).setView([35.777801,-78.642712],15); let base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }).addTo(map) let raleighCityLimitsLayer = L.geoJSON(raleighCityLimits, { style: style.cityLimits }).addTo(map) let raleighCenterLayer = L.geoJSON(raleighCenter, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) raleighCenterLayer.bindTooltip("Absolute Center", { offset: [-12, 0], direction: "left", permanent: true }) let raleighCenterOfMassLayer = L.geoJSON(raleighCenterOfMass, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) raleighCenterOfMassLayer.bindTooltip("Center of Mass", { offset: [0, -12], direction: "top", permanent: true }) let raleighCentroidLayer = L.geoJSON(raleighCentroid, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.highlight }).addTo(map) raleighCentroidLayer.bindTooltip("Centroid", { offset: [12, 0], direction: "right", permanent: true }) map.setView(turf.getCoord(turf.flip(raleighCenterOfMass)), 13) }36:T92f,viewof ralCentersOfCentersMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.5}px`}); yield container; const map = container.value = L.map(container, { dragging: false, boxZoom: false, doubleClickZoom: false, zoomControl: false }).setView([35.777801,-78.642712],15); let base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }).addTo(map) let raleighCityLimitsLayer = L.geoJSON(raleighCityLimits, { style: style.cityLimits }).addTo(map) let raleighCenterLayer = L.geoJSON(raleighCenter, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) raleighCenterLayer.bindTooltip("Absolute Center", { offset: [-12, 0], direction: "left", permanent: true }) let raleighCenterOfMassLayer = L.geoJSON(raleighCenterOfMass, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) raleighCenterOfMassLayer.bindTooltip("Center of Mass", { offset: [0, -12], direction: "top", permanent: true }) let raleighCentroidLayer = L.geoJSON(raleighCentroid, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) raleighCentroidLayer.bindTooltip("Centroid", { offset: [12, 0], direction: "right", permanent: true }) let raleighCentersPolygonLayer = L.geoJSON(raleighCentersPolygon, { style: style.envelope.unfocused }).addTo(map) let centerOfCentersLayer = L.geoJSON(turf.centroid(raleighCentersPolygon), { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.highlight }).addTo(map) centerOfCentersLayer.bindTooltip("Centroid of Centers:
400 Dartmouth Rd",{ offset: [0, 12], direction: "bottom", permanent: true }) map.fitBounds(raleighCentersPolygonLayer.getBounds()) }37:T95e,viewof ralCentersOfBBoxCentersMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.5}px`}); yield container; const map = container.value = L.map(container, { dragging: false, boxZoom: false, doubleClickZoom: false, zoomControl: false }).setView([35.777801,-78.642712],15); let base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }).addTo(map) let raleighCityLimitsLayer = L.geoJSON(raleighCityLimits, { style: style.cityLimits }).addTo(map) let raleighCenterLayer = L.geoJSON(raleighCenter, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) raleighCenterLayer.bindTooltip("Absolute Center", { offset: [-12, 0], direction: "left", permanent: true }) let raleighCenterOfMassLayer = L.geoJSON(raleighCenterOfMass, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) raleighCenterOfMassLayer.bindTooltip("Center of Mass", { offset: [0, -12], direction: "top", permanent: true }) let raleighCentroidLayer = L.geoJSON(raleighCentroid, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) raleighCentroidLayer.bindTooltip("Centroid", { offset: [12, 0], direction: "right", permanent: true }) let raleighCentersBBoxPolygonLayer = L.geoJSON(raleighCentersBBoxPolygon, { style: style.envelope.unfocused }).addTo(map) let centerOfBBoxCentersLayer = L.geoJSON(turf.centroid(raleighCentersBBoxPolygon), { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.highlight }).addTo(map) centerOfBBoxCentersLayer.bindTooltip("Centroid of Bounding Box of Centers:
~306-310 Dartmouth Rd",{ offset: [0, 12], direction: "bottom", permanent: true }) map.fitBounds(raleighCentersBBoxPolygonLayer.getBounds()) }38:T995,viewof ralCompositeCentersMidpointMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.5}px`}); yield container; const map = container.value = L.map(container, { dragging: false, boxZoom: false, doubleClickZoom: false, zoomControl: false }).setView([35.777801,-78.642712],15); let base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }).addTo(map) let raleighCityLimitsLayer = L.geoJSON(raleighCityLimits, { style: style.cityLimits }).addTo(map) let centerOfCentersLayer = L.geoJSON(turf.centroid(raleighCentersPolygon), { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) centerOfCentersLayer.bindTooltip("Centroid of Centers:
400 Dartmouth Rd",{ offset: [12, 0], direction: "right", permanent: true }) let centerOfBBoxCentersLayer = L.geoJSON(turf.centroid(raleighCentersBBoxPolygon), { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.unfocused }).addTo(map) centerOfBBoxCentersLayer.bindTooltip("Centroid of Bounding Box of Centers:
~306-310 Dartmouth Rd",{ offset: [-12, 0], direction: "left", permanent: true }) let compositeCentersLine = turf.lineString([turf.getCoord(turf.centroid(raleighCentersBBoxPolygon)), turf.getCoord(turf.centroid(raleighCentersPolygon))]) let compositeCentersLineLayer = L.geoJSON(compositeCentersLine, { style: style.envelope.unfocused }).addTo(map) let compositeCentersMidpoint = turf.midpoint(turf.centroid(raleighCentersBBoxPolygon), turf.centroid(raleighCentersPolygon)) let compositeCentersMidpointLayer = L.geoJSON(compositeCentersMidpoint, { pointToLayer: function (point, latlng) { return L.circleMarker(latlng, {radius: 10}) }, style: style.circleMarker.highlight }).addTo(map) compositeCentersMidpointLayer.bindTooltip("Center of Composite Centers:
314 Dartmouth Rd",{ offset: [12, 0], direction: "right", permanent: true }) map.fitBounds(compositeCentersLineLayer.getBounds()) }39:[] 31:{"id":"00d16888a6c896a9","slug":"raleigh-center-analysis","title":"Raleigh Center Analysis","thumbnail":"6250e49a5e0cbd0c8273940745798ab4c4ff6fb0a19469c9c3b759bda9625815","access_level":"public","create_time":"$D2021-04-26T03:49:18.114Z","update_time":"$D2025-12-12T04:50:22.322Z","view_time":null,"first_public_time":"$D2021-04-26T05:33:24.499Z","has_unpublished_edits":null,"fork":{"id":"b8ca9ef13512c0ea","slug":"leaflet-plugins-starter-notebook","title":"Leaflet + Plugins Starter Notebook","owner":{"id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":"starter_2024"},"version":506,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae231bf35ff5917","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":null}],"members":[{"type":"individual","id":"cae231bf35ff5917","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Raleigh Center Analysis","cells":[{"id":0,"value":"md`\n# Raleigh Center Analysis\n\nA local friend on Twitter [asked if the center of Raleigh had ever been measured](https://twitter.com/OakCityCRE/status/1386309852637585410). With spatial software, this is rather simple to do, but centrality for irregular geometries or sets of geometries is more complicated than finding the center of, say, a square.\n\nI set out to use the [\\`turf\\`](http://turfjs.org/) JavaScript library to explore this question. In doing so I discovered this library contains 3 different algorithms for calculating the center of a spatial feature or collection of several spatial features. \n\nIn this notebook, I set about trying each algorithm and then combining their results to find a center of centers.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`\n## Raleigh City Limits\n\nLike most American cities, Raleigh's city limits look like the result of a shotgun blast to a map. That said, this very complex set of geometries [pulled from Wake County Open Data](https://data-wake.opendata.arcgis.com/datasets/corporate-limits) is what I used as my area for which to find a center.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"viewof ralCityLimitsMap = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.5}px`});\n yield container;\n \n const map = container.value = L.map(container, {\n dragging: false,\n boxZoom: false,\n doubleClickZoom: false,\n zoomControl: false\n }).setView([35.777801,-78.642712],15);\n let base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {\n\tattribution: '© OpenStreetMap contributors © CARTO',\n\tsubdomains: 'abcd',\n\tmaxZoom: 19\n}).addTo(map)\n let raleighCityLimitsLayer = L.geoJSON(raleighCityLimits, {\n style: style.cityLimits \n }).addTo(map)\n\n map.fitBounds(raleighCityLimitsLayer.getBounds())\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md `\n## Absolute Center\n\nFrom [\\`turf.center()\\`](http://turfjs.org/docs/#center):\n\n> *Takes a Feature or FeatureCollection and returns the **absolute center point** of all features.*\n\nI could not find any formal description of *absolute center point*, but after digging into source code for this algorithm, I believe it is the center of the smallest rectangle that can hold all of Raleigh's City Limits (i.e. bounding box).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md `\n## Center of Mass\n\nFrom [\\`turf.centerOfMass()\\`](http://turfjs.org/docs/#centerOfMass):\n> *Takes any Feature or a FeatureCollection and returns its center of mass using this formula: **Centroid of Polygon**.*\n\nThe documentation on this is a little confusing because it suggests that this method calculates the centroid of the features while the library also offers a separate centroid function (more on that in a moment). I think its easier to think of this conceptually. As explained by [*Scientific America*](https://www.scientificamerican.com/article/x-marks-the-spot-finding-the-center-of-mass/):\n\n> *The center of mass is the point about which an object will balance if you try to rest it on your fingertip. Or if you hang an object, for example a picture frame from a nail, the center of mass will hang directly below the nail.*\n\nFurther Reading:\n- [Locating the center of mass](https://en.wikipedia.org/wiki/Locating_the_center_of_mass)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md `\n## Centroid\n\nThe explanation of this approach is probably the clearest. From [\\`turf.centroid()\\`](http://turfjs.org/docs/#centroid):\n\n> *Takes one or more features and calculates the centroid using the **mean of all vertices**. This lessens the effect of small islands and artifacts when calculating the centroid of a set of polygons.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"md `## Composite Centers?\n\nI'm not sure if this is a valid next step, but we potentially can derive composite center points based on the results of the 3 different centering algorithms provided by turf. Even there, I landed on 2 approaches and, as a result, 2 composite centers. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md `\n### Result 1: Centroid of Centers\n\nIn the *centroid of centers* approach, we calculate the centroid of the 3 centers. As noted earlier, this is the mean X and Y coordinates for the 3 different center point calculated. I think this is pretty good, though because we only have three points, we are calculating the center of triangle. [Triangles notoriously have multiple centers](https://en.wikipedia.org/wiki/Triangle_center) as well so I think some ambiguity remains here.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"md `\n### Result 2: Centroid of Bounding Box of Centers\n\nAnother option is to find the center of the bounding box of the 3 different center points. In other words, what is the center of the smallest possible rectangle containing all 3 center points? There is only one center to a rectangle so this doesn't open up more geometric cans of worms finding the center of a triangle.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"md`## Midpoint between 2 Composite Centers\nI still don't know which of the two composite centers to choose. I lean towards Option 1 because it is created directly from the coordinates of the triangle created by the 3 centering algorithms provided by turf. That said, triangles have multiple centers and by choosing one, we're left to wonder about all the other definitions of the center of triangle.\n\nBut since we have 2 composite centers, we could create a composite of the composites for which there is a definitive, single location. So, in what might be a journey into geographic sillyness, we'll find the midpoint along a line segment created by these 2 composite centers. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"md `## Closing Thoughts\n\nWhere is the center of Raleigh? Hard to tell exactly, but it appears to around North Hills just outside the Beltline. Some folks who paid better attention in geometry and trigonometry class would be able to better determine the pitfalls of the approaches I've outlined here. I definitely welcome any feedback on how to better approach this question!\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md `### Raleigh City Limits Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"raleighCityLimits = {\n let raleighFeatures = [];\n let raleighCityLimitsJSON = await fetch(\n \"https://opendata.arcgis.com/datasets/611072be4a2e47dca6606c9e8bc78f77_0.geojson\"\n )\n .then((response) => {\n return response.json();\n })\n .then((responseJSON) => {\n turf.featureEach(responseJSON, (feature) => {\n if (feature.properties.LONG_NAME === \"RALEIGH\") {\n console.log(feature);\n raleighFeatures.push(feature);\n }\n });\n // return turf.featureCollection(raleighFeatures)\n });\n return turf.featureCollection(raleighFeatures);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md `### Center from \\`turf.center()\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"raleighCenter = turf.center(raleighCityLimits)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"raleighBboxCenter = turf.centroid(turf.bboxPolygon(turf.bbox(raleighCityLimits)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md `### Center from \\`turf.centerOfMass()\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"raleighCenterOfMass = turf.centerOfMass(raleighCityLimits)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md `### Centroid from \\`turf.centroid()\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"raleighCentroid = turf.centroid(raleighCityLimits)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"raleighCenters = turf.featureCollection([raleighCenter, raleighCenterOfMass, raleighCentroid])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"raleighCentersPolygon = turf.concave(raleighCenters)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"raleighCentersBBoxPolygon = turf.bboxPolygon(turf.bbox(raleighCenters))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md `## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"style = {\n const style = {\n cityLimits: {\n fillColor: \"#3F51B5\",\n weight: 0\n },\n circleMarker: {\n highlight: {\n color: \"#FFEB3B\",\n weight: 2\n },\n unfocused: {\n fillColor: \"#212121\",\n color: \"#757575\",\n weight: 1\n }\n },\n envelope: {\n focused: {\n fillOpacity: 0,\n color: \"#FFEB3B\"\n },\n unfocused : {\n fillOpacity: 0,\n color: \"#212121\",\n weight: 1\n }\n }\n }\n return style\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`## Adding Leaflet and plugins`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"L = {\n // Load Leaflet and it's CSS file\n const L = await require('leaflet@latest');\n if (!L._css) {\n document.head.appendChild(L._css = html`\n \n `);\n }\n \n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"turf = require('@turf/turf')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"