From 0e5b69f6cfcc4b47511bcf20b1851dbace65a263 Mon Sep 17 00:00:00 2001
From: pietervdvn <pietervdvn@posteo.net>
Date: Sun, 21 Feb 2021 03:51:29 +0100
Subject: [PATCH] Hide controls when needed

---
 InitUiElements.ts               |   5 +-
 UI/Base/ScrollableFullScreen.ts |   2 +-
 UI/BigComponents/Basemap.ts     |   2 +
 assets/svg/min.svg              | 272 +++++++++++++++++++++++++++++++
 assets/svg/osm-copyright.svg    | 111 +++++++++++++
 assets/svg/plus.svg             | 277 ++++++++++++++++++++++++++++++++
 index.css                       |  51 +-----
 index.html                      |   2 +-
 8 files changed, 671 insertions(+), 51 deletions(-)
 create mode 100644 assets/svg/min.svg
 create mode 100644 assets/svg/osm-copyright.svg
 create mode 100644 assets/svg/plus.svg

diff --git a/InitUiElements.ts b/InitUiElements.ts
index 4be6179..09dbea3 100644
--- a/InitUiElements.ts
+++ b/InitUiElements.ts
@@ -236,7 +236,8 @@ export class InitUiElements {
         });
 
         // ?-Button on Desktop, opens panel with close-X.
-        const help = Svg.help_svg().SetClass("open-welcome-button block");
+        const help = new MapControlButton(Svg.help_svg());
+         //   .SetClass("open-welcome-button block");
         const checkbox = new CheckBox(
             fullOptions
                 .SetClass("welcomeMessage")
@@ -295,7 +296,7 @@ export class InitUiElements {
             ).SetClass("p-0.5 md:hidden")
 
            new Combine([copyrightButton, checkbox])
-               .AttachTo("layer-selection");
+               .AttachTo("bottom-left");
 
 
             State.state.locationControl
diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts
index 9c31997..d1e8fc6 100644
--- a/UI/Base/ScrollableFullScreen.ts
+++ b/UI/Base/ScrollableFullScreen.ts
@@ -43,7 +43,7 @@ export default class ScrollableFullScreen extends UIElement {
                         .SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh"),
                     // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
                 ]).SetClass("flex flex-col h-full relative bg-white")
-            ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative");
+            ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative z-above-controls");
 
         this.dumbMode = false;
     }
