2a:null 2b:["$","title",null,{"children":"Ordnance Survey Helper Notebook | johnx | Observable"}] 30:T849f,osLogo = ``31:T970,// Adapted from @jashkenas/inputs function gbMapCoordinates(config = {}) { const { value = [], title, description, width = 400 } = Array.isArray(config) ? { value: config } : config; const scale = width / 660; const height = scale * 700; let [lon, lat] = value; lon = lon != null ? lon : null; lat = lat != null ? lat : null; const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "5px 0 20px"; const projection = d3geo .geoAlbers() .center([0, 57.7]) .rotate([4.4, 0]) .parallels([49, 62]) .scale(1200 * 3) .translate([width / 2, height / 2]); const path = d3geo .geoPath(projection) .context(context) .pointRadius(2.5 / scale); formEl.append(canvas); function draw() { context.clearRect(0, 0, width, height); context.save(); context.scale(scale, scale); context.lineWidth = 0.35 / scale; context.beginPath(); path(nation); context.fillStyle = `#f4f4f4`; context.fill(); context.beginPath(); path(nation); context.strokeStyle = `#aaa`; context.stroke(); if (lon != null && lat != null) { const pointPath = { type: "MultiPoint", coordinates: [[lon, lat]] }; context.beginPath(); path(pointPath); context.fillStyle = `#f00`; context.fill(); } context.restore(); } canvas.onclick = function(ev) { const { offsetX, offsetY } = ev; var coords = projection.invert([offsetX / scale, offsetY / scale]); lon = +coords[0].toFixed(2); lat = +coords[1].toFixed(2); draw(); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; draw(); const form = input({ type: "worldMapCoordinates", title, description, display: v => html`

Longitude: ${ lon != null ? lon : "" } Latitude: ${ lat != null ? lat : "" }

