2b:null 2c:["$","title",null,{"children":"Overlay DIY contour on map | sw1227 | Observable"}] 31:[] 2f:{"id":"269f238a66c13cdb","slug":"overlay-diy-contour-on-map","title":"Overlay DIY contour on map","thumbnail":"ff5d4766813b4bc74f1f3fdd052c4a1d58499f84fd3ef5e3cecd3370a65285ba","access_level":"public","create_time":"$D2019-08-03T07:26:34.259Z","update_time":"$D2020-11-28T06:35:15.368Z","view_time":null,"first_public_time":"$D2019-08-03T09:46:07.845Z","fork":{"id":"ff490e989ce75e58","slug":"dem-to-contour-by-d3","title":"Dem to contour by d3","owner":{"id":"06475ae5027cde36","login":"sw1227","name":"sw1227"}},"stars":9,"starred":false,"owner":{"type":"team","id":"06475ae5027cde36","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":"starter_2024"},"version":618,"publish_version":618,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null}],"members":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"f8d5283493bc9ba3","slug":"geo","title":"Geo","owner":{"id":"06475ae5027cde36","login":"sw1227","name":"sw1227"}},"type":"notebook","body":{"title":"Overlay DIY contour on map","cells":[{"id":0,"value":"md`# Overlay DIY contour on map\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"viewof interval = {\n const form = html`\n`;\n form.i.oninput = () => form.o.value = `Contour interval : ${form.value = form.i.valueAsNumber} [m]`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"viewof tileType = {\n const tileTypes = {\n Slope: \"slopemap\",\n Relief: \"relief\",\n Standard: \"std\",\n \"Hill Shade\": \"hillshademap\",\n Photo: \"airphoto\",\n };\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"viewof map = {\n const container = html`

`;\n yield container; // Give the container dimensions.\n const map = container.value = new mapboxgl.Map({\n container,\n center: [139.152, 35.443],\n zoom: 13,\n // Use external raster tile\n style: {\n \"version\": 8,\n \"sources\": {\n \"raster-tiles\": {\n \"type\": \"raster\",\n \"tiles\": [`https://cyberjapandata.gsi.go.jp/xyz/${tileType}/{z}/{x}/{y}.png`],\n \"tileSize\": 256,\n \"attribution\": 'Map tiles by 地理院タイル'\n }\n },\n \"layers\": [{\n \"id\": \"simple-tiles\",\n \"type\": \"raster\",\n \"source\": \"raster-tiles\",\n \"minzoom\": 0,\n \"maxzoom\": 18\n }]\n },\n scrollZoom: true\n });\n\n invalidation.then(() => map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`## Overview\nIn [Dem to contour by d3](https://observablehq.com/@sw1227/dem-to-contour-by-d3), contours were generated from evevation grid data. In this notebook, let's overlay them on map using Mapbox.\n\nThe point here is **how to transform pixel indices to latitude/longitude**, in order to overlay contours as GeoJSON layer. Once implemented the transformation, you can just apply it to the contours and overlay them using Mapbox API.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"md`### Transformation: pixel to lat/lon\n[Reference(ja)](http://www.trail-note.net/tech/coordinate/)\n\nFirst, pixel at index ${tex`(p_x, p_y)`} on tile **Z/X/Y** has pixel coordinate ${tex`(x, y)`} calculated by the following equation:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"tex.block`\n \\left\\{\n \\begin{array}{l}\n x = 256 X + p_x \\\\\n y = 256 Y + p_y\n \\end{array}\n \\right.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"md`\nUsing this ${tex`(x, y)`}, longitude and latitude can be obtained by the follwing, where ${tex`L=85.05112878`}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"tex.block`\n \\left\\{\n \\begin{array}{l}\n longitude = 180\\bigl(\\frac{x}{2^{z+7}} - 1\\bigr) \\\\\n latitude = \\frac{180}{\\pi}\\biggl( sin^{-1} \\biggl( tanh\\bigl( -\\frac{\\pi}{2^{z+7}} y + tanh^{-1} (sin (\\frac{\\pi}{180} L) ) \\bigr) \\biggr) \\biggr)\n \\end{array}\n \\right.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"// Calculate lat/lon of pixel (pX, pY) on tile tileZ/tileX/tileY\nfunction pixelOnTileToLatLon(pX, pY, tileZ, tileX, tileY) {\n const L = 85.05112878;\n const x = 256 * tileX + pX;\n const y = 256 * tileY + pY;\n\n const lon = 180 * (x / (2**(tileZ+7)) - 1);\n const lat = (180/Math.PI) * math.asin(math.tanh(\n -Math.PI/(2**(tileZ+7)) * y + math.atanh(math.sin(L * Math.PI/180))\n ));\n return {lat: lat, lon: lon}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"md`### Transform contour coordinates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"data = transformContour(contours)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"function transformContour(contours) {\n return contours.map(({type, value, coordinates}) => (\n {type, value, coordinates: coordinates.map(rings => (\n rings.map(points => (\n points.map(([x, y]) => {\n const coord = pixelOnTileToLatLon(x, y, tile.z, tile.x, tile.y);\n return [coord.lon, coord.lat];\n })\n ))\n ))}\n ));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"md`### Overlay on map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"function overlayContour() {\n data.forEach((d, i) => {\n map.addSource(`contour${i}`, {\n type: \"geojson\",\n data: d,\n });\n map.addLayer({\n \"id\": `contourLayer${i}`,\n \"type\": \"line\",\n \"source\": `contour${i}`,\n \"layout\": {},\n \"paint\": {\n \"line-width\": 2,\n \"line-color\": color(d.value),\n \"line-opacity\": 0.8\n }\n });\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"map.on(\"load\", overlayContour);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"// Manually update map on slider event\nd3.select(\"#interval\").on(\"change\", () => {\n // Remove old contours\n map.getStyle().layers.forEach(l => {\n if (l.id.startsWith(\"contourLayer\")) {\n map.removeLayer(l.id);\n }\n });\n Object.keys(map.getStyle().sources).forEach(k => {\n if (k.startsWith(\"contour\")) {\n map.removeSource(k)\n }\n })\n\n overlayContour();\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\n## Fetch dem data\n\nFetch dem data as 2D array using *fetchTile()* function from: [Fetch elevation tile](https://observablehq.com/@sw1227/fetch-elevation-tile).\n\nThis function is imported at the end of this notebook.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"tile = ({z: 13, x: 7262, y: 3232})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// Fetch dem data as 256 x 256 array\ndem = fetchTile(tile)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`\n## Contouring\nSame as [my revious notebook](https://observablehq.com/@sw1227/dem-to-contour-by-d3).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"// Shape of dem data\nshape = ({x: dem[0].length, y: dem.length})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// Flatten 2D array\nflatDem = [].concat.apply([], dem)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"// min/max elevation\nelevRange = d3.extent(flatDem)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"// Thresholds for contour\nthresh = d3.range(Math.round(elevRange[0]/interval)*interval, elevRange[1], interval)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"// Dem data -> Contours\ncontours = d3.contours()\n .size([shape.x, shape.y])\n .thresholds(thresh)\n (flatDem)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"// Color scale with elevation normalization\ncolor = d => d3.interpolateViridis((d-elevRange[0])/(elevRange[1]-elevRange[0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`#### (libraries)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.54\");\n if (!gl.accessToken) {\n // token allowed only for @sw1227\n gl.accessToken = \"pk.eyJ1Ijoic3cxMjI3IiwiYSI6ImNqeTFiYXF5cTA2ajYzaHE4cmEycnRteTkifQ.FR2JtUicCVzbH7xszfObEA\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {fetchTile} from \"@sw1227/fetch-elevation-tile\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"math = require(\"mathjs@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"