diff --git a/UI/BigComponents/Basemap.ts b/UI/BigComponents/Basemap.ts
index 38e2f32..b9adb54 100644
--- a/UI/BigComponents/Basemap.ts
+++ b/UI/BigComponents/Basemap.ts
@@ -18,6 +18,8 @@ export class Basemap {
             center: [location.data.lat ?? 0, location.data.lon ?? 0],
             zoom: location.data.zoom ?? 2,
             layers: [currentLayer.data.layer],
+            zoomControl: false
+            
         });
 
         L.control.scale(
diff --git a/assets/svg/min.svg b/assets/svg/min.svg
new file mode 100644
index 0000000..e038aa2
--- /dev/null
+++ b/assets/svg/min.svg
@@ -0,0 +1,272 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="98"
+   height="98"
+   viewBox="0 0 98 98"
+   version="1.1"
+   id="svg132"
+   sodipodi:docname="min.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   style="fill:none">
+  <metadata
+     id="metadata136">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="999"
+     id="namedview134"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="5.5166017"
+     inkscape:cx="44.241615"
+     inkscape:cy="51.981151"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg132">
+    <sodipodi:guide
+       position="48.580633,-10.69499"
+       orientation="1,0"
+       id="guide959"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs130">
+    <filter
+       id="filter0_d"
+       x="58.84"
+       y="52.703999"
+       width="25.4126"
+       height="17.436001"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood52" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix54" />
+      <feOffset
+         dy="4"
+         id="feOffset56" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur58" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix60" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend62" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend64" />
+    </filter>
+    <filter
+       id="filter1_d"
+       x="14"
+       y="15"
+       width="38.000099"
+       height="38"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood67" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix69" />
+      <feOffset
+         dy="4"
+         id="feOffset71" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur73" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix75" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend77" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend79" />
+    </filter>
+    <filter
+       id="filter2_d"
+       x="39.5"
+       y="7"
+       width="53"
+       height="53"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood82" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix84" />
+      <feOffset
+         dy="4"
+         id="feOffset86" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur88" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix90" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend92" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend94" />
+    </filter>
+    <filter
+       id="filter3_d"
+       x="11"
+       y="54"
+       width="54.766701"
+       height="38.142899"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood97" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix99" />
+      <feOffset
+         dy="4"
+         id="feOffset101" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur103" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix105" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend107" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend109" />
+    </filter>
+    <filter
+       id="filter4_d"
+       x="41"
+       y="64"
+       width="28"
+       height="29"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood112" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix114" />
+      <feOffset
+         dy="4"
+         id="feOffset116" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur118" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix120" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend122" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend124" />
+    </filter>
+    <clipPath
+       id="clip0">
+      <rect
+         width="31.819799"
+         height="31.819799"
+         transform="rotate(-45,57.35965,-37.759145)"
+         id="rect127"
+         x="0"
+         y="0"
+         style="fill:#ffffff" />
+    </clipPath>
+  </defs>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:23.81633949;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 85.63011,49.228524 -73.131482,6e-6 v 0"
+     id="path815"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/assets/svg/osm-copyright.svg b/assets/svg/osm-copyright.svg
new file mode 100644
index 0000000..7dc7caf
--- /dev/null
+++ b/assets/svg/osm-copyright.svg
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="osm-logo"
+   height="100px"
+   width="100px"
+   version="1.1"
+   viewBox="0 0 66 64"
+   id="svg10"
+   sodipodi:docname="osm-copyright.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14">
+	
+	
+</defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="999"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="3.337544"
+     inkscape:cx="10.407816"
+     inkscape:cy="28.151759"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <g
+     transform="translate(-0.849, -61)"
+     fill="#7ebc6f"
+     id="g8"
+     style="fill:#050000;fill-opacity:1">
+    <path
+       d="M0.849,61 L6.414,75.609 L0.849,90.217 L6.414,104.826 L0.849,119.435 L4.266,120.739 L22.831,102.183 L26.162,102.696 L30.205,98.652 C27.819,95.888 26.033,92.59 25.057,88.948 L26.953,87.391 C26.627,85.879 26.449,84.313 26.449,82.704 C26.449,74.67 30.734,67.611 37.136,63.696 L30.066,61 L15.457,66.565 L0.849,61 z"
+       id="path2"
+       style="fill:#050000;fill-opacity:1" />
+    <path
+       style="stroke-width:1.5151515;fill:#050000;fill-opacity:1"
+       d="M 72.517578 6.9960938 C 72.056972 6.9960938 71.599077 7.0139441 71.144531 7.0351562 C 70.712713 7.0563684 70.281226 7.086044 69.855469 7.1269531 C 69.511529 7.1602865 69.167519 7.2006392 68.828125 7.2460938 C 68.470549 7.2930634 68.124953 7.3436908 67.773438 7.4042969 C 67.662831 7.4239938 67.55245 7.449053 67.443359 7.46875 C 67.222147 7.5111742 67.004853 7.556108 66.785156 7.6015625 C 66.610914 7.6394413 66.432055 7.6661222 66.257812 7.7070312 C 66.050237 7.7555161 65.846248 7.8122041 65.638672 7.8652344 C 65.294732 7.9546283 64.950722 8.0532197 64.611328 8.15625 C 64.355268 8.2320076 64.100687 8.3092448 63.847656 8.3925781 C 63.591596 8.4774266 63.335062 8.5638258 63.082031 8.65625 C 63.06991 8.6607955 63.056605 8.6653764 63.042969 8.6699219 C 52.985393 12.360831 45.717495 21.770537 45.152344 32.990234 C 45.128101 33.458416 45.111328 33.926148 45.111328 34.400391 C 45.111328 34.870088 45.125071 35.334754 45.152344 35.796875 C 45.152344 35.80142 45.150829 35.806001 45.152344 35.810547 C 45.172041 36.154486 45.200166 36.496982 45.230469 36.837891 C 46.38956 50.056072 56.859943 60.526456 70.078125 61.685547 C 70.419034 61.71585 70.761529 61.748958 71.105469 61.765625 L 71.119141 61.765625 C 71.581262 61.792898 72.045928 61.804688 72.515625 61.804688 C 79.985322 61.804688 86.737027 58.837275 91.671875 54.017578 C 91.943087 53.752427 92.217472 53.490601 92.476562 53.214844 C 92.522017 53.166359 92.563482 53.118797 92.607422 53.070312 C 92.622573 53.053646 92.632848 53.034245 92.646484 53.017578 C 92.852545 52.796366 93.056937 52.572976 93.253906 52.345703 C 93.334209 52.253279 93.411446 52.160784 93.490234 52.068359 C 93.552356 51.994117 93.61366 51.919508 93.675781 51.84375 C 93.896993 51.575568 94.108191 51.304616 94.320312 51.027344 C 94.590009 50.672798 94.859813 50.301776 95.111328 49.933594 C 95.617389 49.198745 96.088151 48.439145 96.521484 47.654297 C 96.685121 47.358842 96.830907 47.061281 96.982422 46.759766 C 97.032422 46.661281 97.09214 46.567235 97.140625 46.46875 C 97.167898 46.412689 97.191477 46.354451 97.21875 46.296875 C 97.386932 45.94536 97.552486 45.591075 97.707031 45.230469 C 97.726728 45.181984 97.752225 45.133984 97.773438 45.083984 C 97.926468 44.721863 98.069152 44.349728 98.207031 43.978516 C 98.225213 43.930031 98.241584 43.882469 98.259766 43.833984 C 98.397644 43.453681 98.533523 43.075379 98.65625 42.6875 C 98.668371 42.648106 98.683191 42.609706 98.695312 42.570312 C 98.81804 42.170312 98.931049 41.763482 99.037109 41.357422 C 99.044685 41.325604 99.056877 41.295928 99.064453 41.265625 C 99.170514 40.851989 99.26759 40.433369 99.355469 40.013672 C 99.360014 39.986399 99.362642 39.960866 99.367188 39.933594 C 99.3884 39.835109 99.400225 39.732375 99.419922 39.630859 C 99.488104 39.280859 99.550923 38.93267 99.605469 38.578125 C 99.672135 38.135701 99.729936 37.693063 99.775391 37.246094 L 99.775391 37.207031 C 99.820845 36.755516 99.858132 36.295028 99.880859 35.835938 L 99.880859 35.810547 C 99.905102 35.342365 99.921875 34.874633 99.921875 34.400391 C 99.921875 19.227663 87.68879 6.9960938 72.517578 6.9960938 z M 72.226562 13.107422 C 84.287434 13.107422 94.068359 22.522446 94.068359 34.140625 C 94.068359 45.757649 84.287434 55.177734 72.226562 55.177734 C 65.21042 55.177734 58.98861 51.98128 54.988281 47.033203 L 61.824219 42.951172 L 62.814453 42.357422 C 65.139193 44.826846 68.488975 46.384766 72.224609 46.384766 C 79.245546 46.384766 84.939453 40.902996 84.939453 34.140625 C 84.939453 27.377096 79.245546 21.898438 72.224609 21.898438 C 68.488975 21.898438 65.139193 23.454051 62.814453 25.925781 L 61.824219 25.330078 L 54.988281 21.25 C 58.986215 16.300767 65.211617 13.107422 72.226562 13.107422 z "
+       transform="matrix(0.66,0,0,0.66,0.849,60)"
+       id="path4" />
+    <path
+       d="M62.936,99.809 C59.074,103.028 54.115,104.965 48.71,104.965 C47.101,104.965 45.535,104.787 44.023,104.461 L42.466,106.357 C39.007,105.43 35.855,103.781 33.179,101.574 L28.996,105.765 L29.51,108.861 L13.953,124.426 L15.457,125 L30.066,119.435 L44.675,125 L59.283,119.435 L64.849,104.826 L62.936,99.809 z"
+       id="path6"
+       style="fill:#050000;fill-opacity:1" />
+  </g>
+  <flowRoot
+     xml:space="preserve"
+     id="flowRoot823"
+     style="fill:#050000;fill-opacity:1;stroke:none;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;letter-spacing:0px;word-spacing:0px;"><flowRegion
+       id="flowRegion825"
+       style="fill:#050000;fill-opacity:1;"><rect
+         id="rect827"
+         width="41.952568"
+         height="48.02853"
+         x="52.118645"
+         y="12.288136"
+         style="fill:#050000;fill-opacity:1;" /></flowRegion><flowPara
+       id="flowPara829"></flowPara></flowRoot>  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:26.39999962px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#050000;fill-opacity:1;stroke:none;stroke-width:0.66000003;"
+     x="-53.974579"
+     y="84.296608"
+     id="text833"><tspan
+       sodipodi:role="line"
+       id="tspan831"
+       x="-53.974579"
+       y="108.31731"
+       style="stroke-width:0.66000003;fill:#050000;fill-opacity:1;"></tspan><tspan
+       sodipodi:role="line"
+       x="-53.974579"
+       y="141.31731"
+       style="stroke-width:0.66000003;fill:#050000;fill-opacity:1;"
+       id="tspan835">	</tspan><tspan
+       sodipodi:role="line"
+       x="-53.974579"
+       y="174.31731"
+       style="stroke-width:0.66000003;fill:#050000;fill-opacity:1;"
+       id="tspan837">	</tspan><tspan
+       sodipodi:role="line"
+       x="-53.974579"
+       y="207.31731"
+       style="stroke-width:0.66000003;fill:#050000;fill-opacity:1;"
+       id="tspan839" /></text>
+</svg>
diff --git a/assets/svg/plus.svg b/assets/svg/plus.svg
new file mode 100644
index 0000000..ff5024b
--- /dev/null
+++ b/assets/svg/plus.svg
@@ -0,0 +1,277 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="98"
+   height="98"
+   viewBox="0 0 98 98"
+   version="1.1"
+   id="svg132"
+   sodipodi:docname="plus.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   style="fill:none">
+  <metadata
+     id="metadata136">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="999"
+     id="namedview134"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="5.5166017"
+     inkscape:cx="44.241615"
+     inkscape:cy="51.981151"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg132">
+    <sodipodi:guide
+       position="48.580633,-10.69499"
+       orientation="1,0"
+       id="guide959"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs130">
+    <filter
+       id="filter0_d"
+       x="58.84"
+       y="52.703999"
+       width="25.4126"
+       height="17.436001"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood52" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix54" />
+      <feOffset
+         dy="4"
+         id="feOffset56" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur58" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix60" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend62" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend64" />
+    </filter>
+    <filter
+       id="filter1_d"
+       x="14"
+       y="15"
+       width="38.000099"
+       height="38"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood67" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix69" />
+      <feOffset
+         dy="4"
+         id="feOffset71" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur73" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix75" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend77" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend79" />
+    </filter>
+    <filter
+       id="filter2_d"
+       x="39.5"
+       y="7"
+       width="53"
+       height="53"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood82" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix84" />
+      <feOffset
+         dy="4"
+         id="feOffset86" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur88" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix90" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend92" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend94" />
+    </filter>
+    <filter
+       id="filter3_d"
+       x="11"
+       y="54"
+       width="54.766701"
+       height="38.142899"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood97" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix99" />
+      <feOffset
+         dy="4"
+         id="feOffset101" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur103" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix105" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend107" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend109" />
+    </filter>
+    <filter
+       id="filter4_d"
+       x="41"
+       y="64"
+       width="28"
+       height="29"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood112" />
+      <feColorMatrix
+         in="SourceAlpha"
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+         id="feColorMatrix114" />
+      <feOffset
+         dy="4"
+         id="feOffset116" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur118" />
+      <feColorMatrix
+         type="matrix"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+         id="feColorMatrix120" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend122" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend124" />
+    </filter>
+    <clipPath
+       id="clip0">
+      <rect
+         width="31.819799"
+         height="31.819799"
+         transform="rotate(-45,57.35965,-37.759145)"
+         id="rect127"
+         x="0"
+         y="0"
+         style="fill:#ffffff" />
+    </clipPath>
+  </defs>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:23.81633949;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 85.267568,49.047253 -73.131482,6e-6 v 0"
+     id="path815"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:23.81633949;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 48.580653,12.250061 -1.5e-5,73.131491 v 0"
+     id="path815-3"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/index.css b/index.css
index a7ff5fc..ba86a51 100644
--- a/index.css
+++ b/index.css
@@ -16,6 +16,10 @@
             z-index: 10000
         }
 
