modmapper-web/components/Map.tsx

394 lines
11 KiB
TypeScript
Raw Normal View History

import React, { useRef, useEffect, useState } from "react";
import Gradient from "javascript-color-gradient";
2022-01-15 04:27:29 +00:00
import mapboxgl from "mapbox-gl";
import useSWRImmutable from "swr/immutable";
import styles from "../styles/Map.module.css";
import Sidebar from "./Sidebar";
import ToggleLayersControl from "./ToggleLayersControl";
2022-01-15 04:27:29 +00:00
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? "";
const colorGradient = new Gradient();
colorGradient.setGradient(
"#0000FF",
"#00FF00",
"#FFFF00",
"#FFA500",
"#FF0000"
);
colorGradient.setMidpoint(360);
const jsonFetcher = (url: string) => fetch(url).then((res) => res.json());
const Map: React.FC = () => {
2022-01-15 04:27:29 +00:00
const mapContainer = useRef<HTMLDivElement | null>(
null
) as React.MutableRefObject<HTMLDivElement>;
const map = useRef<mapboxgl.Map | null>(
null
) as React.MutableRefObject<mapboxgl.Map>;
const [selectedCell, setSelectedCell] = useState<[number, number] | null>(
null
);
const { data, error } = useSWRImmutable(
"https://cells.modmapper.com/edits.json",
jsonFetcher
);
useEffect(() => {
if (map.current) return; // initialize map only once
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: {
version: 8,
sources: {
"raster-tiles": {
type: "raster",
tiles: ["https://tiles.modmapper.com/{z}/{x}/{y}.jpg"],
tileSize: 256,
attribution:
'Map tiles by <a href="https://en.uesp.net/wiki/Skyrim:Skyrim">UESP</a>',
},
},
layers: [
{
id: "simple-tiles",
type: "raster",
source: "raster-tiles",
},
],
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
},
center: [0, 0],
zoom: 0,
minZoom: 0,
maxZoom: 8,
maxBounds: [
[-180, -85.051129],
[180, 85.051129],
],
});
});
useEffect(() => {
2022-01-23 17:34:59 +00:00
if (!data) return; // wait for map to initialize and data to load
map.current.on("load", () => {
const zoom = map.current.getZoom();
const viewportNW = map.current.project([-180, 85.051129]);
const cellSize = Math.pow(2, zoom + 2);
2022-01-15 04:27:29 +00:00
const graticule: GeoJSON.FeatureCollection<
GeoJSON.Geometry,
GeoJSON.GeoJsonProperties
> = {
type: "FeatureCollection",
features: [],
};
for (let x = 0; x < 128; x += 1) {
let lng = map.current.unproject([x * cellSize + viewportNW.x, -90]).lng;
graticule.features.push({
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[lng, -90],
[lng, 90],
],
},
properties: { value: x },
});
}
for (let y = 0; y < 128; y += 1) {
let lat = map.current.unproject([
-180,
y * cellSize + viewportNW.y,
]).lat;
graticule.features.push({
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[-180, lat],
[180, lat],
],
},
properties: { value: y },
});
}
map.current.addSource("graticule", {
type: "geojson",
data: graticule,
});
map.current.addLayer({
id: "graticule",
type: "line",
source: "graticule",
});
2022-01-15 04:27:29 +00:00
const gridLabelPoints: GeoJSON.FeatureCollection<
GeoJSON.Geometry,
GeoJSON.GeoJsonProperties
> = {
type: "FeatureCollection",
features: [],
};
for (let x = 0; x < 128; x += 1) {
for (let y = 0; y < 128; y += 1) {
let nw = map.current.unproject([
x * cellSize + viewportNW.x + cellSize / 32,
y * cellSize + viewportNW.y + cellSize / 32,
]);
gridLabelPoints.features.push({
type: "Feature",
geometry: {
type: "Point",
coordinates: [nw.lng, nw.lat],
},
properties: {
label: `${x - 57}, ${50 - y}`,
},
});
}
}
map.current.addSource("grid-labels-source", {
type: "geojson",
data: gridLabelPoints,
});
map.current.addLayer({
id: "grid-labels-layer",
type: "symbol",
source: "grid-labels-source",
layout: {
"text-field": ["get", "label"],
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0],
"text-anchor": "top-left",
"text-rotation-alignment": "map",
},
paint: {
"text-halo-width": 1,
"text-halo-blur": 3,
"text-halo-color": "rgba(255,255,255,0.8)",
},
minzoom: 4,
});
2022-01-15 04:27:29 +00:00
const grid: GeoJSON.FeatureCollection<
GeoJSON.Geometry,
GeoJSON.GeoJsonProperties
> = {
type: "FeatureCollection",
features: [],
};
for (let x = 0; x < 128; x += 1) {
for (let y = 0; y < 128; y += 1) {
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 editCount = (data as Record<string, number>)[
2022-01-15 04:27:29 +00:00
`${x - 57},${50 - y}`
];
grid.features.push({
type: "Feature",
id: x * 100 + y,
geometry: {
type: "Polygon",
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,
cellX: x - 57,
cellY: 50 - y,
label: `${x - 57}, ${50 - y}`,
color: editCount ? colorGradient.getColor(editCount) : "#888888",
opacity: editCount ? Math.min((editCount / 150) * 0.25, 0.5) : 0,
},
});
}
}
map.current.addSource("grid-source", {
type: "geojson",
data: grid,
});
map.current.addLayer(
{
id: "grid-layer",
type: "fill",
source: "grid-source",
paint: {
"fill-opacity": 0,
},
},
"grid-labels-layer"
);
map.current.addLayer(
{
id: "heatmap-layer",
type: "fill",
source: "grid-source",
paint: {
"fill-color": ["get", "color"],
"fill-opacity": ["get", "opacity"],
"fill-outline-color": [
"case",
["boolean", ["feature-state", "selected"], false],
"white",
"transparent",
],
},
},
"grid-labels-layer"
);
map.current.addControl(new mapboxgl.FullscreenControl());
map.current.addControl(new mapboxgl.NavigationControl());
});
let singleClickTimeout: NodeJS.Timeout | null = null;
map.current.on("click", "grid-layer", (e) => {
const features = e.features;
if (singleClickTimeout) return;
singleClickTimeout = setTimeout(() => {
singleClickTimeout = null;
if (features && features[0]) {
const cell: [number, number] = [
features[0].properties!.cellX,
features[0].properties!.cellY,
];
map.current.removeFeatureState({ source: "grid-source" });
map.current.setFeatureState(
2022-01-17 21:47:24 +00:00
{
source: "grid-source",
id: features[0].id,
},
{
selected: true,
}
);
setSelectedCell(cell);
map.current.resize();
2022-01-17 21:47:24 +00:00
var zoom = map.current.getZoom();
var viewportNW = map.current.project([-180, 85.051129]);
var cellSize = Math.pow(2, zoom + 2);
const x = features[0].properties!.x;
const y = 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,
},
});
2022-01-17 21:47:24 +00:00
}
2022-01-23 23:05:36 +00:00
}, 400);
});
map.current.on("dblclick", "grid-layer", (e) => {
if (singleClickTimeout) clearTimeout(singleClickTimeout);
singleClickTimeout = null;
});
}, [setSelectedCell, data]);
return (
<>
<Sidebar
selectedCell={selectedCell}
setSelectedCell={setSelectedCell}
map={map}
/>
<div
className={`${styles["map-wrapper"]} ${
selectedCell ? styles["map-wrapper-sidebar-open"] : ""
}`}
>
<div ref={mapContainer} className={styles["map-container"]} />
<ToggleLayersControl map={map} />
</div>
</>
);
};
export default Map;