Update of the 'addNewMarker': show icons, show plus button, show label

2021-08-22 18:48:38 +02:00 · 2021-08-22 18:48:38 +02:00 · 3c73dfd6b2
commit 3c73dfd6b2
parent a2955eaf91
12 changed files with 416 additions and 121 deletions
--- a/Logic/Actors/StrayClickHandler.ts
+++ b/Logic/Actors/StrayClickHandler.ts
@ -3,6 +3,8 @@ import Svg from "../../Svg";
 import {UIEventSource} from "../UIEventSource";
 import Img from "../../UI/Base/Img";
 import ScrollableFullScreen from "../../UI/Base/ScrollableFullScreen";
+import AddNewMarker from "../../UI/BigComponents/AddNewMarker";
+import FilteredLayer from "../../Models/FilteredLayer";

 /**
 * The stray-click-hanlders adds a marker to the map if no feature was clicked.
@ -14,7 +16,7 @@ export default class StrayClickHandler {
    constructor(
        lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
        selectedElement: UIEventSource<string>,
-        filteredLayers: UIEventSource<{ readonly isDisplayed: UIEventSource<boolean> }[]>,
+        filteredLayers: UIEventSource<FilteredLayer[]>,
        leafletMap: UIEventSource<L.Map>,
        uiToShow: ScrollableFullScreen) {
        const self = this;
@ -40,12 +42,12 @@ export default class StrayClickHandler {

            selectedElement.setData(undefined);
            self._lastMarker = L.marker([lastClick.lat, lastClick.lon], {
-                icon: L.icon({
-                    iconUrl: Img.AsData(Svg.add),
+                icon: L.divIcon({
+                    html: new AddNewMarker(filteredLayers).ConstructElement(),
                    iconSize: [50, 50],
                    iconAnchor: [25, 50],
                    popupAnchor: [0, -45]
-                })
+                })                  
            });
            const popup = L.popup({
                autoPan: true,
--- a/Models/Constants.ts
+++ b/Models/Constants.ts
@ -2,7 +2,7 @@ import { Utils } from "../Utils";

 export default class Constants {
    
-    public static vNumber = "0.9.0";
+    public static vNumber = "0.9.1";

    // The user journey states thresholds when a new feature gets unlocked
    public static userJourney = {
--- a/UI/BigComponents/AddNewMarker.ts
+++ b/UI/BigComponents/AddNewMarker.ts
@ -0,0 +1,54 @@
+import {UIEventSource} from "../../Logic/UIEventSource";
+import Combine from "../Base/Combine";
+import Translations from "../i18n/Translations";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import FilteredLayer from "../../Models/FilteredLayer";
+import {TagUtils} from "../../Logic/Tags/TagUtils";
+import Svg from "../../Svg";
+
+export default class AddNewMarker extends Combine {
+
+    constructor(filteredLayers: UIEventSource<FilteredLayer[]>) {
+        const icons = new VariableUiElement(filteredLayers.map(filteredLayers => {
+            const icons = []
+            let last = undefined;
+            for (const filteredLayer of filteredLayers) {
+                const layer = filteredLayer.layerDef;
+                for (const preset of filteredLayer.layerDef.presets) {
+                    const tags = TagUtils.KVtoProperties(preset.tags)
+                    const icon = layer.GenerateLeafletStyle(new UIEventSource<any>(tags), false).icon.html
+                        .SetClass("block relative")
+                        .SetStyle("width: 42px; height: 42px;");
+                    icons.push(icon)
+                    if (last === undefined) {
+                        last = layer.GenerateLeafletStyle(new UIEventSource<any>(tags), false).icon.html
+                            .SetClass("block relative")
+                            .SetStyle("width: 42px; height: 42px;");
+                    }
+                }
+            }
+            if(icons.length === 1){
+                return icons[0]
+            }
+            icons.push(last)
+            const elem = new Combine(icons).SetClass("flex")
+            elem.SetClass("slide min-w-min").SetStyle("animation: slide " + icons.length + "s linear infinite;")
+            return elem;
+        }))
+        const label = Translations.t.general.add.addNewMapLabel.Clone()
+            .SetClass("block center absolute text-sm min-w-min pl-1 pr-1 bg-gray-400 rounded-3xl text-white opacity-65 whitespace-nowrap")
+            .SetStyle("top: 65px; transform: translateX(-50%)")
+        super([
+            new Combine([
+                Svg.add_pin_svg().SetClass("absolute").SetStyle("width: 50px; filter: drop-shadow(grey 0 0 10px"),
+                new Combine([icons])
+                    .SetStyle("width: 50px")
+                    .SetClass("absolute p-1 rounded-full overflow-hidden"),
+                Svg.addSmall_svg().SetClass("absolute animate-pulse").SetStyle("width: 30px; left: 30px; top: 35px;")
+            ]).SetClass("absolute"),
+           new Combine([label]).SetStyle("position: absolute; left: 50%")
+        ])
+            this.SetClass("block relative");
+    }
+
+}
--- a/UI/BigComponents/SimpleAddUI.ts
+++ b/UI/BigComponents/SimpleAddUI.ts
@ -204,7 +204,7 @@ export default class SimpleAddUI extends Toggle {
        ).onClick(cancel)

        return new Combine([
-            Translations.t.general.add.confirmIntro.Subs({title: preset.name}),
+           // Translations.t.general.add.confirmIntro.Subs({title: preset.name}),
            State.state.osmConnection.userDetails.data.dryRun ?
                Translations.t.general.testing.Clone().SetClass("alert") : undefined,
            openLayerOrConfirm,
--- a/assets/layers/bike_repair_station/bike_repair_station.json
+++ b/assets/layers/bike_repair_station/bike_repair_station.json
@ -226,7 +226,6 @@
        }
      ]
    },
-    
    {
      "question": {
        "en": "What is the email address of the maintainer?",
@ -249,7 +248,6 @@
      },
      "render": "<a href='tel:{phone}'>{phone}</a>"
    },
-    
    {
      "question": {
        "nl": "Wanneer is dit fietsherstelpunt open?",
@ -410,10 +408,13 @@
    {
      "#": "Email maintainer",
      "condition": {
-        "and": ["email~*", "service:bicycle:pump:operational_status=broken"]
+        "and": [
+          "email~*",
+          "service:bicycle:pump:operational_status=broken"
+        ]
      },
      "render": {
-        "en": "<a href='mailto:{email}?subject=Broken bicycle pump&body=Hello,%0D%0A%0D%0AWith this email, I&#39;d like to inform you that the bicycle pump located at https://mapcomplete.osm.be/cyclofix#{id} is broken.'>Report this bicycle pump as broken</a>",
+        "en": "<a href='mailto:{email}?subject=Broken bicycle pump&body=Hello,\n\nWith this email, I'd like to inform you that the bicycle pump located at https://mapcomplete.osm.be/cyclofix?lat={_lat}&lon={_lon}&z=18#{id} is broken.'>Report this bicycle pump as broken</a>",
        "nl": "<a href='mailto:{email}?subject=Kapotte fietspomp&body=Geachte,%0D%0A%0D%0AGraag had ik u gemeld dat een fietspomp defect is. De fietspomp bevindt zich hier: https://mapcomplete.osm.be/cyclofix#{id}.'>Rapporteer deze fietspomp als kapot</a>"
      }
    },
--- a/assets/svg/addSmall.svg
+++ b/assets/svg/addSmall.svg
@ -13,7 +13,7 @@
   version="1.1"
   id="svg132"
   sodipodi:docname="addSmall.svg"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
   style="fill:none">
  <metadata
     id="metadata136">
@ -23,7 +23,7 @@
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
@ -37,16 +37,16 @@
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
-     inkscape:window-height="1001"
+     inkscape:window-height="1003"
     id="namedview134"
     showgrid="false"
     showguides="true"
     inkscape:guide-bbox="true"
     inkscape:zoom="5.5166017"
-     inkscape:cx="9.5832222"
+     inkscape:cx="-5.2810012"
     inkscape:cy="51.981151"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-x="1024"
+     inkscape:window-y="1080"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg132">
    <sodipodi:guide
@ -60,7 +60,7 @@
     cy="49.02142"
     r="49"
     id="circle4"
-     style="fill:#70c549" />
+     style="fill:#37d649;fill-opacity:1;stroke:#606060;stroke-opacity:1" />
  <defs
     id="defs130">
    <filter
@ -275,14 +275,9 @@
     id="layer1"
     inkscape:label="Layer 1">
    <path
-       inkscape:connector-curvature="0"
-       id="path815"
-       d="M 22.100902,291.35894 5.785709,275.04375 v 0"
-       style="fill:none;stroke:#ffffff;stroke-width:7.51411438;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path815-3"
-       d="M 22.125504,274.96508 5.8103071,291.28027 v 0"
-       style="fill:none;stroke:#ffffff;stroke-width:7.51411438;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999998;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 48.451172 13.953125 A 8.3145427 8.3145427 0 0 0 42.529297 16.5625 A 8.3145427 8.3145427 0 0 0 40.267578 22.380859 L 40.267578 39.757812 L 23.134766 39.757812 A 8.3145427 8.3145427 0 0 0 17.134766 42.193359 A 8.3145427 8.3145427 0 0 0 23.138672 56.386719 L 40.267578 56.386719 L 40.267578 73.435547 A 8.3145427 8.3145427 0 1 0 56.894531 73.439453 L 56.894531 56.386719 L 74.191406 56.386719 A 8.3145427 8.3145427 0 1 0 74.195312 39.757812 L 56.892578 39.757812 L 56.892578 22.380859 A 8.3145427 8.3145427 0 0 0 48.451172 13.953125 z "
+       transform="matrix(0.3195493,0.3195493,-0.3195493,0.3195493,13.753427,252.28933)"
+       id="path815" />
  </g>
 </svg>
--- a/assets/svg/add_pin.svg
+++ b/assets/svg/add_pin.svg
@ -0,0 +1,270 @@
+<?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="121"
+   viewBox="0 0 98 121"
+   fill="none"
+   version="1.1"
+   id="svg132"
+   sodipodi:docname="add_pin.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <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" />
+      </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="1003"
+     id="namedview134"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="5.5166017"
+     inkscape:cx="-2.1344259"
+     inkscape:cy="67.640966"
+     inkscape:window-x="1024"
+     inkscape:window-y="1080"
+     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>
+  <path
+     style="fill:#70c549"
+     d="M 49,0 C 21.938047,0 0,21.938047 0,49 c 0.02348371,16.851276 8.7043271,32.508219 22.984375,41.455078 4.110658,2.633337 9.028373,8.324463 13.179687,13.515622 4.485102,5.60856 6.977885,17.12361 12.416016,17.21094 5.438131,-0.0873 7.932867,-11.60238 12.417969,-17.21094 3.591801,-4.491491 7.407182,-9.366614 11.611328,-12.093747 C 88.250957,83.276304 97.97807,66.850204 98,49 98,21.938047 76.061953,0 49,0 Z"
+     id="circle4"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="sccscsccs" />
+  <defs
+     id="defs130">
+    <filter
+       id="filter0_d"
+       x="58.84"
+       y="52.704"
+       width="25.4126"
+       height="17.436"
+       filterUnits="userSpaceOnUse"
+       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.0001"
+       height="38"
+       filterUnits="userSpaceOnUse"
+       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"
+       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.7667"
+       height="38.1429"
+       filterUnits="userSpaceOnUse"
+       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"
+       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.8198"
+         height="31.8198"
+         fill="white"
+         transform="translate(43.5 29.5) rotate(-45)"
+         id="rect127" />
+    </clipPath>
+  </defs>
+</svg>
--- a/index.css
+++ b/index.css
@ -11,39 +11,39 @@
        .max-h-20vh {
            max-height: 20vh;
        }
-        
-        .z-above-map{
+
+        .z-above-map {
            z-index: 10000
        }

-        .z-above-controls{
+        .z-above-controls {
            z-index: 10001
        }
-        
+
    }

-  .btn {
-      @apply inline-flex justify-center;
-      @apply py-2 px-4;
-      @apply border border-transparent shadow-sm;
-      @apply shadow-sm rounded-3xl;
-      @apply ring-2 ring-blue-200 hover:ring-blue-300;
-      @apply mt-1 mr-1;
-      @apply text-sm font-medium text-white;
-      @apply bg-blue-600 hover:bg-blue-700;
-      @apply focus:outline-none focus:ring-blue-700;
-  }
+    .btn {
+        @apply inline-flex justify-center;
+        @apply py-2 px-4;
+        @apply border border-transparent shadow-sm;
+        @apply shadow-sm rounded-3xl;
+        @apply ring-2 ring-blue-200 hover:ring-blue-300;
+        @apply mt-1 mr-1;
+        @apply text-sm font-medium text-white;
+        @apply bg-blue-600 hover:bg-blue-700;
+        @apply focus:outline-none focus:ring-blue-700;
+    }

-  .btn-secondary {
-      @apply bg-gray-600 hover:bg-gray-700;
-  }
+    .btn-secondary {
+        @apply bg-gray-600 hover:bg-gray-700;
+    }

-  .btn-disabled {
-      @apply bg-gray-500 hover:bg-gray-500;
-      @apply text-gray-300;
-      @apply ring-gray-200 hover:ring-gray-200 focus:ring-gray-200;
-      @apply cursor-default;
-  }
+    .btn-disabled {
+        @apply bg-gray-500 hover:bg-gray-500;
+        @apply text-gray-300;
+        @apply ring-gray-200 hover:ring-gray-200 focus:ring-gray-200;
+        @apply cursor-default;
+    }
 }


@ -61,7 +61,7 @@
    --shadow-color: #00000066;
    --variable-title-height: 0px; /* Set by javascript */
    --return-to-the-map-height: 2em;
