31:T17d1,{ let container = html`

`; yield container; let initLoad = true; let marker; const map = new maplibregl.Map({ container, center: mutable centerCoord, zoom: zoom, pitch: pitch, maxZoom: 14, maxPitch: 85, bearing: 0, style: "https://api.maptiler.com/maps/9ff20210-e1dd-420d-9caa-db4cbd416f28/style.json?key=KNJqbC4CRDRzmzxaOjN1" }); map.on("load", () => { map.addControl(new maplibregl.NavigationControl(), "bottom-right"); map.addControl( new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }), "bottom-right" ); // 3D Terrain map.addSource("terrain-source", { type: "raster-dem", url: "https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=KNJqbC4CRDRzmzxaOjN1" }); map.setTerrain({ source: "terrain-source", exaggeration }); // Points map.addSource("winter-source", { type: "geojson", data: winter }); map.addLayer({ id: "unclustered-points", type: "circle", source: "winter-source", paint: { "circle-color": color1, "circle-stroke-color": "#fff", "circle-stroke-width": [ "interpolate", ["linear"], ["zoom"], 0, 1, 10, 0 ], "circle-radius": ["interpolate", ["linear"], ["zoom"], 5, 4, 14, 12], "circle-opacity": 1 } }); map.on("move", () => { mutable centerCoord = map.getCenter(); viewof zoom.value = map.getZoom(); viewof pitch.value = map.getPitch(); }); // Nearest Neighbors if (nearestNeighbors > 0) { buildSpoke(winter); map.on("move", () => { buildSpoke(winter); }); } function buildSpoke(data) { // get the current center point const center = map.getCenter(); const centerPoint = turf.point([center.lng, center.lat]); if (center.lng >= 180) center.lng -= 180; if (center.lng <= -180) center.lng += 180; if (marker) marker.remove(); console.log("mod", { center }); marker = new maplibregl.Marker({ color: "#555", scale: 0.9 }) .setLngLat(center) .addTo(map); let nearestPoints = turf.featureCollection([]); let nearestPointLines = turf.featureCollection([]); let dataCopy = JSON.parse(JSON.stringify(data)); // find top N nearest neighbors, and draw lines from the center for (let i = 1; i <= nearestNeighbors; i++) { const point = turf.nearestPoint(centerPoint, dataCopy); const startLng = centerPoint.geometry.coordinates[0]; const endLng = point.geometry.coordinates[0]; if (startLng >= 90 && endLng <= -90) { point.geometry.coordinates[0] += 360; } else if (startLng <= -90 && endLng >= 90) { point.geometry.coordinates[0] -= 360; } nearestPoints.features.push(point); const nearestLine = turf.lineString([ centerPoint.geometry.coordinates, point.geometry.coordinates ]); nearestPointLines.features.push(nearestLine); const index = dataCopy.features.findIndex( (n) => n.properties.osm_id === point.properties.osm_id ); if (index !== -1) { dataCopy.features.splice(index, 1); } } if (initLoad) { initLoad = false; map.addSource("nn-point-source", { type: "geojson", data: nearestPoints }); map.addSource("nn-line-source", { type: "geojson", data: nearestPointLines }); map.addLayer({ id: "nn-lines", type: "line", source: "nn-line-source", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": color2, "line-width": ["interpolate", ["linear"], ["zoom"], 0, 1, 3, 4] } }); map.addLayer({ id: "nn-points", type: "circle", source: "nn-point-source", paint: { "circle-color": color1, "circle-stroke-color": color2, "circle-stroke-width": 3, "circle-radius": [ "interpolate", ["linear"], ["zoom"], 5, 4, 14, 12 ], "circle-opacity": 1 } }); } else { map.getSource("nn-point-source").setData(nearestPoints); map.getSource("nn-line-source").setData(nearestPointLines); } } // Popup map.on("click", "unclustered-points", (e) => { const props = e.features[0].properties; const coord = e.features[0].geometry.coordinates; const osmDiv = `

`; const websiteDiv = props.website ? `

website

` : ""; const content = ``; map.flyTo({ center: coord, duration: 1500 }); new maplibregl.Popup().setLngLat(e.lngLat).setHTML(content).addTo(map); }); map.on("mouseenter", "unclustered-points", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "unclustered-points", () => { map.getCanvas().style.cursor = ""; }); }); invalidation.then(() => map.remove()); }32:[{"id":"1b58c786301f00eae186f8d0776d42be531d9f46732d28807a10a7cd1611fe07d9dad20536ee820334a2490bf29ac0215d5ff463e20b28ad8ac49e85f3c8e9a2","href":"https://static.observableusercontent.com/files/1b58c786301f00eae186f8d0776d42be531d9f46732d28807a10a7cd1611fe07d9dad20536ee820334a2490bf29ac0215d5ff463e20b28ad8ac49e85f3c8e9a2","name":"osm_winter_sports.geojson","type":"application/geo+json","lastModified":1675519410705.288,"size":743465}] 2f:{"title":"World Ski Resorts - nearest neighbors","cells":[{"id":0,"value":"# World Ski Resorts - nearest neighbors\n\nCompare to [Voronoi](https://observablehq.com/@sorami/world-ski-resorts-voronoi).\n\nData from OpenStreeMap (see [this](https://gist.github.com/sorami/0755ff22f7cc0af8ec25e5e5673c918f) for the detail). Click the points to view the information. Terrain height exaggerated by the factor of ${exaggeration}.","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"viewof nearestNeighbors = Inputs.range([0, 100], {\n label: \"# Nearest Neighbors\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"viewof zoom = Inputs.range([0, 14], {\n label: \"Zoom\",\n step: 0.1,\n value: 9.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"viewof pitch = Inputs.range([0, 85], {\n label: \"Pitch\",\n step: 5,\n value: 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"viewof exaggeration = Inputs.range([0, 5], {\n label: \"Terrain Exaggeration\",\n step: 0.5,\n value: 2.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"## Data\n\nSee [OpenStreetMap - \"landuse = winter_sports\"](https://gist.github.com/sorami/0755ff22f7cc0af8ec25e5e5673c918f#file-stats-ipynb) (incl. preprocessing code and stats).","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"Inputs.table(\n winter.features.map((d) => {\n return {\n ...d.properties,\n longitude: d.geometry.coordinates[0],\n latitude: d.geometry.coordinates[1]\n };\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"winter = FileAttachment(\"osm_winter_sports.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":598,"value":"viewof color1 = Inputs.color({ label: \"Color 1\", value: \"#EE5A24\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"viewof color2 = Inputs.color({ label: \"Color 2\", value: \"#FFC312\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"mutable centerCoord = [141.1, 42.7]","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"maplibregl = require(\"maplibre-gl@2.4.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":212,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":234,"value":"## References\n\n- [Gazetteer of Japan (地名集日本) / Sorami Hisamoto | Observable](https://observablehq.com/@sorami/gazetteer-of-japan)\n- [近隣10軒のセイコーマート / Sorami Hisamoto | Observable](https://observablehq.com/@sorami/closest-seicomarts) (closest convenience stores)\n - Original idea by William B. Davis\n - https://twitter.com/willy_maps/status/1536132236583518209\n - https://willymaps.github.io/spoke/","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}