2e:null 2f:["$","title",null,{"children":"Cleaned up hillshade generator | Ingrid Burrington | Observable"}] 34:[{"id":"39e1feda0bc491316e0e8847d65a65ca8b98f8df26337f75d88649d536d99b10e5f48d1f27a6e858f9c3990974e0e2744f7a8f40dc19d5ab2f3a40e35cf3017b","href":"https://static.observableusercontent.com/files/39e1feda0bc491316e0e8847d65a65ca8b98f8df26337f75d88649d536d99b10e5f48d1f27a6e858f9c3990974e0e2744f7a8f40dc19d5ab2f3a40e35cf3017b","name":"map(7).geojson","type":"application/geo+json","lastModified":1670337527600.798,"size":322},{"id":"78f6a67defd27f1d57f1052ddf81dea1a66e99d4eae6aefa5735f61ba7025dc1647322e54d0c183932215bc98c0311a0c22722a175b9d9b4c2a62c0483646732","href":"https://static.observableusercontent.com/files/78f6a67defd27f1d57f1052ddf81dea1a66e99d4eae6aefa5735f61ba7025dc1647322e54d0c183932215bc98c0311a0c22722a175b9d9b4c2a62c0483646732","name":"map (23).geojson","type":"application/geo+json","lastModified":1691779166921.603,"size":321},{"id":"e8fa4daccae015e0fd9f260549ae41d1ecb84e5bf0ad9e705d12dd60acc674a82f77d97d3740dd9c625bd62db4932621e347fb5ccf1dd52ce27995fdaed7a9aa","href":"https://static.observableusercontent.com/files/e8fa4daccae015e0fd9f260549ae41d1ecb84e5bf0ad9e705d12dd60acc674a82f77d97d3740dd9c625bd62db4932621e347fb5ccf1dd52ce27995fdaed7a9aa","name":"shinetsuWA-bldgs.geojson","type":"application/geo+json","lastModified":1691783281805.457,"size":2027},{"id":"2ccad4fd95fcf6ef26f21c7179067e8f13d910b063fce8126c68c911595f4a1cfc8ba82c7aed8c8ce304ef5151ffcd851d184d309acd4ab9fe4be014f1ea6687","href":"https://static.observableusercontent.com/files/2ccad4fd95fcf6ef26f21c7179067e8f13d910b063fce8126c68c911595f4a1cfc8ba82c7aed8c8ce304ef5151ffcd851d184d309acd4ab9fe4be014f1ea6687","name":"map (24).geojson","type":"application/geo+json","lastModified":1691858805040.012,"size":324}] 32:{"id":"1aa645dec5cc944a","slug":"cleaned-up-hillshade-generator","title":"Cleaned up hillshade generator","thumbnail":"a98ee9861ae45312438406e4e1013a8a38bc1790339a32c2a1d625b079945dac","access_level":"public","create_time":"$D2022-12-06T14:33:57.966Z","update_time":"$D2023-08-20T20:40:07.347Z","view_time":null,"first_public_time":"$D2022-12-06T14:33:57.966Z","has_unpublished_edits":null,"fork":{"id":"c263d9518ce95c5f","slug":"taiwan-hillshade","title":"Taiwan Hillshade","owner":{"id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington"}},"stars":2,"starred":false,"owner":{"type":"team","id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":"starter_2024"},"version":5068,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null}],"members":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Cleaned up hillshade generator","cells":[{"id":0,"value":"md`# Cleaned up hillshade generator\n\nTakes geojson rectangles instead of weird center/zoom tricks in previous versions of this notebook; accidentally turned the original notebook into a workbook for a project so here's a new one.\n\nExperimenting with bodies of water; tesselating complex polygons is a bit of a hack and I haven't tried it on the plotter yet.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2895,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4298,"value":"## Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4307,"value":"### SVG height","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4303,"value":"### Bounding Box\nThere's some weird stuff in here for accommodating the winding problem that comes with files made with [geojson.io](https://geojson.io) so if using another source just keep in mind. Making a slippy map for generating bounding boxes is a todo here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4343,"value":"viewof file = Inputs.file({ label: \"Upload geoJSON\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5027,"value":"map24 = FileAttachment(\"map (24).geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4786,"value":"map23 = FileAttachment(\"map (23).geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4266,"value":"//if you want to use a different file change this to file.json()\nboundsfile = map24","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4300,"value":"### Zoom level for tile selection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2831,"value":"xyz_tiles = xyz(bounds, 9)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4489,"value":"bldgs = FileAttachment(\"shinetsuWA-bldgs.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4352,"value":"Changes from **boundsfile** to **file** if you uploaded a geojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3438,"value":"zoomed_bbox = turf.bboxPolygon(\n turf.bbox(\n turf.buffer(turf.bboxPolygon(turf.bbox(boundsfile)), 1, {\n unit: \"miles\"\n })\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3122,"value":"site = zoomed_bbox","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2810,"value":"bounds = [\n site.geometry.coordinates[0][0],\n site.geometry.coordinates[0][2]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2897,"value":"rewind = turf.rewind(site, { reverse: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3016,"value":"ctr = turf.center(site)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"projection = d3\n .geoMercator()\n .center(ctr.geometry.coordinates)\n .translate([0, 0])\n .fitSize([width, height], rewind)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4310,"value":"## Getting and processing tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4312,"value":"### Water (optional, not hatched but can be if you don't mind tanking your browser)\nI filter for polygons only but can be styled to accommodate rivers etc","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4503,"value":"tile_bldgs = mb_water\n .map((m) => m.building)\n .filter((f) => f != undefined)\n .map((m) => m.features)\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3142,"value":"mb_water = Promise.all(\n xyz_tiles.map(async (t) => {\n let data = new vt.VectorTile(\n new Protobuf(\n await d3.buffer(\n `https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/${t.z}/${t.x}/${t.y}.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`\n )\n )\n ).layers;\n\n t.data = Object.keys(data).reduce((initialData, key) => {\n initialData[key] = {\n type: \"FeatureCollection\",\n features: [...Array(data[key].length).keys()].map((item, i) => {\n let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z);\n return feature;\n })\n };\n\n return initialData;\n }, {});\n\n return t.data;\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4836,"value":"## Water","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3146,"value":"geom_water = mb_water\n .map((m) => m.water)\n .filter((m) => m != undefined)\n .map((m) => m.features)\n .flat()\n .filter((f) => f.geometry.type != \"MultiLineString\")\n .filter((f) => f.geometry.type != \"LineString\")\n .filter((f) => f.geometry.type != \"Point\")\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3151,"value":"poly_water = geom_water\n .map((v) => {\n if (v.geometry.type != \"Polygon\") {\n return turf.flatten(v).features.flat();\n } else {\n return v;\n }\n })\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4693,"value":"multipolygon = turf.rewind(\n poly_water.reduce((p, m) => turf.union(p, m)),\n { reverse: true }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4919,"value":"tessel = turf\n .flatten(multipolygon)\n .features.map((m) => turf.tesselate(m))\n .map((m) => m.features)\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4385,"value":"waterHatch = tessel\n .map(\n (m, i) =>\n path(m)\n .split(\"M\")\n .filter((f) => f != \"\")\n .map((m) => \"M\" + m)\n //.map((m) => m.split(\"Z\"))\n )\n .map((s) => Polygon.fromPath(s))\n .map((m) => m.getHatches(PI / 3, 1.5, 0))\n .filter((f) => f.length > 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4321,"value":"### Hillshades","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2943,"value":"tiles = Promise.all(\n xyz_tiles.map(async (t) => {\n let data = new vt.VectorTile(\n new Protobuf(\n await d3.buffer(\n `https://a.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2/${t.z}/${t.x}/${t.y}.mvt?access_token=pk.eyJ1IjoibGlmZXdpbm5pbmciLCJhIjoiYWZyWnFjMCJ9.ksAPTz72HyEjF2AOMbRNvg`\n )\n )\n ).layers;\n t.data = Object.keys(data).reduce((initialData, key) => {\n initialData[key] = {\n type: \"FeatureCollection\",\n features: [...Array(data[key].length).keys()].map((item, i) => {\n let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z);\n return feature;\n })\n };\n\n return initialData;\n }, {});\n\n return t;\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4334,"value":"#### This probably could be turned into fewer steps but haven't gotten around to it\n\n- Filter out hillshades from tiles\n- Nest hillshades by type (\"shadow\" or \"highlight\") and level\n- Turn each nested item into arrays of polygons\n- Flatten polygons so the tiling isn't obvious","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"hillshade = tiles\n .filter((t) => Object.keys(t.data).includes(\"hillshade\"))\n .map((h) => h.data.hillshade)\n .map((h) => h.features)\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"hs_nest = d3\n .nest()\n .key(function (d) {\n return d.properties.class;\n })\n .key(function (d) {\n return d.properties.level;\n })\n .entries(hillshade)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"poly = hs_nest\n .map((e) =>\n e.values.map((v) =>\n v.values\n .map((h) => {\n if (h.geometry.type != \"Polygon\") {\n return turf.flatten(h).features.flat();\n } else {\n return h;\n }\n })\n .flat()\n )\n )\n .flat()\n//.flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4110,"value":"clipFlat = poly\n .map((c) =>\n c\n .map((m) => turf.flatten(m))\n .map((l) => l.features)\n .flat()\n .map((m) => turf.rewind(m))\n )\n .map((c) =>\n turf\n .dissolve(turf.featureCollection(c))\n .features.map((m) => turf.rewind(m, { reverse: true }))\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4332,"value":"#### Function for creating cross-hatching","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3249,"value":"hatchpattern = function (i) {\n if (i % 2 == 0) {\n return PI / 3\n } else {\n return -(PI / 3)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4336,"value":"#### Generate cross-hatch lines from polygons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2977,"value":"classedSplitZ = clipFlat\n .map(\n (f, i) =>\n f.map((m) =>\n path(m)\n .split(\"Z\")\n .map((s) => Polygon.fromPath(s))\n .map((m) => m.getHatches(-PI / 3, 1.5, 0))\n )\n\n // .flat()\n // .flat()\n //\n //\n )\n .flat()\n .flat()\n .filter((f) => f.length > 0)\n .flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4329,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"Protobuf = require(\"pbf@3/dist/pbf.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\", \"d3-scale@2.1.2\", \"d3-collection@latest\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"turf = require(\"@turf/turf@latest\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2095,"value":"import { Polygon, PI } from \"@makio135/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2804,"value":"xyz = require(\"https://bundle.run/xyz-affair@0.9.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"