reafactor(important): change to new map backround base goong.io

src/uhm/lib/editor/background/backgroundVisibilityStorage.ts

@@ -4,7 +4,7 @@ import {
     DEFAULT_BACKGROUND_LAYER_VISIBILITY,
 } from "@/uhm/lib/map/styles/backgroundLayers";
 
-const BACKGROUND_LAYER_VISIBILITY_STORAGE_KEY = "uhm.backgroundLayerVisibility.v1";
+const BACKGROUND_LAYER_VISIBILITY_STORAGE_KEY = "uhm.backgroundLayerVisibility.v2";
 
 export function loadBackgroundLayerVisibilityFromStorage(): BackgroundLayerVisibility {
     if (typeof window === "undefined") {
@@ -57,4 +57,3 @@ function normalizeBackgroundLayerVisibility(raw: unknown): BackgroundLayerVisibi
 
     return next;
 }
-

src/uhm/lib/map/constants.ts

@@ -5,7 +5,6 @@ export const MAP_MAX_ZOOM = 10;
 
 export const RASTER_BASE_SOURCE_ID = "rasterBase";
 export const RASTER_BASE_LAYER_ID = "raster-base-layer";
-export const RASTER_BASE_INSERT_BEFORE_LAYER_ID = "graticules-line";
 
 export const PATH_ARROW_SOURCE_ID = "path-arrow-shapes";
 export const POLYGON_LABEL_SOURCE_ID = "polygon-labels";

src/uhm/lib/map/styles/backgroundLayers.ts

@@ -1,29 +1,29 @@
 export const BACKGROUND_LAYER_OPTIONS = [
     { id: "raster-base-layer", label: "Raster" },
-    { id: "graticules-line", label: "Graticules" },
-    { id: "land", label: "Land" },
-    { id: "bg-countries-fill", label: "Countries" },
     { id: "bg-country-borders-line", label: "Country Borders" },
+    { id: "bg-province-borders-line", label: "Province Borders" },
+    { id: "bg-district-borders-line", label: "District Borders" },
     { id: "country-labels", label: "Country Labels" },
-    { id: "regions-line", label: "Regions" },
-    { id: "lakes-fill", label: "Lakes" },
     { id: "rivers-line", label: "Rivers" },
-    { id: "geolines-line", label: "Geolines" },
 ] as const;
 
 export type BackgroundLayerId = (typeof BACKGROUND_LAYER_OPTIONS)[number]["id"];
 export type BackgroundLayerVisibility = Record<BackgroundLayerId, boolean>;
 
-// Tạo map visibility mặc định cho toàn bộ background layers.
-function buildBackgroundLayerVisibility(value: boolean): BackgroundLayerVisibility {
-    return BACKGROUND_LAYER_OPTIONS.reduce((acc, option) => {
-        acc[option.id] = value;
-        return acc;
-    }, {} as BackgroundLayerVisibility);
-}
+export const DEFAULT_BACKGROUND_LAYER_VISIBILITY: BackgroundLayerVisibility = {
+    "raster-base-layer": true,
+    "bg-country-borders-line": true,
+    "bg-province-borders-line": false,
+    "bg-district-borders-line": false,
+    "country-labels": true,
+    "rivers-line": true,
+};
 
-export const DEFAULT_BACKGROUND_LAYER_VISIBILITY =
-    buildBackgroundLayerVisibility(true);
-
-export const HIDDEN_BACKGROUND_LAYER_VISIBILITY =
-    buildBackgroundLayerVisibility(false);
+export const HIDDEN_BACKGROUND_LAYER_VISIBILITY: BackgroundLayerVisibility = {
+    "raster-base-layer": false,
+    "bg-country-borders-line": false,
+    "bg-province-borders-line": false,
+    "bg-district-borders-line": false,
+    "country-labels": false,
+    "rivers-line": false,
+};

src/uhm/lib/map/styles/shared/lineLabels.ts

@@ -1,4 +1,5 @@
 import maplibregl, { LayerSpecification } from "maplibre-gl";
+import { MAP_TEXT_FONT_STACK } from "./textFonts";
 
 const LINE_GEOMETRY_FILTER: maplibregl.ExpressionSpecification = [
     "any",
@@ -14,6 +15,7 @@ export function getLineLabelLayers(sourceId: string): LayerSpecification[] {
             source: sourceId,
             filter: ["all", LINE_GEOMETRY_FILTER, ["!=", ["coalesce", ["get", "line_label"], ""], ""]],
             layout: {
+                "text-font": [...MAP_TEXT_FONT_STACK],
                 "symbol-placement": "line",
                 "symbol-spacing": 280,
                 "text-field": ["coalesce", ["get", "line_label"], ""],

src/uhm/lib/map/styles/shared/pointStyle.ts

@@ -1,4 +1,5 @@
 import maplibregl, { LayerSpecification } from "maplibre-gl";
+import { MAP_EMPHASIS_TEXT_FONT_STACK } from "./textFonts";
 
 export const POINT_GEOTYPE_IDS = [
     "person_birthplace",
@@ -168,6 +169,7 @@ export function buildPointGeotypeLayers(
                 "icon-allow-overlap": true,
                 "icon-ignore-placement": true,
                 "symbol-placement": "point",
+                "text-font": [...MAP_EMPHASIS_TEXT_FONT_STACK],
                 "text-field": ["coalesce", ["get", "point_label"], ""],
                 "text-size": [
                     "interpolate",

src/uhm/lib/map/styles/shared/polygonLabels.ts

@@ -1,4 +1,5 @@
 import { LayerSpecification } from "maplibre-gl";
+import { MAP_TEXT_FONT_STACK } from "./textFonts";
 
 export function getPolygonLabelLayers(sourceId: string): LayerSpecification[] {
     return [
@@ -7,6 +8,7 @@ export function getPolygonLabelLayers(sourceId: string): LayerSpecification[] {
             type: "symbol",
             source: sourceId,
             layout: {
+                "text-font": [...MAP_TEXT_FONT_STACK],
                 "text-field": ["coalesce", ["get", "polygon_label"], ""],
                 "text-size": [
                     "interpolate",

src/uhm/lib/map/styles/shared/textFonts.ts

@@ -0,0 +1,3 @@
+export const MAP_TEXT_FONT_STACK = ["Roboto Regular"] as const;
+export const MAP_EMPHASIS_TEXT_FONT_STACK = ["Roboto Medium"] as const;
+export const GOONG_LABEL_FALLBACK_FONT_STACK = ["Roboto Regular"] as const;