map layer management

lib/backgroundLayers.ts

@@ -0,0 +1,27 @@
+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: "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>;
+
+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 =
+    buildBackgroundLayerVisibility(true);
+
+export const HIDDEN_BACKGROUND_LAYER_VISIBILITY =
+    buildBackgroundLayerVisibility(false);

lib/drawingEngine.ts

@@ -35,6 +35,7 @@ export function initDrawing(
             features: [
                 {
                     type: "Feature",
+                    properties: {},
                     geometry: {
                         type: "Polygon",
                         coordinates: [closed],
@@ -47,14 +48,17 @@ export function initDrawing(
     function onClick(e: maplibregl.MapLayerMouseEvent) {
         if (getMode() !== "draw") return;
 
-        coords.push([e.lngLat.lng, e.lngLat.lat]);
+        coords.push([e.lngLat.lng, e.lngLat.lat] as [number, number]);
         update(coords);
     }
 
     function onMove(e: maplibregl.MapLayerMouseEvent) {
         if (getMode() !== "draw" || coords.length === 0) return;
 
-        const preview = [...coords, [e.lngLat.lng, e.lngLat.lat]];
+        const preview: [number, number][] = [
+            ...coords,
+            [e.lngLat.lng, e.lngLat.lat] as [number, number],
+        ];
         update(preview);
     }
 
@@ -64,7 +68,7 @@ export function initDrawing(
     function finishDrawing() {
         if (getMode() !== "draw" || coords.length < 3) return;
 
-        const geometry = {
+        const geometry: Geometry = {
             type: "Polygon",
             coordinates: [closePolygon(coords)],
         };
@@ -73,7 +77,7 @@ export function initDrawing(
 
         coords = [];
 
-        map.getSource("draw-preview").setData({
+        (map.getSource("draw-preview") as maplibregl.GeoJSONSource | undefined)?.setData({
             type: "FeatureCollection",
             features: [],
         });

lib/pointEngine.ts

@@ -14,7 +14,7 @@ export function initPoint(
     function onClick(e: maplibregl.MapLayerMouseEvent) {
         if (getMode() !== "add-point") return;
 
-        const geometry = {
+        const geometry: Geometry = {
             type: "Point",
             coordinates: [e.lngLat.lng, e.lngLat.lat],
         };
@@ -23,8 +23,14 @@ export function initPoint(
     }
 
     function onMove() {
-        if (getMode() !== "add-point") return;
-        map.getCanvas().style.cursor = "crosshair";
+        const canvas = map.getCanvas();
+        if (getMode() === "add-point") {
+            canvas.style.cursor = "crosshair";
+            return;
+        }
+        if (canvas.style.cursor === "crosshair") {
+            canvas.style.cursor = "";
+        }
     }
 
     map.on("click", onClick);
@@ -33,5 +39,8 @@ export function initPoint(
     return () => {
         map.off("click", onClick);
         map.off("mousemove", onMove);
+        if (map.getCanvas().style.cursor === "crosshair") {
+            map.getCanvas().style.cursor = "";
+        }
     };
 }