feat(views/geo): add combobox to adjust style

apps/client/src/widgets/ribbon_widgets/book_properties.ts

@@ -203,6 +203,33 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
                     .append(" ".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;

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: [

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;
         }
     }