start creating filter

InitUiElements.ts

@@ -41,6 +41,7 @@ import FeatureSource from "./Logic/FeatureSource/FeatureSource";
 import AllKnownLayers from "./Customizations/AllKnownLayers";
 import LayerConfig from "./Customizations/JSON/LayerConfig";
 import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
+import FilterView from "./UI/BigComponents/FilterView";
 
 export class InitUiElements {
   static InitAll(
@@ -205,7 +206,7 @@ export class InitUiElements {
         Img.AsImageElement(Svg.plus_zoom, "", "width:1.25rem;height:1.25rem")
       )
     ).onClick(() => {
-      State.state.locationControl.data.zoom++;  
+      State.state.locationControl.data.zoom++;
       State.state.locationControl.ping();
     });
 
@@ -353,6 +354,7 @@ export class InitUiElements {
     const layerControlPanel = new LayerControlPanel(
       State.state.layerControlIsOpened
     ).SetClass("block p-1 rounded-full");
+
     const layerControlButton = new Toggle(
       layerControlPanel,
       new MapControlButton(Svg.layers_svg()),
@@ -365,7 +367,31 @@ export class InitUiElements {
       State.state.featureSwitchLayers
     );
 
-    new Combine([copyrightButton, layerControl]).AttachTo("bottom-left");
+    const filterView = new FilterView(State.state.FilterIsOpened).SetClass(
+      "block p-1 rounded-full"
+    );
+
+    const filterMapControlButton = new MapControlButton(
+      new CenterFlexedElement(
+        Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem")
+      )
+    );
+
+    const filterButton = new Toggle(
+      filterView,
+      filterMapControlButton,
+      State.state.FilterIsOpened
+    ).ToggleOnClick();
+
+    const filterControl = new Toggle(
+      filterButton,
+      "",
+      State.state.featureSwitchFilter
+    );
+
+    new Combine([copyrightButton, layerControl, filterControl]).AttachTo(
+      "bottom-left"
+    );
 
     State.state.locationControl.addCallback(() => {
       // Close the layer selection when the map is moved