+        .z-above-controls{
+            z-index: 10001
+        }
+
     }
 
   .btn {
@@ -347,38 +351,6 @@ a {
     color: var(--foreground-color);
 }
 
-.close-welcome-button {
-    position: absolute;
-    display: inline-block;
-    height: 100%;
-    background-color: var(--subtle-detail-color);
-    color: var(--subtle-detail-color-contrast);
-    box-sizing: border-box;
-    width: 4em;
-    padding: 1em;
-    border-top-left-radius: 1em;
-    border-bottom-left-radius: 1em;
-}
-
-.close-welcome-button svg {
-    width: 2em;
-    height: 2em;
-}
-
-.open-welcome-button {
-    box-sizing: border-box;
-    background: var(--subtle-detail-color);
-    color: var(--foreground-color);
-
-    height: 3.5em;
-    width: 3.5em;
-    padding: 0.75em;
-}
-
-.open-welcome-button svg {
-    width: 2em;
-    height: 2em;
-}
 
 #messagesbox {
     /*Only shown on big screens*/
@@ -438,21 +410,6 @@ a {
 }
 
 
-.iframe-escape {
-    background-color: var(--background-color);
-    color: var(--foreground-color);
-
-    border-radius: 2em;
-    display: block;
-    width: min-content;
-}
-
-.iframe-escape img {
-    padding: 1em;
-    width: 2em;
-    height: 2em;
-}
-
 /** Switch layout **/
 .small-image img {
     height: 1em;
diff --git a/index.html b/index.html
index 0b87fa4..5b343fa 100644
--- a/index.html
+++ b/index.html
@@ -55,7 +55,7 @@
     <div id="messagesbox" class="rounded-3xl overflow-hidden ml-3"></div>
 </div>
 
-<div id="layer-selection" class="absolute bottom-3 left-3 rounded-3xl clutter z-above-map"></div>
+<div id="bottom-left" class="absolute bottom-3 left-3 rounded-3xl clutter z-above-map"></div>
 <div id="bottom-right" class="absolute bottom-3 right-2 rounded-3xl clutter z-above-map"></div>
 
 <div id="centermessage" class="clutter absolute rounded-3xl h-24 left-24 right-24 top-56 bg-white p-3 pt-5 sm:pt-8 text-xl font-bold text-center">