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