-    
+
    --image-carousel-height: 350px;
 }

@ -75,6 +75,7 @@ html, body {
    color: var(--foreground-color);
    font-family: 'Helvetica Neue', Arial, sans-serif;
 }
+
 .leaflet-overlay-pane .leaflet-zoom-animated {
    /* Another workaround to keep leaflet working */
    width: initial !important;
@ -93,7 +94,7 @@ svg, img {
    display: unset;
 }

-.mapcontrol svg path{
+.mapcontrol svg path {
    fill: var(--subtle-detail-color-contrast) !important;
 }

@ -125,12 +126,12 @@ btn {
    width: 4rem !important;
 }

-.space-between{
+.space-between {
    justify-content: space-between;
 }

 .link-underline a {
-    text-decoration: underline 1px #0078a855;; 
+    text-decoration: underline 1px #0078a855;;
    color: #0078A8;
 }

@ -182,7 +183,9 @@ li::marker {
    color: var(--subtle-detail-color-light-contrast);
 }

-.border-attention-catch{ border: 5px solid var(--catch-detail-color);}
+.border-attention-catch {
+    border: 5px solid var(--catch-detail-color);
+}

 .direction-svg svg path {
    fill: var(--catch-detail-color) !important;
@ -299,6 +302,15 @@ li::marker {
 }


+@keyframes slide {
+    from {
+        transform: translateX(0%);
+    }
+
+    to {
+        transform: translateX(calc(-100% + 42px));
+    }
+}

 /**************************************/

@ -380,7 +392,7 @@ li::marker {
 }


-.slideshow-item img{
+.slideshow-item img {
    height: var(--image-carousel-height);
    width: unset;
 }
--- a/langs/en.json
+++ b/langs/en.json
@ -86,6 +86,7 @@
    "number": "number",
    "osmLinkTooltip": "See this object on OpenStreetMap for history and more editing options",
    "add": {
+      "addNewMapLabel": "Add new item",
      "addNew": "Add a new {category} here",
      "presetInfo": "The new POI will have {tags}",
      "warnVisibleForEveryone": "Your addition will be visible for everyone",
--- a/langs/layers/nl.json
+++ b/langs/layers/nl.json
@ -575,6 +575,9 @@
                    }
                }
            },
+            "9": {
+                "render": "<a href='mailto:{email}?subject=Kapotte fietspomp&body=Geachte,%0D%0A%0D%0AGraag had ik u gemeld dat een fietspomp defect is. De fietspomp bevindt zich hier: https://mapcomplete.osm.be/cyclofix#{id}.'>Rapporteer deze fietspomp als kapot</a>"
+            },
            "10": {
                "question": "Welke ventielen werken er met de pomp?",
                "render": "Deze pomp werkt met de volgende ventielen: {valves}",
--- a/langs/nl.json
+++ b/langs/nl.json
@ -46,6 +46,7 @@
        "number": "getal",
        "osmLinkTooltip": "Bekijk dit object op OpenStreetMap waar geschiedenis en meer aanpasopties zijn",
        "add": {
+            "addNewMapLabel": "Voeg item toe",
            "addNew": "Voeg hier een {category} toe",
            "title": "Nieuw punt toevoegen?",
            "intro": "Je klikte ergens waar er nog geen data is. Kies hieronder welk punt je wilt toevoegen<br/>",
--- a/test.ts
+++ b/test.ts
@ -1,73 +1,29 @@
 import {UIEventSource} from "./Logic/UIEventSource";
-import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
-import State from "./State";
-import LocationInput from "./UI/Input/LocationInput";
-import Loc from "./Models/Loc";
+import AllKnownLayers from "./Customizations/AllKnownLayers";
+import {FixedUiElement} from "./UI/Base/FixedUiElement";
 import {VariableUiElement} from "./UI/Base/VariableUIElement";
-import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
-import LayoutConfig from "./Models/ThemeConfig/LayoutConfig";
+import {TagUtils} from "./Logic/Tags/TagUtils";
+import Combine from "./UI/Base/Combine";
+import Svg from "./Svg";
+import Translations from "./UI/i18n/Translations";
+import LayerConfig from "./Models/ThemeConfig/LayerConfig";
+import AddNewMarker from "./UI/BigComponents/AddNewMarker";

-const layout = new UIEventSource<LayoutConfig>(AllKnownLayouts.allKnownLayouts.get("cycle_infra"))
-State.state = new State(layout.data)

-const features = new UIEventSource<{ feature: any }[]>([
+function genMarker(filteredLayers: UIEventSource<{ appliedFilters: undefined; isDisplayed: UIEventSource<boolean>; layerDef: LayerConfig }[]>) {
+return new AddNewMarker(filteredLayers)
+
+}
+
+let filteredLayers = new UIEventSource([
    {
-        feature: {
-            "type": "Feature",
-            "properties": {},
-            "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                    [
-                        3.219616413116455,
-                        51.215315026941276
-                    ],
-                    [
-                        3.221080899238586,
-                        51.21564432998662
-                    ]
-                ]
-            }
-        }
-    },
-    {
-        feature: {
-            "type": "Feature",
-            "properties": {},
-            "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                    [
-                        3.220340609550476,
-                        51.21547967875836
-                    ],
-                    [
-                        3.2198095321655273,
-                        51.216390293480515
-                    ]
-                ]
-            }
-        }
+        layerDef: AllKnownLayers.sharedLayers.get("toilet"),
+        isDisplayed: new UIEventSource<boolean>(true),
+        appliedFilters: undefined
    }
 ])
+genMarker(filteredLayers).SetStyle("width: 50px; height: 70px")
+    .SetClass("block border-black border")
+    .AttachTo("maindiv")

-features.data.map(f => State.state.allElements.addOrGetElement(f.feature))
-const loc = new UIEventSource<Loc>({
-    zoom: 19,
-    lat: 51.21547967875836,
-    lon: 3.220340609550476
-})
-const li = new LocationInput(
-    {
-        mapBackground: AvailableBaseLayers.SelectBestLayerAccordingTo(loc, new UIEventSource<string | string[]>("map")),
-        snapTo: features,
-        snappedPointTags: {
-            "barrier": "cycle_barrier"
-        },
-        maxSnapDistance: 15,
-        requiresSnapping: false,
-        centerLocation: loc
-    }
-)
-li.SetStyle("height: 30rem").AttachTo("maindiv")
-new VariableUiElement(li.GetValue().map(JSON.stringify)).AttachTo("extradiv")
+new FixedUiElement("").AttachTo("extradiv")