thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add selected cell line outline layer

Browse Source
This commit is contained in:
Tyler Hallada 2022-01-17 16:47:24 -05:00
parent 576eb5b583
commit fb13ebfa6c
2 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
components/Map.tsx
View File

@ -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]);

6
components/Sidebar.tsx
View File

@ -12,6 +12,12 @@ const Sidebar: React.FC<Props> = ({ 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() });
}