2d:null 2e:["$","title",null,{"children":"Clip and Dissolve Lines by a Polygon with Turf | Ryan Cooper | Observable"}] 33:T70a,# Clip and Dissolve Lines by a Polygon with Turf This notebook is part of some research I did for my previous work with Raleigh Parks to capture greenway trail closures and save them for both display and posterity. The current method involves selecting individual segments within the greenway data that are closed and change each segment's status accordingly. A very simple solution, this was originally developed as an intermediate fix to being transparent with the public about where greenways are closed. This approach does suffere from some issues: - No historic tracking of closures. - Segments in the data are not split up in a way that aligns with the from-to length of a closure. One fix I want to consider is that a user would draw an area that picks up the extent of the closure, clips the greenways by that area, and combines the selection into a single MultiLineString. From there, the user could add additional attributes through a form and then, using the ArcGIS REST API, push the result to a service on AGOL. Clipping the lines by polygons in traditional GIS software is pretty easy. There are Python packages out there that will do this as well. However, using JS seems less easy. [Turf](http://turfjs.org/) seems like the obvious starting point, but its clipping functionality does not seem to be contained by a single function. I'll be doing some work here to figure out how to use turf to achieve the clip. In the future, I may also explore the extent to which I might be able to take advantage of ArcGIS Server to handle a clip. Since I'll eventually be interfacing with ArcGIS Online anyway, this could worthwhile. That said, the approach here is probably better for a broader set of folks as it doesn't require any proprietary tools in the workflow. Just Turf and JavaScript.34:T48f,viewof bboxClipMap = { 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, scrollWheelZoom: 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) lineLayer.setStyle(feature => { return {color: randomRGB(randomColorRangeValue(), randomColorRangeValue(), randomColorRangeValue())} }) let lineBBoxClipLayer = L.geoJSON(lineBboxClip, { style: { weight: 6, color: "#121212" } }).addTo(map) lineLayer.addTo(map) clipLayer.addTo(map) clipAreaBBoxLayer.addTo(map) L.control.layers([], {"Line Result from Clip Area Bounding Box": lineBBoxClipLayer}).addTo(map) map.fitBounds(clipLayer.getBounds()) }35:T517,viewof lineSplitMap = { 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, scrollWheelZoom: 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 lineSplitByClipAreaLayer = L.geoJSON(lineSplitByClipArea, { style: { weight: 6, color: "#121212" } }).addTo(map) lineSplitByClipAreaLayer.setStyle(feature => { return {color: randomRGB(randomColorRangeValue(), randomColorRangeValue(), randomColorRangeValue())} }) lineLayer.setStyle(feature => { return {color: randomRGB(randomColorRangeValue(), randomColorRangeValue(), randomColorRangeValue())} }) lineLayer.addTo(map) clipLayer.addTo(map) L.control.layers([], {"Line Result from Line Split by Clip Area": lineSplitByClipAreaLayer}).addTo(map) map.fitBounds(clipLayer.getBounds()) }36:T54f,viewof dissolvedLineSplitMap = { 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, scrollWheelZoom: 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 dissovledLineSplitByClipAreaLayer = L.geoJSON(dissolvedLineSplitByClipArea, { style: { weight: 6, color: "#121212" } }).addTo(map) dissovledLineSplitByClipAreaLayer.setStyle(feature => { return {color: randomRGB(randomColorRangeValue(), randomColorRangeValue(), randomColorRangeValue())} }) lineLayer.setStyle(feature => { return {color: randomRGB(randomColorRangeValue(), randomColorRangeValue(), randomColorRangeValue())} }) lineLayer.addTo(map) clipLayer.addTo(map) L.control.layers([], {"Dissolved Line Result from Line Split by Clip Area": dissovledLineSplitByClipAreaLayer}).addTo(map) map.fitBounds(clipLayer.getBounds()) }37:[{"id":"8c6f23530866ac605fbea7dac3775f06fdc61f1d12d7554e685d8eef5ca6ccc185e921c4d0c4af75668418cd5588464923778e0da863635c0ef62d69dd6b4b9d","href":"https://static.observableusercontent.com/files/8c6f23530866ac605fbea7dac3775f06fdc61f1d12d7554e685d8eef5ca6ccc185e921c4d0c4af75668418cd5588464923778e0da863635c0ef62d69dd6b4b9d","name":"crabtree_extract_select_poly.geojson","type":"application/geo+json","lastModified":1622208572700.828,"size":1937},{"id":"0a326ad143c5e564800e8fd3e642a20959349809582f03cae9a2c620ae5e8ef51d762dea98e349ebb4a26d4e5d7fcf6f8d48776f5209ddbbfcf25b3ded44637d","href":"https://static.observableusercontent.com/files/0a326ad143c5e564800e8fd3e642a20959349809582f03cae9a2c620ae5e8ef51d762dea98e349ebb4a26d4e5d7fcf6f8d48776f5209ddbbfcf25b3ded44637d","name":"crabtree_extract.geojson","type":"application/geo+json","lastModified":1622208373005.169,"size":54493}] 31:{"id":"c9060535fb22be2b","slug":"clip-and-dissolve-lines-by-a-polygon","title":"Clip and Dissolve Lines by a Polygon with Turf","thumbnail":"ef2b951206b716aa47adbb4efddf5f90566d42e0159e88b5b9df2788d9bd9a1c","access_level":"public","create_time":"$D2021-05-28T13:03:43.739Z","update_time":"$D2022-05-09T16:19:33.451Z","view_time":null,"first_public_time":"$D2021-06-01T15:11:52.817Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":"starter_2024"},"version":273,"publish_version":273,"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":1,"collection":null,"type":"notebook","body":{"title":"Clip and Dissolve Lines by a Polygon with Turf","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"## Setup\nHere I've set up the basic scenario I'll be working with in this notebook. I've got an extract of the Crabtree Creek Greenway as a line feature. Each individual feature in the layer is randomly colored to highlight there are multiple discrete segments. Atop the line layer is a test polygon drawn to approximate the kind of feature that might be drawn by the user of an application the designate a trail closure.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof basicMap = {\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 1.5}px`\n });\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 scrollWheelZoom: false\n }).setView([35.777801, -78.642712], 15));\n let base = L.tileLayer(\n \"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png\",\n {\n attribution:\n '© OpenStreetMap contributors © CARTO',\n subdomains: \"abcd\",\n maxZoom: 19\n }\n ).addTo(map);\n lineLayer.setStyle((feature) => {\n return {\n color: randomRGB(\n randomColorRangeValue(),\n randomColorRangeValue(),\n randomColorRangeValue()\n )\n };\n });\n\n lineLayer.addTo(map);\n clipLayer.addTo(map);\n\n map.fitBounds(lineLayer.getBounds());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"### Clip by Bounding Box\nThe closest thing to a clip by polygon function in Turf is `bboxClip`. This isn't quite what I want as there are portions of the segments clipped by the clip area's bounding box that are outsie the clip geometry, but it's a start.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"lineBboxClip = {\n let resultArray = lineJSON.features.map(feature => turf.bboxClip(feature, turf.bbox(clipAreaJSON))) \n return turf.featureCollection(resultArray)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"## Split Lines\nThere's also the `lineSplit` function which seems to allow you to split a line by another feature. It doesn't specify a geometry for the splitter feature.\n\nThe algorithm I put together is simple and not very robust. It simply checks each feature to see if it is fully within the clip area. If it is, it passes to an array I setup to collect features. If the feature isn't within the clip area, it is passed through the `lineSplit` function. `pointOnSurface` is used to get a point on the line and then I check to see if the point is within the clip area. If it is, it gets passed to the array of collected features.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"lineSplitByClipArea = {\n\n // Setup an empty array to collect line segmets clipped by clip area\n let linesArray = []\n\n turf.featureEach(lineJSON, line => {\n // Check if the line feature is fully within the clip area. If it is, add it to linesArray.\n if (turf.booleanWithin(line, clipAreaJSON.features[0])) {\n linesArray.push(line)\n } else {\n // If the feature is not fully within the clip area, split the line by the clip area\n let splitResults = turf.lineSplit(line, clipAreaJSON.features[0])\n // Take the resulting features from the split, calculate a point on surface, and check if the point is within the clip area. If it is, add the line segment to linesArray.\n turf.featureEach(splitResults, splitResult => {\n let pof = turf.pointOnFeature(splitResult)\n if (turf.booleanWithin(pof, clipAreaJSON.features[0])) {\n linesArray.push(splitResult)\n }\n }) \n }\n })\n return turf.featureCollection(linesArray)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"## Split Lines Combined into Single Feature\nThinking ahead to the potential use case this notebook is a part of, I'm going to want to have the clipped line segments posted to ArcGIS Online as a single feature. So, as a final step I want to dissolve the clipped line segments into a single MultiPolygon feature. Turf has a dissolve function, but it only works for polygons. However, we can map `turf.flatten()` over each featurend then combine the result into a single feature within a FeatureCollection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"dissolvedLineSplitByClipArea = {\n // Flatten all features into an aray to explode any MultiLinestring features to LineString feature\n let flattenedLines = lineSplitByClipArea.features\n .map(feature => turf.flatten(feature))\n .map(fc => fc.features).flat()\n // Create FeatureCollection of flattened LineString features\n let flattenedLinesFC = turf.featureCollection(flattenedLines)\n // Combine LineString features into a single MultiLineString\n return turf.combine(flattenedLinesFC)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"## Layers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"lineLayer = L.geoJSON(lineJSON, {\n style: {\n weight: 1.5,\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"clipLayer = L.geoJSON(clipAreaJSON, {\n dashArray: \"5 5\",\n weight: 1,\n color: \"#121212\",\n fillOpacity: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"clipAreaBBoxLayer = L.geoJSON(clipAreaBBoxJSON, {\n style: {\n fillOpacity: 0,\n color: \"#121212\",\n weight: 1\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"function randomColorRangeValue() {\n return Math.floor(Math.random() * 256)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function randomRGB(r, g, b) {\n return `rgb(${r}, ${g}, ${b})`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"lineJSON = FileAttachment(\"crabtree_extract.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"clipAreaJSON = FileAttachment(\"crabtree_extract_select_poly.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"clipAreaBBoxJSON = turf.bboxPolygon(turf.bbox(clipAreaJSON))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"### Leaflet\n*For displaying map data*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"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":34,"value":"### Turf\n*Spatial operations*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"turf = require('@turf/turf')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"