2e:null 2f:["$","title",null,{"children":"Editor layer geometry lab | Minh Nguyễn | Observable"}] 34:[] 32:{"id":"36e104e01b400543","slug":"editor-layer-geometry-lab","title":"Editor layer geometry lab","thumbnail":"150228ceb1e55f3b3eee1d459629b9e575ef1ff5954d57bc608ffe7ab72f7c9f","access_level":"public","create_time":"$D2022-01-31T08:08:58.198Z","update_time":"$D2022-02-01T01:49:33.109Z","view_time":null,"first_public_time":"$D2022-01-31T19:49:25.416Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b78758dd1a3d66e5","login":"1ec5","name":"Minh Nguyễn","avatar_url":"https://avatars-next.observableusercontent.com/14fe9ee708cf569e6c7212ad8ac67b912d9cbe0a77cbf58f0a20324e6f8374af","tier":"starter_2024"},"version":449,"publish_version":449,"role":null,"authored":false,"authors":[{"type":"individual","id":"d615c96e8c2464a6","login":"1ec5","name":"Minh Nguyễn","avatar_url":"https://avatars-next.observableusercontent.com/14fe9ee708cf569e6c7212ad8ac67b912d9cbe0a77cbf58f0a20324e6f8374af","tier":null}],"members":[{"type":"individual","id":"d615c96e8c2464a6","login":"1ec5","name":"Minh Nguyễn","avatar_url":"https://avatars-next.observableusercontent.com/14fe9ee708cf569e6c7212ad8ac67b912d9cbe0a77cbf58f0a20324e6f8374af","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Editor layer geometry lab","cells":[{"id":0,"value":"# Editor layer geometry lab","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"This notebook generates a GeoJSON file that you can use as a starting point for contributing to the [editor-layer-index](https://github.com/osmlab/editor-layer-index/) project. editor-layer-index is the source for background imagery layers in some of [OpenStreetMap](https://www.openstreetmap.org/)’s most popular editor applications, including iD. Each layer in editor-layer-index is a GeoJSON file whose geometry represents an imagery layer’s coverage area. A typical imagery layer published by a government agency covers one or more jurisdictions whose [boundaries](https://wiki.openstreetmap.org/wiki/Relation:boundary) can be mapped in OpenStreetMap.\n\nTo get started, fork this notebook using the **Fork** button in the top-right corner, then follow the instructions below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"## Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"Enter the IDs of the OpenStreetMap boundary relations that the layer covers. [Search OpenStreetMap using Nominatim](http://nominatim.openstreetmap.org/), select a search result, and copy the relation ID.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"relationIDs = [911267, 911254, 911260, 163283, 104783, 180912, 104779, 104780, 911258, 911265, 911263, 104784, 271300, 911257, 911290, 911306, 104782, 911259, 911301, 911292, 911295, 104778, 911287, 350382, 911253, 350381, 350378, 911256, 911252, 350379, 350377, 911312, 911294, 350380, 911288, 911303, 911297, 911298, 911310, 911304, 911255, 911269, 180915, 104781, 911270, 270614, 350384, 911305, 911289, 911313, 270616, 911271, 911314, 178021, 911251, 911262,];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"Simplification can exclude the actual geometry’s extremities. Buffer the geometry to keep these areas within the geometry, with the caveat that some uncovered areas will also be included.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"viewof tolerance = Inputs.range([0.001, 1], {label: \"Simplification tolerance (degrees)\", value: 0.01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"viewof bufferMiles = Inputs.range([0, 5], {label: \"Buffer distance (miles)\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"You can save a lot of space by trimming unnecessary precision from each coordinate.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"viewof decimalPlaces = Inputs.range([0, 7], {label: \"Decimal places in each coordinate\", value: 5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"## Preview\nReview the geometry on this map to ensure that it includes the imagery layer’s entire coverage area.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"leaflet = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container;\n let bbox = turf.bbox(collection);\n let map = L.map(container).fitBounds([[bbox[1], bbox[0]], [bbox[3], [bbox[2]]]]);\n L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n L.geoJson(flattened).addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"## Results\nClick the dots to the left of the cell below, then choose **Download text**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"JSON.stringify(flattened, null, 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"Add properties to the `properties` property according to [editor-layer-index’s contributing guide](https://github.com/osmlab/editor-layer-index/blob/gh-pages/CONTRIBUTING.md#adding-new-sources), then submit a pull request with this file.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"## Bonus: JOSM\nThe [JOSM](https://josm.openstreetmap.de/) editor maintains a separate directory of imagery sources on its wiki. This directory uses a unique XML format. Click the dots to the left of the cell below, then choose **Download text**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"josmEntry","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"Fill in the empty elements and add other elements to the `` based on [the Imagery XML language guide](https://josm.openstreetmap.de/wiki/Maps#Documentation) or [the Imagery XML schema](https://josm.openstreetmap.de/maps-1.0). Then insert the `` into the “[Imagery sources](https://josm.openstreetmap.de/wiki/Maps#Listofsources)” page.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"----\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":331,"value":"Fetch each relation’s geometry from the Overpass API and convert the results to GeoJSON.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"overpassQL = `[out:json][timeout:50];\n(rel(id:${relationIDs.join(',')}););\nout geom;`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"overpassURL = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(overpassQL)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"overpassJSON = (await fetch(overpassURL)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"osmtogeojson = require('osmtogeojson/osmtogeojson.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"collection = osmtogeojson(overpassJSON)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"Discard capitals and label nodes and combine the feature collection into a single multipolygon.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"turf = require('@turf/turf')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"geomCollection = turf.geometryCollection(collection.features.map(f => turf.getGeom(f)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"multiPolygon = turf.combine(collection).features[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"Union the boundary geometries together.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"unioned = turf.union(multiPolygon, multiPolygon)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"Buffer the geometry, then simplify it using the [Ramer–Douglas–Peucker algorithm](https://en.wikipedia.org/wiki/Ramer–Douglas–Peucker_algorithm).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"buffered = turf.buffer(unioned, bufferMiles, {units: 'miles'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"simplified = turf.simplify(buffered, {tolerance: tolerance, highQuality: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"Remove unnecessary decimal precision from the coordinates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"truncated = turf.truncate(simplified, decimalPlaces)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"Unusually, editor-layer-index expects a geometry with multiple disjoint regions to be a single polygon instead of a multipolygon. Flatten the multipolygon into a single polygon, assuming the linear rings already follow the [winding rule](https://en.wikipedia.org/wiki/Nonzero-rule).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"flattened = turf.polygon(truncated.geometry.coordinates.flat())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"Convert the polygon to [Imagery XML Bounds](https://josm.openstreetmap.de/wiki/Maps#Documentation) format for insertion into the JOSM Wiki’s “[Imagery sources](https://josm.openstreetmap.de/wiki/Maps#Listofsources)” directory.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":393,"value":"bbox = turf.bbox(truncated)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"shapes = flattened.geometry.coordinates.map(r => `\\\n ${r.map((p, i) => (i % 4 === 0 ? `\n ` : '') + ``).join('')}\n `).join('\\n')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"josmEntry = `\n \n \n \n wms\n \n \n${shapes}\n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"Display the resulting geometry on a map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"L = require('leaflet@1.7.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"