{ 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" } }); }); }