`, getValue: () => [lon != null ? lon : null, lat != null ? lat : null], form: formEl }); return form; }32:T691,osFeatures = (coords, typeName, apiKey, num) => { // Create an OGC XML filter parameter value which will select the TopographicArea // features containing the coordinates of the clicked point. let circle = turf.circle(coords, 1, { steps: 24, units: "kilometers" }); // {Turf.js} Flip the circle geometry coordinates from [x, y] to [y, x]. circle = turf.flip(circle); // Get the circle geometry coordinates and return a new space-delimited string. var coords = circle.geometry.coordinates[0].join(" "); // Create an OGC XML filter parameter value which will select the Greenspace // features intersecting the circle polygon coordinates. var xml = ""; xml += ""; xml += "SHAPE"; xml += ''; xml += ""; xml += ""; xml += "" + coords + ""; xml += ""; xml += ""; xml += ""; xml += ""; xml += ""; // Define (WFS) parameters object. var wfsParams = { key: apiKey, service: "WFS", request: "GetFeature", version: "2.0.0", typeNames: typeName, propertyName: "TOID,DescriptiveGroup,SHAPE", outputFormat: "GEOJSON", srsName: "urn:ogc:def:crs:EPSG::4326", filter: xml, count: num }; try { // Use fetch() method to request GeoJSON data from the OS Features API. let f = fetch(getUrl(wfsParams)).then((f) => f.json()); return f; } catch { return md`An error occurred - have you provided a valid API key?`; } }33:[{"id":"bad736e3347fce1804410160b5d41ab90a1e8ac063ff0defe03a2dd342eeb1593a56521d2ed71cff55f8cb4d9498c97be633da6fc57d8593b3826211e1287efd","href":"https://static.observableusercontent.com/files/bad736e3347fce1804410160b5d41ab90a1e8ac063ff0defe03a2dd342eeb1593a56521d2ed71cff55f8cb4d9498c97be633da6fc57d8593b3826211e1287efd","name":"gb.geojson","type":"application/geo+json","lastModified":1588862761368.004,"size":49513}] 2e:{"id":"66dada6f41d63adf","slug":"os","title":"Ordnance Survey Helper Notebook","thumbnail":"95dac472e842291842eb350333f6cec7ff7238abc0be981dcd4f3a841a7a5f62","access_level":"public","create_time":"$D2020-04-15T13:29:35.159Z","update_time":"$D2024-10-04T10:49:26.627Z","view_time":null,"first_public_time":"$D2020-04-15T13:35:24.138Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"694a515e88970367","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":"starter_2024"},"version":416,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7851601ec4f2322","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":null}],"members":[{"type":"individual","id":"a7851601ec4f2322","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"7f988f55ce59f462","slug":"os-data-hub-tools","title":"OS Data Hub tools","owner":{"id":"694a515e88970367","login":"johnx25bd","name":"johnx"}},"type":"notebook","body":{"title":"Ordnance Survey Helper Notebook","cells":[{"id":26,"value":"md`# Ordnance Survey Helper Notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`${osLogo}\n~~~js\nimport {osLogo} from \"@johnx25bd/os\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md`\n~~~js\nimport { endpoints } from \"@johnx25bd/os\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"endpoints = ({\n wfs: \"https://api.os.uk/features/v1/wfs\",\n wmts: \"https://api.os.uk/maps/raster/v1/wmts\",\n zxy: \"https://api.os.uk/maps/raster/v1/zxy\",\n vts: \"https://api.os.uk/maps/vector/v1/vts\",\n downloads: \"https://api.os.uk/downloads/v1/products\",\n linkedIDs: \"https://api.os.uk/search/links/v1/identifiers\",\n places: \"https://api.os.uk/search/places/v1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md`\n---\n~~~js\nimport {osColours} from \"@johnx25bd/os\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"osColours = (await fetch(\n 'https://raw.githubusercontent.com/OrdnanceSurvey/GeoDataViz-Toolkit/master/Colours/GDV-colour-palettes-v0.7.json'\n)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`\n---\n~~~js\nviewof coords = gbMapCoordinates();\n\nimport {osColours} from \"@johnx25bd/os\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`\n---\n\n✅ Great, with your key set to **{apiKey}** we have all the information we need to\n establish a connection with the API.\n\n~~~js\nvalidateKey(apiKey, \"maps\")\n\nimport {validateKey} from \"@johnx25bd/os\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"async function validateKey(key, service) {\n if (key == \"\") {\n return md`👆 Please input your API key from the OS Data Hub above to get started.\nIf you don't have one, grab a key [here](https://osdatahub.os.uk/).`;\n } else {\n let endpoint;\n if (service === 'maps') {\n endpoint = `${endpoints.wmts}?service=WMTS&request=getcapabilities&key=${key}`;\n } else if (service === 'features') {\n endpoint = `${endpoints.wfs}?service=wfs&request=getcapabilities&key=${key}`;\n } else if (service === 'vector-tile') {\n endpoint = `${endpoints.vts}?srs=3857&key=${key}`;\n }\n\n let response = await fetch(endpoint);\n\n if (response.ok) {\n return md`✅ Great, with your key set to **${key}** we have all the information we need to\n establish a connection with the API.`;\n } else {\n return md`❌ Erm ... it looks like that's not a valid API key. Could you try again?`;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"md`\n---\n~~~js\nimport {osFeatures} from \"@johnx25bd/os\"\n\nosFeatures(\n [-0.703125, 52.0524904],\n 'Topography_TopographicArea',\n \"\",\n 10\n)\n // => returns GeoJSON FeatureCollection with 10 features\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"getUrl = params => {\n var encodedParameters = Object.keys(params)\n .map(paramName => paramName + '=' + encodeURI(params[paramName]))\n .join('&');\n\n return endpoints.wfs + '?' + encodedParameters;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"osFeatures(\n [-0.12460470199584961, 51.50069276435504],\n \"Zoomstack_LocalBuildings\",\n \"f7Kc1U5GO9L0D9RpxPGzA9GfASUdhj2O\",\n 10\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`\n---\n## Leaflet map with OS Maps API basemap\n\n~~~js\nimport { osMap } from \"@johnx25bd/os\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"function osMap(container, options) {\n let map = L.map(container).setView(options.center, options.zoom);\n let osmLayer = L.tileLayer(\n `https://api.os.uk/maps/raster/v1/zxy/${options.style}_3857/{z}/{x}/{y}.png?key=${options.key}`,\n {\n attribution:\n 'Wikimedia maps beta | © OpenStreetMap contributors'\n }\n ).addTo(map);\n\n if (options.point) {\n L.marker(options.point).addTo(map);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"{\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 1.6}px`\n });\n yield container;\n\n osMap(container, {\n center: [51.50069276435504, -0.12460470199584961],\n zoom: 17,\n key: \"f7Kc1U5GO9L0D9RpxPGzA9GfASUdhj2O\",\n style: \"Light\",\n point: [51.50069276435504, -0.12460470199584961]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`\n---\n## Appendices and Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import { input } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// Data from Natural Earth, processed with QGIS\nnation = FileAttachment(\"gb.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"d3geo = require(\"d3-geo@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"turf = require('@turf/turf')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"