commit work on map transition

webapp/frontend/src/assets/main.css

@@ -1,13 +1,50 @@
 @import "tailwindcss";
-@import "leaflet/dist/leaflet.css";
-@import "leaflet.markercluster/dist/MarkerCluster.css";
-@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
-@import "leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.css";
+@import "maplibre-gl/dist/maplibre-gl.css";
+@import 'maplibre-gl-basemaps/lib/basemaps.css';
+@import '@mapbox-controls/zoom/src/index.css';
+@import "mapbox-gl/dist/mapbox-gl.css";
+@import "mapbox-gl-controls/lib/controls.css";
+
+.layers-control {
+    line-height: 1.5;
+}
+
+.layer-group-name {
+    margin-bottom: .2em;
+    margin-left: 3px;
+    font-weight: 700;
+}
+
+.layer-group {
+    margin-bottom: .5em;
+}
+
+  .layers-control label {
+    font-size: 1.08333em;
+    display: block;
+  }
+
+  .layers-control radio {
+    margin-top: 2px;
+    position: relative;
+    top: 1px;
+  }
+
+  .layers-control-separator {
+    border-top: 1px solid #ddd;
+    height: 0;
+    margin: 5px -10px 5px -6px;
+  }
+
         /* used to prevent ui flicker before vuejs loads */
       [v-cloak] {
           display: none;
       }
 
+      .maplibregl-ctrl-basemaps:not(.closed) > .hidden {
+        display: unset !important;
+      }
+
       .icon-mqtt-connected {
           background-color: #16a34a;
           border-radius: 25px;