2b:null 2c:["$","title",null,{"children":"OS MAP Vector API - elevation with tracking and brushing | Fraser | Observable"}] 31:T15e2,{ const year = new Date().getFullYear(); let container = html`

Contains OS data © Crown copyright and database rights ${year} | Map data © gritstone100 ${year} | Mapbox GL JS 1.13.1

`; yield container; const elevation = d3.select("svg"); const elevationPopup = new mapboxgl.Popup({ className: "elevation-popup", closeButton: false, closeOnClick: false }); const round = (n) => Math.round((n + Number.EPSILON) * 100) / 100; const convert = { metresToFeet: (n) => round(n * 3.28084), feetToMetres: (n) => round(n / 3.28084), milesToKilometres: (n) => round(n * 1.609), KilometresToMiles: (n) => round(n / 1.609), ddToDMS: (d) => { const absolute = Math.abs(d), degrees = Math.floor(absolute), minutesNotTruncated = (absolute - degrees) * 60, minutes = Math.floor(minutesNotTruncated), seconds = Math.floor((minutesNotTruncated - minutes) * 60); return `${degrees}\u00B0 ${minutes}\u2032 ${seconds}\u2033`; }, coordinateToDMS: (c) => ({ lat: convert.ddToDMS(c[1]) + (c[1] >= 0 ? " N" : " S"), lng: convert.ddToDMS(c[0]) + (c[0] >= 0 ? " E" : " W") }) }; const map = new mapboxgl.Map({ container: "map", center: [-1.69, 53.35], zoom: 9, style: "https://api.os.uk/maps/vector/v1/vts/resources/styles?key=ZyCh1h6jfdwJfXTJ4bhlMXfWmNswZfJQ", transformRequest: (url) => { return { url: url + "&srs=3857" }; } }); // Build the sidebar d3.select("#menu") .selectAll(null) .data(gs100.features.slice(1)) .enter() .append("li") .attr("class", "feature") .attr("data-id", (d) => d.id) .attr("data-lat", (d) => d.geometry.coordinates[1]) .attr("data-lng", (d) => d.geometry.coordinates[0]) .html((d) => { const dms = convert.coordinateToDMS(d.geometry.coordinates); return `

${d.properties.name}

${d.properties.distance} mi

${d.properties.desc ?? ""}

Distance from previous: ${ d.properties.prev } mi

OS Grid Ref: ${ d.properties.osgb }

Latitude: ${dms.lat}

Longitude: ${dms.lng}

Elevation: ${convert.metresToFeet( d.geometry.coordinates[2] )} ft

`; }); // Handle sidebar POI click events d3.selectAll("#menu li").on("click", (e) => { const id = +e.currentTarget.dataset.id, active = !!map.getFeatureState({ source: "gs100", id: id }).active; map.setFeatureState({ source: "gs100", id: id }, { active: !active }); e.currentTarget.querySelector("div.desc").style.display = active ? "none" : "block"; !active && map.flyTo({ center: [+e.currentTarget.dataset.lng, +e.currentTarget.dataset.lat], zoom: 15 }); }); // Handle elevation brushing and tracking events elevation.on("brush", (e) => { const bounds = new mapboxgl.LngLatBounds(); e.detail.forEach((f) => bounds.extend(f.geometry.coordinates)); map.fitBounds(bounds, { padding: 5 }); }); elevation.on("out", elevationPopup.remove); elevation.on("move", (e) => elevationPopup .setLngLat(e.detail.geometry.coordinates) .setHTML( `${e.detail.properties.distance} mi
${convert.metresToFeet(e.detail.geometry.coordinates[2])} ft` ) .addTo(map) ); map.dragRotate.disable(); map.touchZoomRotate.disableRotation(); map.on("load", () => { map.addSource("gs100", { type: "geojson", data: gs100, tolerance: 3, buffer: 0 }); map.addLayer({ id: "route", type: "line", source: "gs100", filter: ["==", ["id"], 0], layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#bd0000", "line-width": 3 } }); map.addLayer({ id: "points", type: "circle", source: "gs100", filter: ["==", ["geometry-type"], "Point"], paint: { "circle-radius": [ "case", ["boolean", ["feature-state", "active"], false], 12, 0 ], "circle-color": "#333", "circle-stroke-width": [ "case", ["boolean", ["feature-state", "active"], false], 3, 0 ], "circle-stroke-color": "#efefef" } }); map.addLayer({ id: "labels", type: "symbol", source: "gs100", filter: ["==", ["geometry-type"], "Point"], paint: { "text-color": [ "case", ["boolean", ["feature-state", "active"], false], "#efefef", "#333" ], "text-halo-color": "#efefef", "text-halo-width": [ "case", ["boolean", ["feature-state", "active"], false], 0, 3 ] }, layout: { "text-font": ["Source Sans Pro Regular"], "text-field": ["id"], //"{name}"" "text-size": 12, "text-anchor": "center" } }); }); }32:T14e9,function ElevationChart(data, { x = ([x]) => x, y = ([, y]) => y, defined, curve = d3.curveLinear, marginTop = 20, marginRight = 30, marginBottom = 30, marginLeft = 40, width = 220, height = 130, xDomain, xRange = [marginLeft, width - marginRight], xType = d3.scaleLinear, xLabel = "distance", yDomain, yRange = [height - marginBottom, marginTop], yType = d3.scaleLinear, yFormat, yLabel = "height", color = "red", strokeLinecap = "round", strokeLinejoin = "round", strokeWidth = 1.5, strokeOpacity = 1, focusColor = "#323232", markerFilter = d => { }, markerText = d => y(d) } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); if (defined === undefined) { defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]) } const D = d3.map(data, defined); // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y)]; // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(12).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // Construct a line generator. const line = d3.line() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); // Create svg const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("preserveAspectRatio", "xMinYMin") .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // Create X axes and label svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.append("text") .attr("fill", "currentColor") .attr("x", marginLeft) .attr("y", marginBottom) .text(xLabel)); // Create Y axes svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); // Create indicator lines svg.selectAll(null) .data(d3.filter(data, markerFilter)) .join( enter => enter.append("g") .attr("transform", d => `translate(${xScale(x(d))},${yScale(y(d))})`) .attr("font-size", 10) .call(g => g.append("text") .attr("text-anchor", "middle") .attr("y", -5) .style("fill", "#08b8e8") .text(markerText)) .call(g => g.append("line") .attr("y2", d => height - marginBottom - yScale(y(d))) .attr("style", "stroke: #08b8e8; stroke-dasharray: 4")) ); // Create elevation line svg.append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", strokeOpacity) .attr("d", line(I)); // Create the circle that travels along the curve const focus = svg .append("g") .style("opacity", 0) .call(g => g.append("circle") .attr("r", 2) .style("fill", focusColor)) .call(g => g.append("line") .attr("style", `stroke: ${focusColor}; stroke-dasharray: 4`)); // Create brushing const brush = d3.brushX() .extent([ [marginLeft, 0.5], [width - marginRight, 120 - marginBottom + 0.5] ]) .on("end", e => { if (e.selection) { const start = d3.bisector(x).left(data, xScale.invert(e.selection[0]), 1), end = d3.bisector(x).right(data, xScale.invert(e.selection[1]), 1); svg.node().dispatchEvent(new CustomEvent("brush", { // the features between the start and end of the brush detail: data.slice(start, end) })); } }); svg.append("g") .call(brush) .on("touchstart", e => e.preventDefault()) .on("mousemove touchmove", e => { const i = d3.bisector(x).left( data, xScale.invert(d3.pointers(e)[0][0]), 1 ); if (!data[i]) { return; // no matching point } focus.attr("transform", `translate(${xScale(x(data[i]))},${yScale(y(data[i]))})`) .select("line") .attr("y2", height - marginBottom - yScale(y(data[i]))); svg.node().dispatchEvent(new CustomEvent("move", { detail: data[i] })); }) .on("mouseover touchstart", () => { svg.node().dispatchEvent(new Event("over")) focus.style("opacity", 1); }) .on("mouseout touchend", () => { svg.node().dispatchEvent(new Event("out")) focus.style("opacity", 0); }); return svg.node(); }33:T795,html``34:[{"id":"c0e8260a60c472f03708c738db21adc7dc9774761f7a9e8253382d7706f6f479e5f22c6ebec969a61ccda13012032b33c9c189ef501a74145f84600db816af1b","href":"https://static.observableusercontent.com/files/c0e8260a60c472f03708c738db21adc7dc9774761f7a9e8253382d7706f6f479e5f22c6ebec969a61ccda13012032b33c9c189ef501a74145f84600db816af1b","name":"gs100.min.geojson","type":"application/geo+json","lastModified":1646513848424.136,"size":222226}] 2f:{"id":"ab633981794a01c6","slug":"os-map-vector-api","title":"OS MAP Vector API - elevation with tracking and brushing","thumbnail":"a88ee839735b7cea06e8230a7d7681592b9151ee172cbd3c7a51c9dea1124ea5","access_level":"public","create_time":"$D2022-03-05T20:56:48.183Z","update_time":"$D2022-03-15T21:26:30.504Z","view_time":null,"first_public_time":"$D2022-03-07T10:46:00.982Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ae9a0588d0445db9","login":"fraserchapman","name":"Fraser","avatar_url":"https://avatars-next.observableusercontent.com/7245fdf4b81867270a3313423b4a4efe41eb7060823e7e110591970073605930","tier":"starter_2024"},"version":364,"publish_version":364,"role":null,"authored":false,"authors":[{"type":"individual","id":"265321de1bf4234c","login":"fraserchapman","name":"Fraser","avatar_url":"https://avatars-next.observableusercontent.com/7245fdf4b81867270a3313423b4a4efe41eb7060823e7e110591970073605930","tier":null}],"members":[{"type":"individual","id":"265321de1bf4234c","login":"fraserchapman","name":"Fraser","avatar_url":"https://avatars-next.observableusercontent.com/7245fdf4b81867270a3313423b4a4efe41eb7060823e7e110591970073605930","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"1e1c5ef4079c3c98","slug":"os-maps-api","title":"OS Maps API","owner":{"id":"ae9a0588d0445db9","login":"fraserchapman","name":"Fraser"}},"type":"notebook","body":{"title":"OS MAP Vector API - elevation with tracking and brushing","cells":[{"id":205,"value":"# OS MAP Vector API - elevation with tracking and brushing\n\n- Mouse over the elevation gradient to see the current distance and elevation plotted on the map.\n- One can also select a section of the elevation gradient and the map will zoom to the extent of the selection.\n\n## Using\n\n- OS Maps API - https://osdatahub.os.uk/docs/wmts/overview\n- OS Vector Tile API - https://osdatahub.os.uk/docs/vts/overview\n- Mapbox GL JS version 1.13.1 - https://docs.mapbox.com/mapbox-gl-js/guides/\n- D3js version 7 - https://d3js.org/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"elevationChart = new ElevationChart(gs100.features.slice(1), {\n width: width,\n height: 120,\n x: (d) => d.properties.distance,\n y: (d) =>\n Math.round((d.geometry.coordinates[2] * 3.28084 + Number.EPSILON) * 100) /\n 100,\n yLabel: \"\\u2191 height (ft)\",\n xLabel: \"\\u2192 distance (mi)\",\n markerText: \"\\u25EC\",\n markerFilter: (d) =>\n d.properties.name &&\n d.properties.name.toUpperCase().indexOf(\"TRIG POINT\") > -1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"mapboxgl = require('mapbox-gl@1.13.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"gs100 = FileAttachment(\"gs100.min.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"