2022-01-16 07:26:17 +00:00
|
|
|
import React, { useRef, useEffect, useState } from "react";
|
2022-01-15 03:46:39 +00:00
|
|
|
import Gradient from "javascript-color-gradient";
|
2022-01-15 04:27:29 +00:00
|
|
|
import mapboxgl from "mapbox-gl";
|
2022-01-15 03:46:39 +00:00
|
|
|
|
|
|
|
import styles from "../styles/Map.module.css";
|
|
|
|
import cellModEdits from "../data/cellModEditCounts.json";
|
2022-01-16 07:26:17 +00:00
|
|
|
import Sidebar from "./Sidebar";
|
2022-01-15 03:46:39 +00:00
|
|
|
import ToggleLayersControl from "./ToggleLayersControl";
|
|
|
|
|
2022-01-15 04:27:29 +00:00
|
|
|
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? "";
|
2022-01-15 03:46:39 +00:00
|
|
|
|
|
|
|
const colorGradient = new Gradient();
|
|
|
|
colorGradient.setGradient("#888888", "#00FF00", "#FFFF00", "#FF0000");
|
|
|
|
colorGradient.setMidpoint(300);
|
|
|
|
|
2022-01-16 07:26:17 +00:00
|
|
|
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>;
|
2022-01-16 07:26:17 +00:00
|
|
|
const [selectedCell, setSelectedCell] = useState<[number, number] | null>(null);
|
2022-01-15 03:46:39 +00:00
|
|
|
|
|
|
|
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,
|
2022-01-16 07:26:17 +00:00
|
|
|
minZoom: 0,
|
2022-01-15 03:46:39 +00:00
|
|
|
maxZoom: 8,
|
2022-01-16 07:26:17 +00:00
|
|
|
maxBounds: [[-180, -85.051129], [180, 85.051129]]
|
2022-01-15 03:46:39 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!map.current) return; // wait for map to initialize
|
|
|
|
map.current.on("load", () => {
|
|
|
|
var zoom = map.current.getZoom();
|
|
|
|
var viewportNW = map.current.project([-180, 85.051129]);
|
|
|
|
var cellSize = Math.pow(2, zoom + 2);
|
|
|
|
|
2022-01-15 04:27:29 +00:00
|
|
|
const graticule: GeoJSON.FeatureCollection<
|
|
|
|
GeoJSON.Geometry,
|
|
|
|
GeoJSON.GeoJsonProperties
|
|
|
|
> = {
|
2022-01-15 03:46:39 +00:00
|
|
|
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
|
|
|
|
> = {
|
2022-01-15 03:46:39 +00:00
|
|
|
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
|
|
|
|
> = {
|
2022-01-15 03:46:39 +00:00
|
|
|
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,
|
|
|
|
]);
|
2022-01-15 04:27:29 +00:00
|
|
|
const editCount = (cellModEdits as Record<string, number>)[
|
|
|
|
`${x - 57},${50 - y}`
|
|
|
|
];
|
2022-01-15 03:46:39 +00:00
|
|
|
grid.features.push({
|
|
|
|
type: "Feature",
|
|
|
|
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,
|
2022-01-16 07:26:17 +00:00
|
|
|
cellX: x - 57,
|
|
|
|
cellY: 50 - y,
|
2022-01-15 03:46:39 +00:00
|
|
|
label: `${x - 57}, ${50 - y}`,
|
|
|
|
color: editCount ? colorGradient.getColor(editCount) : "#888888",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
map.current.addSource("grid-source", {
|
|
|
|
type: "geojson",
|
|
|
|
data: grid,
|
|
|
|
});
|
|
|
|
|
|
|
|
map.current.addLayer(
|
|
|
|
{
|
|
|
|
id: "grid-layer",
|
|
|
|
type: "fill",
|
|
|
|
source: "grid-source",
|
|
|
|
paint: {
|
|
|
|
"fill-color": ["get", "color"],
|
|
|
|
"fill-opacity": 0.25,
|
|
|
|
"fill-outline-color": "transparent",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
"grid-labels-layer"
|
|
|
|
);
|
|
|
|
|
|
|
|
map.current.addControl(new mapboxgl.FullscreenControl());
|
|
|
|
map.current.addControl(new mapboxgl.NavigationControl());
|
|
|
|
});
|
|
|
|
|
|
|
|
map.current.on("click", "grid-layer", (e) => {
|
2022-01-16 07:26:17 +00:00
|
|
|
if (e.features && e.features[0]) {
|
|
|
|
const cell: [number, number] = [e.features[0].properties!.cellX, e.features[0].properties!.cellY];
|
|
|
|
setSelectedCell(cell);
|
|
|
|
map.current.resize();
|
|
|
|
}
|
2022-01-15 03:46:39 +00:00
|
|
|
});
|
2022-01-16 07:26:17 +00:00
|
|
|
}, [setSelectedCell]);
|
2022-01-15 03:46:39 +00:00
|
|
|
|
|
|
|
return (
|
2022-01-16 07:26:17 +00:00
|
|
|
<>
|
|
|
|
<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>
|
|
|
|
</>
|
2022-01-15 03:46:39 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Map;
|