2b:null 2c:["$","title",null,{"children":"OS Vector Tile API | johnx | Observable"}] 31:T94b,mapDiv = { let container = html`

`; yield container; setLayerStyle(layerId, pickedColour); // Initialize the map object. let map = new mapboxgl.Map({ container, style: !greyscale ? metadata.style //endpoints.vts + '/resources/styles?key=' + apiKey : greyscaleStylesheet, center: [-1.085410, 53.956000], zoom: 16, // pitch: 60, transformRequest: url => { if (url.includes("?key=")) { return { url: url + "&srs=3857" }; } else { return { url: url + "?key=" + apiKey + "&srs=3857" }; } } }); map.on('click', function(e) { console.log(map.getZoom()); var bbox = [[e.point.x - 5, e.point.y - 5], [e.point.x + 5, e.point.y + 5]]; var features = map.queryRenderedFeatures(bbox, { layers: layers }); console.log(features); }); if (extrude) { map.on('style.load', function() { // Remove the 'local_buildings' layer (type = fill) from the style. map.removeLayer("OS Open Zoomstack - Road/local_buildings"); let extrusionColor = greyscale ? 'lightgrey' : "#FADAB4"; if (layerId == "OS Open Zoomstack - Road/local_buildings") { extrusionColor = pickedColour; } // Add the 'local_buildings' layer (type = fill-extrusion) back into the style. // The buildings will be inserted before the existing 'boundaries' layer. map.addLayer({ id: "OS/TopographicArea_1/Building/1_3D", type: "fill-extrusion", source: "esri", "source-layer": "TopographicArea_1", filter: ["==", "_symbol", 33], minzoom: 16, layout: {}, paint: { "fill-extrusion-color": greyscale ? 'lightgrey' : "#DCD7C6", "fill-extrusion-height": [ "interpolate", ["linear"], ["zoom"], 16, 0, 16.05, ["get", "RelHMax"] ], "fill-extrusion-opacity": 0.9 } }); }); map.on('load', function() { setTimeout(function() { map.flyTo({ zoom: 17, pitch: 60 }); }, 700); }); } // Add navigation control (excluding compass button) to the map. map.addControl(new mapboxgl.NavigationControl(), "top-right"); invalidation.then(() => map.remove()); }32:[] 2f:{"id":"bdfa57caac5f5b84","slug":"os-vector-tile-api","title":"OS Vector Tile API","thumbnail":"dfbbe13959cf973b6bde615a6eeb5be6d6168c97f744641e28057a73abbeaa92","access_level":"public","create_time":"$D2020-05-18T10:28:58.974Z","update_time":"$D2021-02-24T11:32:01.810Z","view_time":null,"first_public_time":"$D2020-05-18T10:29:02.322Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"694a515e88970367","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":"starter_2024"},"version":467,"publish_version":467,"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":0,"collection":{"id":"7f988f55ce59f462","slug":"os-data-hub-tools","title":"OS Data Hub tools","owner":{"id":"694a515e88970367","login":"johnx25bd","name":"johnx"}},"type":"notebook","body":{"title":"OS Vector Tile API","cells":[{"id":0,"value":"md`\n${osLogo}\n\n# OS Vector Tile API\n\nA notebook to explore the wonderful world of vector tiles from the [Ordnance Survey Data Hub](https://osdatahub.os.uk/).\n\nVector tile layers can be styled in a custom way. Select a layer below and a color and see what the map looks like with the custom style.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`## Input your API key`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"viewof apiKey = text({\n title: \"OS Data Hub API Key\",\n placeholder: \"Paste key here\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"validateKey(apiKey, 'vector-tile')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`## Service Endpoints\n\n| | |\n| ---| --- |\n| Service | \\`\\`${endpoints.vts}?srs=3857&key=${apiKey}\\`\\` |\n| Style | \\`\\`${endpoints.vts}/resources/styles?srs=3857&key=${apiKey}\\`\\`|`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"metadata = {\n // Fetch service metadata\n let res = await fetch(endpoints.vts + \"?srs=3857&key=\" + apiKey);\n let service = await res.json();\n\n // Fetch style\n res = await fetch(endpoints.vts + \"/resources/styles?srs=3857&key=\" + apiKey);\n let style = await res.json();\n \n mutable styleTemplate = JSON.parse(JSON.stringify(style))\n \n return {\n service: service,\n style: style\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`## Custom Styling\n\nVector tiles enable custom styling to be done in the browser. To illustrate this, select a layer (from the \\`\\`metadata.style.layers\\`\\` array above) and a color from the color picker:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof layerId = html`${layerSelect}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"viewof pickedColour = {\n let layerColour;\n\n let layerPaint = metadata.style.layers.filter(l => l.id == layerId)[0].paint;\n\n layerColour =\n layerPaint[Object.keys(layerPaint).filter(p => p.includes('color'))[0]];\n\n return colorPicker(layerColour);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`You can also define a custom stylesheet. The Greyscale toggle sets the vector tile map's stylesheet to one hosted [here](https://labs.os.uk/public/os-data-hub-examples/dist/os-vector-tile-api/styles/greyscale.json).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"greyscaleStylesheet = 'https://labs.os.uk/public/os-data-hub-examples/dist/os-vector-tile-api/styles/greyscale.json'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"viewof greyscale = checkbox([\"Greyscale?\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`## 3D Extrusion\n\nLast, vector tiles offer advanced panning, zooming and pitch adjustment functionality, plus the option to visualise 3D extrusions of features. Toggle \"3D buildings?\" to explore this functionality.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"viewof extrude = checkbox([\"3D buildings?\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"md`\n---\n## Appendices\n\nVariables, libraries and code for the features above: \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"layers = {\n let filtered = metadata.style.layers.filter(layer => {\n return layer.type != 'symbol';\n });\n return filtered.map(layer => {\n return layer.id;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"function setLayerStyle(layer, colour) {\n metadata.style = JSON.parse(JSON.stringify(styleTemplate));\n // Set selected layer's to the color selected above\n let lyr = metadata.style.layers.filter(l => l.id == layer)[0];\n if (lyr.type == 'fill') {\n lyr.paint[\"fill-color\"] = colour;\n } else if (lyr.type == 'line') {\n lyr.paint[\"line-color\"] = colour;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"mutable styleTemplate = {\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"layerSelect = {\n let html = \"';\n\n return html;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"import { endpoints, osLogo, osColours, validateKey } from \"@johnx25bd/os\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"import { checkbox, text, radio, button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg\";\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":183,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"stylesheets = ({\n outdoor:\n 'https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-outdoor/style.json',\n deuteranopia:\n 'https://labs.os.uk/public/cvd-zoomstack/deuteranopia-red-green-cvd-style.json',\n tritanopia:\n 'https://labs.os.uk/public/cvd-zoomstack/tritanopia-blue-yellow-cvd-style.json'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`🙏 to Tom MacWright for his [handy guide](https://observablehq.com/@tmcw/using-mapbox-gl-js) on Mapbox GL JS with Observable.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"