diff --git a/components/Map.tsx b/components/Map.tsx index 6673752..9789b6b 100644 --- a/components/Map.tsx +++ b/components/Map.tsx @@ -262,6 +262,70 @@ const Map: React.FC = () => { }); setSelectedCell(cell); map.current.resize(); + + var zoom = map.current.getZoom(); + var viewportNW = map.current.project([-180, 85.051129]); + var cellSize = Math.pow(2, zoom + 2); + const x = e.features[0].properties!.x; + const y = e.features[0].properties!.y; + let nw = map.current.unproject([ + x * cellSize + viewportNW.x, + y * cellSize + viewportNW.y, + ]); + let ne = map.current.unproject([ + x * cellSize + viewportNW.x + cellSize, + y * cellSize + viewportNW.y, + ]); + let se = map.current.unproject([ + x * cellSize + viewportNW.x + cellSize, + y * cellSize + viewportNW.y + cellSize, + ]); + let sw = map.current.unproject([ + x * cellSize + viewportNW.x, + y * cellSize + viewportNW.y + cellSize, + ]); + const selectedCellLines: GeoJSON.FeatureCollection< + GeoJSON.Geometry, + GeoJSON.GeoJsonProperties + > = { + type: "FeatureCollection", + features: [ + { + type: "Feature", + geometry: { + type: "LineString", + coordinates: [ + [nw.lng, nw.lat], + [ne.lng, ne.lat], + [se.lng, se.lat], + [sw.lng, sw.lat], + [nw.lng, nw.lat], + ], + }, + properties: { x: x, y: y }, + } + ], + }; + + if (map.current.getLayer("selected-cell-layer")) { + map.current.removeLayer("selected-cell-layer"); + } + if (map.current.getSource("selected-cell-source")) { + map.current.removeSource("selected-cell-source"); + } + map.current.addSource("selected-cell-source", { + type: "geojson", + data: selectedCellLines, + }); + map.current.addLayer({ + id: "selected-cell-layer", + type: "line", + source: "selected-cell-source", + paint: { + "line-color": "blue", + "line-width": 3, + }, + }); } }); }, [setSelectedCell]); diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index ef755a5..d89fadc 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -12,6 +12,12 @@ const Sidebar: React.FC = ({ selectedCell, setSelectedCell, map }) => { const onClose = () => { setSelectedCell(null); if (map.current) map.current.removeFeatureState({ source: "grid-source" }); + if (map.current && map.current.getLayer("selected-cell-layer")) { + map.current.removeLayer("selected-cell-layer"); + } + if (map.current && map.current.getSource("selected-cell-source")) { + map.current.removeSource("selected-cell-source"); + } requestAnimationFrame(() => { if (map.current) map.current.resize() }); }