Refactoring: add current view button

Models/ThemeViewState.ts

@@ -2,15 +2,11 @@ import LayoutConfig from "./ThemeConfig/LayoutConfig"
 import {SpecialVisualizationState} from "../UI/SpecialVisualization"
 import {Changes} from "../Logic/Osm/Changes"
 import {ImmutableStore, Store, UIEventSource} from "../Logic/UIEventSource"
-import {
+import {FeatureSource, IndexedFeatureSource, WritableFeatureSource,} from "../Logic/FeatureSource/FeatureSource"
-    FeatureSource,
-    IndexedFeatureSource,
-    WritableFeatureSource,
-} from "../Logic/FeatureSource/FeatureSource"
 import {OsmConnection} from "../Logic/Osm/OsmConnection"
 import {ExportableMap, MapProperties} from "./MapProperties"
 import LayerState from "../Logic/State/LayerState"
-import { Feature, Point } from "geojson"
+import {Feature, Point, Polygon} from "geojson"
 import FullNodeDatabaseSource from "../Logic/FeatureSource/TiledFeatureSource/FullNodeDatabaseSource"
 import {Map as MlMap} from "maplibre-gl"
 import InitialMapPositioning from "../Logic/Actors/InitialMapPositioning"
@@ -80,6 +76,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
 
     readonly historicalUserLocations: WritableFeatureSource<Feature<Point>>
     readonly indexedFeatures: IndexedFeatureSource & LayoutSource
+    readonly currentView: FeatureSource<Feature<Polygon>>
     readonly featuresInView: FeatureSource
     readonly newFeatures: WritableFeatureSource
     readonly layerState: LayerState
@@ -169,6 +166,12 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 (id) => self.layerState.filteredLayers.get(id).isDisplayed
             )
             this.indexedFeatures = layoutSource
+            const empty = []
+            this.currentView = new StaticFeatureSource(
+                this.mapProperties.bounds.map((bbox) =>
+                    bbox === undefined ? empty : <Feature[]>[bbox.asGeoJson({ id: "current_view" })]
+                )
+            )
             this.featuresInView = new BBoxFeatureSource(layoutSource, this.mapProperties.bounds)
             this.dataIsLoading = layoutSource.isLoading
 
@@ -447,11 +450,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                     bbox === undefined ? empty : <Feature[]>[bbox.asGeoJson({ id: "range" })]
                 )
             ),
-            current_view: new StaticFeatureSource(
+            current_view: this.currentView
-                this.mapProperties.bounds.map((bbox) =>
-                    bbox === undefined ? empty : <Feature[]>[bbox.asGeoJson({ id: "current_view" })]
-                )
-            ),
         }
         if (this.layout?.lockLocation) {
             const bbox = new BBox(this.layout.lockLocation)

UI/ThemeViewGUI.svelte

@@ -35,6 +35,7 @@
     import SvelteUIElement from "./Base/SvelteUIElement";
     import OverlayToggle from "./BigComponents/OverlayToggle.svelte";
     import LevelSelector from "./BigComponents/LevelSelector.svelte";
+    import Svg from "../Svg";
 
     export let state: ThemeViewState;
     let layout = state.layout;
@@ -61,6 +62,7 @@
     let featureSwitches: FeatureSwitchState = state.featureSwitches;
     let availableLayers = state.availableLayers;
     let userdetails = state.osmConnection.userDetails;
+    let currentViewLayer = layout.layers.find(l => l.id === "current_view")
 </script>
 
 
@@ -88,6 +90,13 @@
         <MapControlButton on:click={() =>state.guistate.menuIsOpened.setData(true)}>
             <MenuIcon class="w-8 h-8 cursor-pointer"></MenuIcon>
         </MapControlButton>
+        {#if currentViewLayer?.tagRenderings}
+            <MapControlButton
+                    on:click={() => {selectedLayer.setData(currentViewLayer); selectedElement.setData(state.currentView.features?.data?.[0])}}>
+                <ToSvelte
+                        construct={() =>(currentViewLayer.defaultIcon() ??  Svg.checkbox_empty_svg()).SetClass("w-8 h-8 cursor-pointer")}/>
+            </MapControlButton>
+        {/if}
         <If condition={state.featureSwitchIsTesting}>
     <span class="alert">
       Testmode
@@ -108,10 +117,10 @@
         </div>
     </If>
     <MapControlButton on:click={() => mapproperties.zoom.update(z => z+1)}>
-    <img src="./assets/svg/plus.svg" class="w-8 h-8"/>
+        <img class="w-8 h-8" src="./assets/svg/plus.svg"/>
     </MapControlButton>
     <MapControlButton on:click={() => mapproperties.zoom.update(z => z-1)}>
-    <img src="./assets/svg/min.svg" class="w-8 h-8"/>
+        <img class="w-8 h-8" src="./assets/svg/min.svg"/>
     </MapControlButton>
     <If condition={featureSwitches.featureSwitchGeolocation}>
         <MapControlButton>
@@ -171,7 +180,8 @@
 
             <div class="flex flex-col" slot="content1">
                 {#each layout.layers as layer}
-          <Filterview zoomlevel={state.mapProperties.zoom} filteredLayer={state.layerState.filteredLayers.get(layer.id)}
+                    <Filterview zoomlevel={state.mapProperties.zoom}
+                                filteredLayer={state.layerState.filteredLayers.get(layer.id)}
                                 highlightedLayer={state.guistate.highlightedLayerInFilters}></Filterview>
                 {/each}
                 {#each layout.tileLayerSources as tilesource}

assets/layers/current_view/current_view.json

@@ -1,10 +1,11 @@
 {
   "id": "current_view",
-  "description": "A meta-layer which contains one single feature, namely the BBOX of the current map view. This can be used to trigger special actions. If a popup is defined for this layer, this popup will be accessible via an extra button on screen.\n\nThe icon on the button is the default icon of the layer, but can be customized by detecting 'button=yes'.",
+  "description": "A meta-layer which contains one single feature, namely the bounding box of the current map view. This can be used to trigger special actions. If a popup is defined for this layer, this popup will be accessible via an extra button on screen.\n\nThe icon on the button is the default icon of the layer, but can be customized by detecting 'button=yes'.",
   "source": "special",
   "shownByDefault": false,
   "title": "Current View",
   "tagRenderings": [],
+  "popupInFloatover": true,
   "mapRendering": [
     {
       "color": "#cccc0088"