taDuc
608 lines
17 KiB
TypeScript
608 lines
17 KiB
TypeScript
import { useEffect } from "react";
|
|
import maplibregl from "maplibre-gl";
|
|
import { getVectorTileTemplateUrl } from "@/uhm/api/tiles";
|
|
import {
|
|
COUNTRY_FILL_COLOR_EXPRESSION,
|
|
LINE_COLOR_BY_TYPE,
|
|
PATH_RENDER_BY_TYPE,
|
|
POLYGON_FILL_BY_TYPE,
|
|
POLYGON_OPACITY_BY_TYPE,
|
|
POLYGON_STROKE_BY_TYPE,
|
|
} from "@/uhm/lib/map/style";
|
|
import { EMPTY_FEATURE_COLLECTION } from "@/uhm/lib/geo/constants";
|
|
import { PATH_ARROW_ICON_ID, PATH_ARROW_SOURCE_ID } from "@/uhm/lib/map/constants";
|
|
import {
|
|
addPointSymbolLayer,
|
|
applyBackgroundLayerVisibility,
|
|
buildTypeMatchExpression,
|
|
ensurePathArrowIcon,
|
|
} from "./mapUtils";
|
|
import { BackgroundLayerVisibility } from "@/uhm/lib/backgroundLayers";
|
|
import { FeatureCollection } from "@/uhm/lib/useEditorState";
|
|
|
|
export function getBaseMapStyle(): maplibregl.StyleSpecification {
|
|
return {
|
|
version: 8,
|
|
glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
|
|
sources: {
|
|
base: {
|
|
type: "vector",
|
|
tiles: [getVectorTileTemplateUrl()],
|
|
minzoom: 0,
|
|
maxzoom: 6,
|
|
},
|
|
},
|
|
layers: [
|
|
{
|
|
id: "background",
|
|
type: "background",
|
|
paint: {
|
|
"background-color": "#0b1220",
|
|
},
|
|
},
|
|
{
|
|
id: "graticules-line",
|
|
type: "line",
|
|
source: "base",
|
|
"source-layer": "ne_10m_graticules_10",
|
|
paint: {
|
|
"line-color": "#334155",
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
0, 0.3,
|
|
4, 0.6,
|
|
6, 0.8,
|
|
],
|
|
"line-opacity": 0.55,
|
|
},
|
|
},
|
|
{
|
|
id: "land",
|
|
type: "fill",
|
|
source: "base",
|
|
"source-layer": "ne_10m_land",
|
|
paint: {
|
|
"fill-color": "#1e293b",
|
|
"fill-opacity": 0.25,
|
|
},
|
|
},
|
|
{
|
|
id: "bg-countries-fill",
|
|
type: "fill",
|
|
source: "base",
|
|
"source-layer": "ne_10m_admin_0_countries",
|
|
paint: {
|
|
"fill-color": COUNTRY_FILL_COLOR_EXPRESSION,
|
|
"fill-opacity": 0.38,
|
|
},
|
|
},
|
|
{
|
|
id: "bg-country-borders-line",
|
|
type: "line",
|
|
source: "base",
|
|
"source-layer": "ne_10m_admin_0_boundary_lines_land",
|
|
paint: {
|
|
"line-color": "#cbd5e1",
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
0, 0.2,
|
|
4, 0.5,
|
|
6, 1.1,
|
|
],
|
|
"line-opacity": 0.85,
|
|
},
|
|
},
|
|
{
|
|
id: "country-labels",
|
|
type: "symbol",
|
|
source: "base",
|
|
"source-layer": "country_labels",
|
|
minzoom: 0,
|
|
layout: {
|
|
"text-field": [
|
|
"coalesce",
|
|
["get", "NAME_EN"],
|
|
["get", "NAME"],
|
|
["get", "ADMIN"],
|
|
["get", "name"],
|
|
"",
|
|
],
|
|
"text-size": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
0, 15,
|
|
1, 16,
|
|
2, 17,
|
|
4, 19,
|
|
6, 23,
|
|
],
|
|
"text-padding": 0,
|
|
"text-max-width": 10,
|
|
"text-allow-overlap": true,
|
|
"text-ignore-placement": true,
|
|
"symbol-placement": "point",
|
|
},
|
|
paint: {
|
|
"text-color": "#e2e8f0",
|
|
"text-halo-color": "#0b1220",
|
|
"text-halo-width": 1.2,
|
|
"text-halo-blur": 0.5,
|
|
},
|
|
},
|
|
{
|
|
id: "regions-line",
|
|
type: "line",
|
|
source: "base",
|
|
"source-layer": "ne_10m_geography_regions_polys",
|
|
paint: {
|
|
"line-color": "#475569",
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
0, 0.2,
|
|
4, 0.6,
|
|
6, 1,
|
|
],
|
|
"line-opacity": 0.6,
|
|
},
|
|
},
|
|
{
|
|
id: "lakes-fill",
|
|
type: "fill",
|
|
source: "base",
|
|
"source-layer": "ne_10m_lakes",
|
|
paint: {
|
|
"fill-color": "#1d4ed8",
|
|
"fill-opacity": 0.45,
|
|
},
|
|
},
|
|
{
|
|
id: "rivers-line",
|
|
type: "line",
|
|
source: "base",
|
|
"source-layer": "ne_10m_rivers_lake_centerlines",
|
|
paint: {
|
|
"line-color": "#38bdf8",
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
0, 0.25,
|
|
4, 0.8,
|
|
6, 1.5,
|
|
],
|
|
"line-opacity": 0.85,
|
|
},
|
|
},
|
|
{
|
|
id: "geolines-line",
|
|
type: "line",
|
|
source: "base",
|
|
"source-layer": "ne_10m_geographic_lines",
|
|
paint: {
|
|
"line-color": "#94a3b8",
|
|
"line-width": 1.2,
|
|
"line-opacity": 0.8,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
}
|
|
|
|
export function setupMapLayers(
|
|
map: maplibregl.Map,
|
|
backgroundVisibility: BackgroundLayerVisibility,
|
|
highlightFeatures: FeatureCollection | null,
|
|
applyHighlightToMap: (fc: FeatureCollection) => void
|
|
) {
|
|
applyBackgroundLayerVisibility(map, backgroundVisibility);
|
|
const hasPathArrowIcon = ensurePathArrowIcon(map);
|
|
|
|
// preview (drawing)
|
|
map.addSource("draw-preview", {
|
|
type: "geojson",
|
|
data: { type: "FeatureCollection", features: [] },
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "draw-preview-fill",
|
|
type: "fill",
|
|
source: "draw-preview",
|
|
paint: {
|
|
"fill-color": "#22c55e",
|
|
"fill-opacity": 0.4,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "draw-preview-line",
|
|
type: "line",
|
|
source: "draw-preview",
|
|
paint: {
|
|
"line-color": "#16a34a",
|
|
"line-width": 2,
|
|
},
|
|
});
|
|
|
|
map.addSource("draw-circle-preview", {
|
|
type: "geojson",
|
|
data: { type: "FeatureCollection", features: [] },
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "draw-circle-preview-fill",
|
|
type: "fill",
|
|
source: "draw-circle-preview",
|
|
paint: {
|
|
"fill-color": "#0ea5e9",
|
|
"fill-opacity": 0.25,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "draw-circle-preview-line",
|
|
type: "line",
|
|
source: "draw-circle-preview",
|
|
paint: {
|
|
"line-color": "#0284c7",
|
|
"line-width": 2,
|
|
"line-opacity": 0.95,
|
|
},
|
|
});
|
|
|
|
map.addSource("draw-line-preview", {
|
|
type: "geojson",
|
|
data: { type: "FeatureCollection", features: [] },
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "draw-line-preview-line",
|
|
type: "line",
|
|
source: "draw-line-preview",
|
|
paint: {
|
|
"line-color": "#38bdf8",
|
|
"line-width": 3,
|
|
"line-opacity": 0.9,
|
|
"line-dasharray": [1.2, 0.9],
|
|
},
|
|
});
|
|
|
|
map.addSource("draw-path-preview", {
|
|
type: "geojson",
|
|
data: { type: "FeatureCollection", features: [] },
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "draw-path-preview-line",
|
|
type: "line",
|
|
source: "draw-path-preview",
|
|
paint: {
|
|
"line-color": "#38bdf8",
|
|
"line-width": 3,
|
|
"line-opacity": 0.9,
|
|
"line-dasharray": [1.2, 0.9],
|
|
},
|
|
});
|
|
|
|
if (hasPathArrowIcon) {
|
|
map.addLayer({
|
|
id: "draw-path-preview-arrows",
|
|
type: "symbol",
|
|
source: "draw-path-preview",
|
|
layout: {
|
|
"symbol-placement": "line",
|
|
"symbol-spacing": 56,
|
|
"icon-image": PATH_ARROW_ICON_ID,
|
|
"icon-size": 0.45,
|
|
"icon-allow-overlap": true,
|
|
"icon-ignore-placement": true,
|
|
},
|
|
});
|
|
}
|
|
|
|
// data
|
|
map.addSource("countries", {
|
|
type: "geojson",
|
|
data: { type: "FeatureCollection", features: [] },
|
|
promoteId: "id",
|
|
});
|
|
|
|
map.addSource(PATH_ARROW_SOURCE_ID, {
|
|
type: "geojson",
|
|
data: EMPTY_FEATURE_COLLECTION,
|
|
promoteId: "id",
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "countries-fill",
|
|
type: "fill",
|
|
source: "countries",
|
|
filter: ["==", ["geometry-type"], "Polygon"],
|
|
paint: {
|
|
"fill-color": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
"#22c55e",
|
|
[
|
|
"==",
|
|
["coalesce", ["get", "entity_id"], ""],
|
|
"",
|
|
],
|
|
"#ef4444",
|
|
buildTypeMatchExpression(POLYGON_FILL_BY_TYPE, "#f59e0b"),
|
|
],
|
|
"fill-opacity": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
0.6,
|
|
buildTypeMatchExpression(POLYGON_OPACITY_BY_TYPE, 0.5),
|
|
],
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "countries-line",
|
|
type: "line",
|
|
source: "countries",
|
|
filter: ["==", ["geometry-type"], "Polygon"],
|
|
paint: {
|
|
"line-color": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
"#14532d",
|
|
buildTypeMatchExpression(POLYGON_STROKE_BY_TYPE, "#fbbf24"),
|
|
],
|
|
"line-width": 2,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "routes-line",
|
|
type: "line",
|
|
source: "countries",
|
|
filter: [
|
|
"all",
|
|
["==", ["geometry-type"], "LineString"],
|
|
["!=", buildTypeMatchExpression(PATH_RENDER_BY_TYPE, false), true],
|
|
],
|
|
paint: {
|
|
"line-color": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
"#22c55e",
|
|
["==", ["coalesce", ["get", "entity_id"], ""], ""],
|
|
"#ef4444",
|
|
buildTypeMatchExpression(LINE_COLOR_BY_TYPE, "#38bdf8"),
|
|
],
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
1, 2.2,
|
|
4, 3.2,
|
|
6, 4.2,
|
|
],
|
|
"line-opacity": 0.9,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "routes-path-arrow-fill",
|
|
type: "fill",
|
|
source: PATH_ARROW_SOURCE_ID,
|
|
paint: {
|
|
"fill-color": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
"#22c55e",
|
|
["==", ["coalesce", ["get", "entity_id"], ""], ""],
|
|
"#ef4444",
|
|
buildTypeMatchExpression(LINE_COLOR_BY_TYPE, "#38bdf8"),
|
|
],
|
|
"fill-opacity": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
0.92,
|
|
0.82,
|
|
],
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "routes-path-arrow-line",
|
|
type: "line",
|
|
source: PATH_ARROW_SOURCE_ID,
|
|
paint: {
|
|
"line-color": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
"#14532d",
|
|
"#0f172a",
|
|
],
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
1, 0.45,
|
|
4, 0.8,
|
|
6, 1.2,
|
|
],
|
|
"line-opacity": 0.9,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "routes-path-hit",
|
|
type: "line",
|
|
source: "countries",
|
|
filter: [
|
|
"all",
|
|
["==", ["geometry-type"], "LineString"],
|
|
buildTypeMatchExpression(PATH_RENDER_BY_TYPE, false),
|
|
],
|
|
paint: {
|
|
"line-color": "#ffffff",
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
1, 12,
|
|
4, 18,
|
|
6, 24,
|
|
],
|
|
"line-opacity": 0,
|
|
},
|
|
});
|
|
|
|
map.addSource("places", {
|
|
type: "geojson",
|
|
data: { type: "FeatureCollection", features: [] },
|
|
promoteId: "id",
|
|
});
|
|
|
|
// editing overlays
|
|
map.addSource("edit-shape", {
|
|
type: "geojson",
|
|
data: { type: "FeatureCollection", features: [] },
|
|
});
|
|
map.addSource("edit-handles", {
|
|
type: "geojson",
|
|
data: { type: "FeatureCollection", features: [] },
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "edit-shape-line",
|
|
type: "line",
|
|
source: "edit-shape",
|
|
paint: {
|
|
"line-color": "#38bdf8",
|
|
"line-width": 3,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "edit-handles-circle",
|
|
type: "circle",
|
|
source: "edit-handles",
|
|
paint: {
|
|
"circle-color": "#f97316",
|
|
"circle-radius": 12,
|
|
"circle-stroke-color": "#0f172a",
|
|
"circle-stroke-width": 3,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "places-circle",
|
|
type: "circle",
|
|
source: "places",
|
|
paint: {
|
|
"circle-color": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
"#22c55e",
|
|
"#ef4444",
|
|
],
|
|
"circle-radius": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
8,
|
|
4,
|
|
],
|
|
"circle-stroke-color": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
"#14532d",
|
|
"#ffffff",
|
|
],
|
|
"circle-stroke-width": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
3,
|
|
1,
|
|
],
|
|
"circle-opacity": 0.9,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "places-selected-halo",
|
|
type: "circle",
|
|
source: "places",
|
|
paint: {
|
|
"circle-color": "#22c55e",
|
|
"circle-radius": 13,
|
|
"circle-opacity": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
0.28,
|
|
0,
|
|
],
|
|
"circle-stroke-color": "#14532d",
|
|
"circle-stroke-width": [
|
|
"case",
|
|
["boolean", ["feature-state", "selected"], false],
|
|
2,
|
|
0,
|
|
],
|
|
},
|
|
});
|
|
|
|
map.addSource("entity-focus", {
|
|
type: "geojson",
|
|
data: EMPTY_FEATURE_COLLECTION,
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "entity-focus-fill",
|
|
type: "fill",
|
|
source: "entity-focus",
|
|
filter: ["==", ["geometry-type"], "Polygon"],
|
|
paint: {
|
|
"fill-color": "#fde047",
|
|
"fill-opacity": 0.2,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "entity-focus-line",
|
|
type: "line",
|
|
source: "entity-focus",
|
|
paint: {
|
|
"line-color": "#f59e0b",
|
|
"line-width": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
1, 2.4,
|
|
4, 4,
|
|
6, 5.5,
|
|
],
|
|
"line-opacity": 0.98,
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "entity-focus-points",
|
|
type: "circle",
|
|
source: "entity-focus",
|
|
filter: ["==", ["geometry-type"], "Point"],
|
|
paint: {
|
|
"circle-color": "#f8fafc",
|
|
"circle-radius": 8,
|
|
"circle-stroke-color": "#f59e0b",
|
|
"circle-stroke-width": 3,
|
|
"circle-opacity": 1,
|
|
},
|
|
});
|
|
|
|
addPointSymbolLayer(map);
|
|
applyHighlightToMap(highlightFeatures || EMPTY_FEATURE_COLLECTION);
|
|
}
|