Finetuning of various features

InitUiElements.ts

@@ -43,7 +43,6 @@ import LayerConfig from "./Customizations/JSON/LayerConfig";
 import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
 import {TagsFilter} from "./Logic/Tags/TagsFilter";
 import FilterView from "./UI/BigComponents/FilterView";
-import ExportPDF from "./Logic/Actors/ExportPDF";
 
 export class InitUiElements {
     static InitAll(
@@ -59,7 +58,8 @@ export class InitUiElements {
                 `Error: incorrect layout <i>${layoutName}</i><br/><a href='https://${window.location.host}/'>Go back</a>`
             )
                 .AttachTo("centermessage")
-        .onClick(() => {});
+                .onClick(() => {
+                });
             throw "Incorrect layout";
         }
 
@@ -222,9 +222,7 @@ export class InitUiElements {
         });
 
         new Combine(
-      [plus, min, geolocationButton].map((el) =>
-        el.SetClass("m-0.5 md:m-1")
-      )
+            [plus, min, geolocationButton]
         )
             .SetClass("flex flex-col")
             .AttachTo("bottom-right");
@@ -372,10 +370,18 @@ export class InitUiElements {
         );
 
 
-    const filterView = new FilterView(State.state.filteredLayers).SetClass(
+        const filterView = 
+            new ScrollableFullScreen(
+                () => Translations.t.general.layerSelection.title.Clone(),
+                () => 
+                    new FilterView(State.state.filteredLayers).SetClass(
                         "block p-1 rounded-full"
+                    ),
+                "filter",
+                State.state.filterIsOpened
             );
             
+
         const filterMapControlButton = new MapControlButton(
             new CenterFlexedElement(
                 Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem")
@@ -385,18 +391,18 @@ export class InitUiElements {
         const filterButton = new Toggle(
             filterView,
             filterMapControlButton,
-      State.state.FilterIsOpened
+            State.state.filterIsOpened
         ).ToggleOnClick();
 
         const filterControl = new Toggle(
             filterButton,
-      "",
+            undefined,
             State.state.featureSwitchFilter
         );
 
-    new Combine([copyrightButton, layerControl, filterControl]).AttachTo(
-      "bottom-left"
-    );
+        new Combine([copyrightButton, layerControl, filterControl])
+            .SetClass("flex flex-col")
+            .AttachTo("bottom-left");
 
         State.state.locationControl.addCallback(() => {
             // Close the layer selection when the map is moved

State.ts

@@ -137,11 +137,11 @@ export default class State {
             (b) => "" + b
         );
 
-    public FilterIsOpened: UIEventSource<boolean> =
+    public filterIsOpened: UIEventSource<boolean> =
         QueryParameters.GetQueryParameter(
             "filter-toggle",
             "false",
-            "Whether or not the filter is shown"
+            "Whether or not the filter view is shown"
         ).map<boolean>(
             (str) => str !== "false",
             [],

UI/BigComponents/LayerControlPanel.ts

@@ -6,7 +6,6 @@ import Translations from "../i18n/Translations";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import BaseUIElement from "../BaseUIElement";
 import Toggle from "../Input/Toggle";
-import FilterView from "./FilterView";
 import {DownloadPanel} from "./DownloadPanel";
 
 export default class LayerControlPanel extends ScrollableFullScreen {
@@ -31,15 +30,6 @@ export default class LayerControlPanel extends ScrollableFullScreen {
             });
             elements.push(backgroundSelector)
         }
-        elements.push(
-            new Toggle(
-                new FilterView(State.state.filteredLayers),
-                undefined,
-                State.state.filteredLayers.map(
-                    (layers) => layers.length > 1 || layers[0].layerDef.filters.length > 0
-                )
-            )
-        );
 
         elements.push(new Toggle(
             new DownloadPanel(),

UI/MapControlButton.ts

@@ -8,7 +8,7 @@ export default class MapControlButton extends Combine {
   constructor(contents: BaseUIElement) {
     super([contents]);
     this.SetClass(
-      "relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background"
+      "relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background m-0.5 md:m-1"
     );
     this.SetStyle("box-shadow: 0 0 10px var(--shadow-color);");
   }