From f90bf1ce7c667d9e6ef640ed01fc0f28b8825b32 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 24 Jul 2025 15:14:43 +0300
Subject: [PATCH] feat(views/geo): add combobox to adjust style

---
 .../widgets/ribbon_widgets/book_properties.ts | 27 +++++++++++++++++++
 .../ribbon_widgets/book_properties_config.ts  | 21 +++++++++++++--
 .../widgets/view_widgets/geo_view/index.ts    |  4 +--
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties.ts b/apps/client/src/widgets/ribbon_widgets/book_properties.ts
index bcb39e6ca..c93267715 100644
--- a/apps/client/src/widgets/ribbon_widgets/book_properties.ts
+++ b/apps/client/src/widgets/ribbon_widgets/book_properties.ts
@@ -203,6 +203,33 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
                     .append("&nbsp;".repeat(2))
                     .append($numberInput));
                 break;
+            case "combobox":
+                const $select = $("<select>", {
+                    class: "form-select form-select-sm"
+                });
+                for (const option of property.options) {
+                    const $option = $("<option>", {
+                        value: option.value,
+                        text: option.label
+                    });
+                    if (note.getLabelValue(property.bindToLabel) === option.value) {
+                        $option.prop("selected", true);
+                    }
+                    $select.append($option);
+                }
+                $select.on("change", () => {
+                    const value = $select.val();
+                    if (value === null || value === "") {
+                        attributes.removeOwnedLabelByName(note, property.bindToLabel);
+                    } else {
+                        attributes.setLabel(note.noteId, property.bindToLabel, String(value));
+                    }
+                });
+                $container.append($("<label>")
+                    .text(property.label)
+                    .append("&nbsp;".repeat(2))
+                    .append($select));
+                break;
         }
 
         return $container;
diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts b/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
index 87c2b884d..ec09ab2dc 100644
--- a/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
+++ b/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
@@ -30,7 +30,14 @@ interface NumberProperty {
     min?: number;
 }
 
-export type BookProperty = CheckBoxProperty | ButtonProperty | NumberProperty;
+interface ComboBoxProperty {
+    type: "combobox",
+    label: string;
+    bindToLabel: string;
+    options: { value: string; label: string }[];
+}
+
+export type BookProperty = CheckBoxProperty | ButtonProperty | NumberProperty | ComboBoxProperty;
 
 interface BookContext {
     note: FNote;
@@ -90,7 +97,17 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
         ]
     },
     geoMap: {
-        properties: []
+        properties: [
+            {
+                label: "Map style:",
+                type: "combobox",
+                bindToLabel: "mapStyle",
+                options: [
+                    { value: "openstreetmap", label: "OpenStreetMap" },
+                    { value: "versatiles-colorful", label: "Versatiles Colorful (vector)" }
+                ]
+            }
+        ]
     },
     table: {
         properties: [
diff --git a/apps/client/src/widgets/view_widgets/geo_view/index.ts b/apps/client/src/widgets/view_widgets/geo_view/index.ts
index c1a71e7a7..5987e96e7 100644
--- a/apps/client/src/widgets/view_widgets/geo_view/index.ts
+++ b/apps/client/src/widgets/view_widgets/geo_view/index.ts
@@ -141,7 +141,7 @@ export default class GeoView extends ViewMode<MapData> {
             worldCopyJump: true
         });
 
-        const layerName = this.parentNote.getLabelValue("mapLayer") ?? "openstreetmap";
+        const layerName = this.parentNote.getLabelValue("mapStyle") ?? "openstreetmap";
         const layer = (await getMapLayer(layerName));
         layer.addTo(map);
 
@@ -268,7 +268,7 @@ export default class GeoView extends ViewMode<MapData> {
         }
 
         // Full reload if map layer is changed.
-        if (loadResults.getAttributeRows().some(attr => attr.name === "mapLayer" && attributes.isAffecting(attr, this.parentNote))) {
+        if (loadResults.getAttributeRows().some(attr => attr.name === "mapStyle" && attributes.isAffecting(attr, this.parentNote))) {
             return true;
         }
     }