diff --git a/UI/Base/DragInvitation.svelte b/UI/Base/DragInvitation.svelte
index 623c77d48..892ab1c41 100644
--- a/UI/Base/DragInvitation.svelte
+++ b/UI/Base/DragInvitation.svelte
@@ -11,9 +11,14 @@
   function hide() {
     mainElem.style.visibility = "hidden"
   }
+  let initTime = Date.now()
   if (hideSignal) {
     onDestroy(
       hideSignal.addCallbackD(() => {
+        if(initTime + 1000 > Date.now()){
+          console.log("Ignoring hide signal")
+          return
+        }
         console.log("Received hide signal")
         hide()
         return true
@@ -27,8 +32,8 @@
   }
 </script>
 
-<div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full">
-  <div id="hand-container" class="pointer-events-none">
+<div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full pointer-events-none">
+  <div id="hand-container">
     <img src="./assets/svg/hand.svg" />
   </div>
 </div>
diff --git a/UI/BigComponents/NewPointLocationInput.svelte b/UI/BigComponents/NewPointLocationInput.svelte
index 660fa14f7..52293a66a 100644
--- a/UI/BigComponents/NewPointLocationInput.svelte
+++ b/UI/BigComponents/NewPointLocationInput.svelte
@@ -15,6 +15,7 @@
   import FeatureSourceMerger from "../../Logic/FeatureSource/Sources/FeatureSourceMerger"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import { Utils } from "../../Utils"
+  import {createEventDispatcher} from "svelte";
 
   /**
    * An advanced location input, which has support to:
@@ -43,6 +44,8 @@
     lon: number
     lat: number
   }>(undefined)
+  
+  const dispatch = createEventDispatcher<{click: {lon: number, lat: number}}>()
 
   const xyz = Tiles.embedded_tile(coordinate.lat, coordinate.lon, 16)
   const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
@@ -106,6 +109,7 @@
 
 <LocationInput
   {map}
+  on:click={data => dispatch("click", data)}
   mapProperties={initialMapProperties}
   value={preciseLocation}
   initialCoordinate={coordinate}
diff --git a/UI/InputElement/Helpers/LocationInput.svelte b/UI/InputElement/Helpers/LocationInput.svelte
index dfd910f3a..0d43ff74b 100644
--- a/UI/InputElement/Helpers/LocationInput.svelte
+++ b/UI/InputElement/Helpers/LocationInput.svelte
@@ -1,91 +1,96 @@
 <script lang="ts">
-  import { Store, UIEventSource } from "../../../Logic/UIEventSource"
-  import type { MapProperties } from "../../../Models/MapProperties"
-  import { Map as MlMap } from "maplibre-gl"
-  import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
-  import MaplibreMap from "../../Map/MaplibreMap.svelte"
-  import DragInvitation from "../../Base/DragInvitation.svelte"
-  import { GeoOperations } from "../../../Logic/GeoOperations"
-  import ShowDataLayer from "../../Map/ShowDataLayer"
-  import * as boundsdisplay from "../../../assets/layers/range/range.json"
-  import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
-  import * as turf from "@turf/turf"
-  import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-  import { onDestroy } from "svelte"
+    import {Store, UIEventSource} from "../../../Logic/UIEventSource"
+    import type {MapProperties} from "../../../Models/MapProperties"
+    import {Map as MlMap} from "maplibre-gl"
+    import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
+    import MaplibreMap from "../../Map/MaplibreMap.svelte"
+    import DragInvitation from "../../Base/DragInvitation.svelte"
+    import {GeoOperations} from "../../../Logic/GeoOperations"
+    import ShowDataLayer from "../../Map/ShowDataLayer"
+    import * as boundsdisplay from "../../../assets/layers/range/range.json"
+    import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
+    import * as turf from "@turf/turf"
+    import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+    import {createEventDispatcher, onDestroy} from "svelte"
 
-  /**
-   * A visualisation to pick a location on a map background
-   */
-  export let value: UIEventSource<{ lon: number; lat: number }>
-  export let initialCoordinate: { lon: number; lat: number }
-  initialCoordinate = initialCoordinate ?? value.data
-  export let maxDistanceInMeters: number = undefined
-  export let mapProperties: Partial<MapProperties> & {
-    readonly location: UIEventSource<{ lon: number; lat: number }>
-  } = undefined
-  /**
-   * Called when setup is done, can be used to add more layers to the map
-   */
-  export let onCreated: (
-    value: Store<{
-      lon: number
-      lat: number
-    }>,
-    map: Store<MlMap>,
-    mapProperties: MapProperties
-  ) => void = undefined
+    /**
+     * A visualisation to pick a location on a map background
+     */
+    export let value: UIEventSource<{ lon: number; lat: number }>
+    export let initialCoordinate: { lon: number; lat: number }
+    initialCoordinate = initialCoordinate ?? value.data
+    export let maxDistanceInMeters: number = undefined
+    export let mapProperties: Partial<MapProperties> & {
+        readonly location: UIEventSource<{ lon: number; lat: number }>
+    } = undefined
+    /**
+     * Called when setup is done, can be used to add more layers to the map
+     */
+    export let onCreated: (
+        value: Store<{
+            lon: number
+            lat: number
+        }>,
+        map: Store<MlMap>,
+        mapProperties: MapProperties
+    ) => void = undefined
 
-  export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
-  let mla = new MapLibreAdaptor(map, mapProperties)
-  mapProperties.location.syncWith(value)
-  if (onCreated) {
-    onCreated(value, map, mla)
-  }
+    const dispatch = createEventDispatcher<{ click: { lon: number, lat: number } }>()
 
-  let rangeIsShown = false
-  if (maxDistanceInMeters) {
-    onDestroy(
-      mla.location.addCallbackD((newLocation) => {
-        const l = [newLocation.lon, newLocation.lat]
-        const c: [number, number] = [initialCoordinate.lon, initialCoordinate.lat]
-        const d = GeoOperations.distanceBetween(l, c)
-        console.log("distance is", d, l, c)
-        if (d <= maxDistanceInMeters) {
-          return
-        }
-        // This is too far away - let's move back
-        const correctLocation = GeoOperations.along(c, l, maxDistanceInMeters - 10)
-        window.setTimeout(() => {
-          mla.location.setData({ lon: correctLocation[0], lat: correctLocation[1] })
-        }, 25)
+    export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
+    let mla = new MapLibreAdaptor(map, mapProperties)
+    mla.lastClickLocation.addCallbackAndRunD(lastClick => {
+        dispatch("click", lastClick)
+    })
+    mapProperties.location.syncWith(value)
+    if (onCreated) {
+        onCreated(value, map, mla)
+    }
 
-        if (!rangeIsShown) {
-          new ShowDataLayer(map, {
-            layer: new LayerConfig(boundsdisplay),
-            features: new StaticFeatureSource([
-              turf.circle(c, maxDistanceInMeters, {
-                units: "meters",
-                properties: { range: "yes", id: "0" },
-              }),
-            ]),
-          })
-          rangeIsShown = true
-        }
-      })
-    )
-  }
+    let rangeIsShown = false
+    if (maxDistanceInMeters) {
+        onDestroy(
+            mla.location.addCallbackD((newLocation) => {
+                const l = [newLocation.lon, newLocation.lat]
+                const c: [number, number] = [initialCoordinate.lon, initialCoordinate.lat]
+                const d = GeoOperations.distanceBetween(l, c)
+                console.log("distance is", d, l, c)
+                if (d <= maxDistanceInMeters) {
+                    return
+                }
+                // This is too far away - let's move back
+                const correctLocation = GeoOperations.along(c, l, maxDistanceInMeters - 10)
+                window.setTimeout(() => {
+                    mla.location.setData({lon: correctLocation[0], lat: correctLocation[1]})
+                }, 25)
+
+                if (!rangeIsShown) {
+                    new ShowDataLayer(map, {
+                        layer: new LayerConfig(boundsdisplay),
+                        features: new StaticFeatureSource([
+                            turf.circle(c, maxDistanceInMeters, {
+                                units: "meters",
+                                properties: {range: "yes", id: "0"},
+                            }),
+                        ]),
+                    })
+                    rangeIsShown = true
+                }
+            })
+        )
+    }
 </script>
 
 <div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
-  <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
-    <MaplibreMap {map} />
-  </div>
+    <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
+        <MaplibreMap {map}/>
+    </div>
 
-  <div
-    class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
-  >
-    <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" />
-  </div>
+    <div
+            class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
+    >
+        <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg"/>
+    </div>
 
-  <DragInvitation hideSignal={mla.location.stabilized(3000)} />
+    <DragInvitation hideSignal={mla.location}/>
 </div>
diff --git a/UI/Map/MapLibreAdaptor.ts b/UI/Map/MapLibreAdaptor.ts
index c97571309..443d099b3 100644
--- a/UI/Map/MapLibreAdaptor.ts
+++ b/UI/Map/MapLibreAdaptor.ts
@@ -83,7 +83,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
                 // Workaround, 'ShowPointLayer' sets this flag
                 return
             }
-            console.log(e)
             const lon = e.lngLat.lng
             const lat = e.lngLat.lat
             lastClickLocation.setData({ lon, lat })
@@ -321,10 +320,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         if (this.location.data === undefined) {
             this.location.setData({ lon: lng, lat })
         } else if (!isSetup) {
-            const dt = this.location.data
-            dt.lon = map.getCenter().lng
-            dt.lat = map.getCenter().lat
-            this.location.ping()
+            const lon = map.getCenter().lng
+            const lat = map.getCenter().lat
+            this.location.setData({ lon, lat })
         }
         this.zoom.setData(Math.round(map.getZoom() * 10) / 10)
         const bounds = map.getBounds()
diff --git a/UI/Popup/AddNewPoint/AddNewPoint.svelte b/UI/Popup/AddNewPoint/AddNewPoint.svelte
index 597d3538d..c1dbc1bd7 100644
--- a/UI/Popup/AddNewPoint/AddNewPoint.svelte
+++ b/UI/Popup/AddNewPoint/AddNewPoint.svelte
@@ -1,339 +1,353 @@
 <script lang="ts">
-  /**
-   * This component ties together all the steps that are needed to create a new point.
-   * There are many subcomponents which help with that
-   */
-  import type { SpecialVisualizationState } from "../../SpecialVisualization"
-  import PresetList from "./PresetList.svelte"
-  import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig"
-  import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-  import Tr from "../../Base/Tr.svelte"
-  import SubtleButton from "../../Base/SubtleButton.svelte"
-  import FromHtml from "../../Base/FromHtml.svelte"
-  import Translations from "../../i18n/Translations.js"
-  import TagHint from "../TagHint.svelte"
-  import { And } from "../../../Logic/Tags/And.js"
-  import LoginToggle from "../../Base/LoginToggle.svelte"
-  import Constants from "../../../Models/Constants.js"
-  import FilteredLayer from "../../../Models/FilteredLayer"
-  import { Store, UIEventSource } from "../../../Logic/UIEventSource"
-  import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import LoginButton from "../../Base/LoginButton.svelte"
-  import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
-  import CreateNewNodeAction from "../../../Logic/Osm/Actions/CreateNewNodeAction"
-  import { OsmWay } from "../../../Logic/Osm/OsmObject"
-  import { Tag } from "../../../Logic/Tags/Tag"
-  import type { WayId } from "../../../Models/OsmFeature"
-  import Loading from "../../Base/Loading.svelte"
-  import type { GlobalFilter } from "../../../Models/GlobalFilter"
-  import { onDestroy } from "svelte"
-  import NextButton from "../../Base/NextButton.svelte"
-  import BackButton from "../../Base/BackButton.svelte"
-  import ToSvelte from "../../Base/ToSvelte.svelte"
-  import Svg from "../../../Svg"
-  import MapControlButton from "../../Base/MapControlButton.svelte"
-  import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
+    /**
+     * This component ties together all the steps that are needed to create a new point.
+     * There are many subcomponents which help with that
+     */
+    import type {SpecialVisualizationState} from "../../SpecialVisualization"
+    import PresetList from "./PresetList.svelte"
+    import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig"
+    import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+    import Tr from "../../Base/Tr.svelte"
+    import SubtleButton from "../../Base/SubtleButton.svelte"
+    import FromHtml from "../../Base/FromHtml.svelte"
+    import Translations from "../../i18n/Translations.js"
+    import TagHint from "../TagHint.svelte"
+    import {And} from "../../../Logic/Tags/And.js"
+    import LoginToggle from "../../Base/LoginToggle.svelte"
+    import Constants from "../../../Models/Constants.js"
+    import FilteredLayer from "../../../Models/FilteredLayer"
+    import {Store, UIEventSource} from "../../../Logic/UIEventSource"
+    import {EyeIcon, EyeOffIcon} from "@rgossiaux/svelte-heroicons/solid"
+    import LoginButton from "../../Base/LoginButton.svelte"
+    import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
+    import CreateNewNodeAction from "../../../Logic/Osm/Actions/CreateNewNodeAction"
+    import {OsmWay} from "../../../Logic/Osm/OsmObject"
+    import {Tag} from "../../../Logic/Tags/Tag"
+    import type {WayId} from "../../../Models/OsmFeature"
+    import Loading from "../../Base/Loading.svelte"
+    import type {GlobalFilter} from "../../../Models/GlobalFilter"
+    import {onDestroy} from "svelte"
+    import NextButton from "../../Base/NextButton.svelte"
+    import BackButton from "../../Base/BackButton.svelte"
+    import ToSvelte from "../../Base/ToSvelte.svelte"
+    import Svg from "../../../Svg"
+    import MapControlButton from "../../Base/MapControlButton.svelte"
+    import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid"
 
-  export let coordinate: { lon: number; lat: number }
-  export let state: SpecialVisualizationState
+    export let coordinate: { lon: number; lat: number }
+    export let state: SpecialVisualizationState
 
-  let selectedPreset: {
-    preset: PresetConfig
-    layer: LayerConfig
-    icon: string
-    tags: Record<string, string>
-  } = undefined
-  let checkedOfGlobalFilters: number = 0
-  let confirmedCategory = false
-  $: if (selectedPreset === undefined) {
-    confirmedCategory = false
-    creating = false
-    checkedOfGlobalFilters = 0
-  }
+    let selectedPreset: {
+        preset: PresetConfig
+        layer: LayerConfig
+        icon: string
+        tags: Record<string, string>
+    } = undefined
+    let checkedOfGlobalFilters: number = 0
+    let confirmedCategory = false
+    $: if (selectedPreset === undefined) {
+        confirmedCategory = false
+        creating = false
+        checkedOfGlobalFilters = 0
+    }
 
-  let flayer: FilteredLayer = undefined
-  let layerIsDisplayed: UIEventSource<boolean> | undefined = undefined
-  let layerHasFilters: Store<boolean> | undefined = undefined
-  let globalFilter: UIEventSource<GlobalFilter[]> = state.layerState.globalFilters
-  let _globalFilter: GlobalFilter[] = []
-  onDestroy(
-    globalFilter.addCallbackAndRun((globalFilter) => {
-      console.log("Global filters are", globalFilter)
-      _globalFilter = globalFilter ?? []
-    })
-  )
-  $: {
-    flayer = state.layerState.filteredLayers.get(selectedPreset?.layer?.id)
-    layerIsDisplayed = flayer?.isDisplayed
-    layerHasFilters = flayer?.hasFilter
-  }
-  const t = Translations.t.general.add
-
-  const zoom = state.mapProperties.zoom
-
-  const isLoading = state.dataIsLoading
-  let preciseCoordinate: UIEventSource<{ lon: number; lat: number }> = new UIEventSource(undefined)
-  let snappedToObject: UIEventSource<string> = new UIEventSource<string>(undefined)
-
-  let creating = false
-
-  /**
-   * Call when the user should restart the flow by clicking on the map, e.g. because they disabled filters.
-   * Will delete the lastclick-location
-   */
-  function abort() {
-    state.selectedElement.setData(undefined)
-    // When aborted, we force the contributors to place the pin _again_
-    // This is because there might be a nearby object that was disabled; this forces them to re-evaluate the map
-    state.lastClickObject.features.setData([])
-  }
-
-  async function confirm() {
-    creating = true
-    const location: { lon: number; lat: number } = preciseCoordinate.data
-    const snapTo: WayId | undefined = <WayId>snappedToObject.data
-    const tags: Tag[] = selectedPreset.preset.tags.concat(
-      ..._globalFilter.map((f) => f?.onNewPoint?.tags ?? [])
+    let flayer: FilteredLayer = undefined
+    let layerIsDisplayed: UIEventSource<boolean> | undefined = undefined
+    let layerHasFilters: Store<boolean> | undefined = undefined
+    let globalFilter: UIEventSource<GlobalFilter[]> = state.layerState.globalFilters
+    let _globalFilter: GlobalFilter[] = []
+    onDestroy(
+        globalFilter.addCallbackAndRun((globalFilter) => {
+            console.log("Global filters are", globalFilter)
+            _globalFilter = globalFilter ?? []
+        })
     )
-    console.log("Creating new point at", location, "snapped to", snapTo, "with tags", tags)
+    $: {
+        flayer = state.layerState.filteredLayers.get(selectedPreset?.layer?.id)
+        layerIsDisplayed = flayer?.isDisplayed
+        layerHasFilters = flayer?.hasFilter
+    }
+    const t = Translations.t.general.add
 
-    let snapToWay: undefined | OsmWay = undefined
-    if (snapTo !== undefined) {
-      const downloaded = await state.osmObjectDownloader.DownloadObjectAsync(snapTo, 0)
-      if (downloaded !== "deleted") {
-        snapToWay = downloaded
-      }
+    const zoom = state.mapProperties.zoom
+
+    const isLoading = state.dataIsLoading
+    let preciseCoordinate: UIEventSource<{ lon: number; lat: number }> = new UIEventSource(undefined)
+    let snappedToObject: UIEventSource<string> = new UIEventSource<string>(undefined)
+
+    // Small helper variable: if the map is tapped, we should let the 'Next'-button grab some attention as users have to click _that_ to continue, not the map
+    let preciseInputIsTapped = false
+
+    let creating = false
+
+    /**
+     * Call when the user should restart the flow by clicking on the map, e.g. because they disabled filters.
+     * Will delete the lastclick-location
+     */
+    function abort() {
+        state.selectedElement.setData(undefined)
+        // When aborted, we force the contributors to place the pin _again_
+        // This is because there might be a nearby object that was disabled; this forces them to re-evaluate the map
+        state.lastClickObject.features.setData([])
+        preciseInputIsTapped = false
     }
 
-    const newElementAction = new CreateNewNodeAction(tags, location.lat, location.lon, {
-      theme: state.layout?.id ?? "unkown",
-      changeType: "create",
-      snapOnto: snapToWay,
-    })
-    await state.changes.applyAction(newElementAction)
-    state.newFeatures.features.ping()
-    // The 'changes' should have created a new point, which added this into the 'featureProperties'
-    const newId = newElementAction.newElementId
-    console.log("Applied pending changes, fetching store for", newId)
-    const tagsStore = state.featureProperties.getStore(newId)
-    {
-      // Set some metainfo
-      const properties = tagsStore.data
-      if (snapTo) {
-        // metatags (starting with underscore) are not uploaded, so we can safely mark this
-        delete properties["_referencing_ways"]
-        properties["_referencing_ways"] = `["${snapTo}"]`
-      }
-      properties["_backend"] = state.osmConnection.Backend()
-      properties["_last_edit:timestamp"] = new Date().toISOString()
-      const userdetails = state.osmConnection.userDetails.data
-      properties["_last_edit:contributor"] = userdetails.name
-      properties["_last_edit:uid"] = "" + userdetails.uid
-      tagsStore.ping()
+    async function confirm() {
+        creating = true
+        const location: { lon: number; lat: number } = preciseCoordinate.data
+        const snapTo: WayId | undefined = <WayId>snappedToObject.data
+        const tags: Tag[] = selectedPreset.preset.tags.concat(
+            ..._globalFilter.map((f) => f?.onNewPoint?.tags ?? [])
+        )
+        console.log("Creating new point at", location, "snapped to", snapTo, "with tags", tags)
+
+        let snapToWay: undefined | OsmWay = undefined
+        if (snapTo !== undefined) {
+            const downloaded = await state.osmObjectDownloader.DownloadObjectAsync(snapTo, 0)
+            if (downloaded !== "deleted") {
+                snapToWay = downloaded
+            }
+        }
+
+        const newElementAction = new CreateNewNodeAction(tags, location.lat, location.lon, {
+            theme: state.layout?.id ?? "unkown",
+            changeType: "create",
+            snapOnto: snapToWay,
+        })
+        await state.changes.applyAction(newElementAction)
+        state.newFeatures.features.ping()
+        // The 'changes' should have created a new point, which added this into the 'featureProperties'
+        const newId = newElementAction.newElementId
+        console.log("Applied pending changes, fetching store for", newId)
+        const tagsStore = state.featureProperties.getStore(newId)
+        {
+            // Set some metainfo
+            const properties = tagsStore.data
+            if (snapTo) {
+                // metatags (starting with underscore) are not uploaded, so we can safely mark this
+                delete properties["_referencing_ways"]
+                properties["_referencing_ways"] = `["${snapTo}"]`
+            }
+            properties["_backend"] = state.osmConnection.Backend()
+            properties["_last_edit:timestamp"] = new Date().toISOString()
+            const userdetails = state.osmConnection.userDetails.data
+            properties["_last_edit:contributor"] = userdetails.name
+            properties["_last_edit:uid"] = "" + userdetails.uid
+            tagsStore.ping()
+        }
+        const feature = state.indexedFeatures.featuresById.data.get(newId)
+        abort()
+        state.selectedLayer.setData(selectedPreset.layer)
+        state.selectedElement.setData(feature)
+        tagsStore.ping()
     }
-    const feature = state.indexedFeatures.featuresById.data.get(newId)
-    abort()
-    state.selectedLayer.setData(selectedPreset.layer)
-    state.selectedElement.setData(feature)
-    tagsStore.ping()
-  }
 </script>
 
 <LoginToggle ignoreLoading={true} {state}>
-  <!-- This component is basically one big if/then/else flow checking for many conditions and edge cases that (in some cases) have to be handled;
-    1. the first (and outermost) is of course: are we logged in?
-    2. What do we want to add?
-    3. Are all elements of this category visible? (i.e. there are no filters possibly hiding this, is the data still loading, ...) -->
-  <LoginButton osmConnection={state.osmConnection} slot="not-logged-in">
-    <Tr slot="message" t={Translations.t.general.add.pleaseLogin} />
-  </LoginButton>
-  {#if $isLoading}
-    <div class="alert">
-      <Loading>
-        <Tr t={Translations.t.general.add.stillLoading} />
-      </Loading>
-    </div>
-  {:else if $zoom < Constants.minZoomLevelToAddNewPoint}
-    <div class="alert">
-      <Tr t={Translations.t.general.add.zoomInFurther} />
-    </div>
-  {:else if selectedPreset === undefined}
-    <!-- First, select the correct preset -->
-    <PresetList
-      {state}
-      on:select={(event) => {
+    <!-- This component is basically one big if/then/else flow checking for many conditions and edge cases that (in some cases) have to be handled;
+      1. the first (and outermost) is of course: are we logged in?
+      2. What do we want to add?
+      3. Are all elements of this category visible? (i.e. there are no filters possibly hiding this, is the data still loading, ...) -->
+    <LoginButton osmConnection={state.osmConnection} slot="not-logged-in">
+        <Tr slot="message" t={Translations.t.general.add.pleaseLogin}/>
+    </LoginButton>
+    {#if $isLoading}
+        <div class="alert">
+            <Loading>
+                <Tr t={Translations.t.general.add.stillLoading}/>
+            </Loading>
+        </div>
+    {:else if $zoom < Constants.minZoomLevelToAddNewPoint}
+        <div class="alert">
+            <Tr t={Translations.t.general.add.zoomInFurther}/>
+        </div>
+    {:else if selectedPreset === undefined}
+        <!-- First, select the correct preset -->
+        <PresetList
+                {state}
+                on:select={(event) => {
         selectedPreset = event.detail
       }}
-    />
-  {:else if !$layerIsDisplayed}
-    <!-- Check that the layer is enabled, so that we don't add a duplicate -->
-    <div class="alert flex items-center justify-center">
-      <EyeOffIcon class="w-8" />
-      <Tr
-        t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
-      />
-    </div>
+        />
+    {:else if !$layerIsDisplayed}
+        <!-- Check that the layer is enabled, so that we don't add a duplicate -->
+        <div class="alert flex items-center justify-center">
+            <EyeOffIcon class="w-8"/>
+            <Tr
+                    t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
+            />
+        </div>
 
-    <div class="flex flex-wrap-reverse md:flex-nowrap">
-      <button
-        class="flex w-full gap-x-1"
-        on:click={() => {
+        <div class="flex flex-wrap-reverse md:flex-nowrap">
+            <button
+                    class="flex w-full gap-x-1"
+                    on:click={() => {
           abort()
           state.guistate.openFilterView(selectedPreset.layer)
         }}
-      >
-        <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
-        <Tr t={Translations.t.general.add.openLayerControl} />
-      </button>
+            >
+                <ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
+                <Tr t={Translations.t.general.add.openLayerControl}/>
+            </button>
 
-      <button
-        class="primary flex w-full gap-x-1"
-        on:click={() => {
+            <button
+                    class="primary flex w-full gap-x-1"
+                    on:click={() => {
           layerIsDisplayed.setData(true)
           abort()
         }}
-      >
-        <EyeIcon class="w-12" />
-        <Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })} />
-      </button>
-    </div>
-  {:else if $layerHasFilters}
-    <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
-    <div class="alert flex items-center justify-center">
-      <EyeOffIcon class="w-8" />
-      <Tr t={Translations.t.general.add.disableFiltersExplanation} />
-    </div>
-    <div class="flex flex-wrap-reverse md:flex-nowrap">
-      <button
-        class="primary flex w-full gap-x-1"
-        on:click={() => {
+            >
+                <EyeIcon class="w-12"/>
+                <Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })}/>
+            </button>
+        </div>
+    {:else if $layerHasFilters}
+        <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
+        <div class="alert flex items-center justify-center">
+            <EyeOffIcon class="w-8"/>
+            <Tr t={Translations.t.general.add.disableFiltersExplanation}/>
+        </div>
+        <div class="flex flex-wrap-reverse md:flex-nowrap">
+            <button
+                    class="primary flex w-full gap-x-1"
+                    on:click={() => {
           abort()
           state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()
         }}
-      >
-        <EyeOffIcon class="w-12" />
-        <Tr t={Translations.t.general.add.disableFilters} />
-      </button>
-      <button
-        class="flex w-full gap-x-1"
-        on:click={() => {
+            >
+                <EyeOffIcon class="w-12"/>
+                <Tr t={Translations.t.general.add.disableFilters}/>
+            </button>
+            <button
+                    class="flex w-full gap-x-1"
+                    on:click={() => {
           abort()
           state.guistate.openFilterView(selectedPreset.layer)
         }}
-      >
-        <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
-        <Tr t={Translations.t.general.add.openLayerControl} />
-      </button>
-    </div>
-  {:else if !confirmedCategory}
-    <!-- Second, confirm the category -->
-    <h2 class="mr-12">
-      <Tr
-        t={Translations.t.general.add.confirmTitle.Subs({ title: selectedPreset.preset.title })}
-      />
-    </h2>
+            >
+                <ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
+                <Tr t={Translations.t.general.add.openLayerControl}/>
+            </button>
+        </div>
+    {:else if !confirmedCategory}
+        <!-- Second, confirm the category -->
+        <h2 class="mr-12">
+            <Tr
+                    t={Translations.t.general.add.confirmTitle.Subs({ title: selectedPreset.preset.title })}
+            />
+        </h2>
 
-    <Tr t={Translations.t.general.add.confirmIntro} />
+        <Tr t={Translations.t.general.add.confirmIntro}/>
 
-    {#if selectedPreset.preset.description}
-      <Tr t={selectedPreset.preset.description} />
-    {/if}
-
-    {#if selectedPreset.preset.exampleImages}
-      <h3>
-        {#if selectedPreset.preset.exampleImages.length === 1}
-          <Tr t={Translations.t.general.example} />
-        {:else}
-          <Tr t={Translations.t.general.examples} />
+        {#if selectedPreset.preset.description}
+            <Tr t={selectedPreset.preset.description}/>
         {/if}
-      </h3>
-      <span class="flex flex-wrap items-stretch">
+
+        {#if selectedPreset.preset.exampleImages}
+            <h3>
+                {#if selectedPreset.preset.exampleImages.length === 1}
+                    <Tr t={Translations.t.general.example}/>
+                {:else}
+                    <Tr t={Translations.t.general.examples}/>
+                {/if}
+            </h3>
+            <span class="flex flex-wrap items-stretch">
         {#each selectedPreset.preset.exampleImages as src}
-          <img {src} class="m-1 h-64 w-auto rounded-lg" />
+          <img {src} class="m-1 h-64 w-auto rounded-lg"/>
         {/each}
       </span>
-    {/if}
-    <TagHint
-      embedIn={(tags) => t.presetInfo.Subs({ tags })}
-      {state}
-      tags={new And(selectedPreset.preset.tags)}
-    />
+        {/if}
+        <TagHint
+                embedIn={(tags) => t.presetInfo.Subs({ tags })}
+                {state}
+                tags={new And(selectedPreset.preset.tags)}
+        />
 
-    <div class="flex w-full flex-wrap-reverse md:flex-nowrap">
-      <BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
-        <Tr t={t.backToSelect} />
-      </BackButton>
+        <div class="flex w-full flex-wrap-reverse md:flex-nowrap">
+            <BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
+                <Tr t={t.backToSelect}/>
+            </BackButton>
 
-      <NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
-        <div slot="image" class="relative">
-          <FromHtml src={selectedPreset.icon} />
-          <img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg" />
+            <NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
+                <div slot="image" class="relative">
+                    <FromHtml src={selectedPreset.icon}/>
+                    <img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg"/>
+                </div>
+                <div class="w-full">
+                    <Tr t={selectedPreset.text}/>
+                </div>
+            </NextButton>
         </div>
-        <div class="w-full">
-          <Tr t={selectedPreset.text} />
-        </div>
-      </NextButton>
-    </div>
-  {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
-    <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12" />
-    <SubtleButton
-      on:click={() => {
+    {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
+        <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12"/>
+        <SubtleButton
+                on:click={() => {
         checkedOfGlobalFilters = checkedOfGlobalFilters + 1
       }}
-    >
-      <img
-        slot="image"
-        src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
-        class="h-12 w-12"
-      />
-      <Tr
-        slot="message"
-        t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({
+        >
+            <img
+                    slot="image"
+                    src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
+                    class="h-12 w-12"
+            />
+            <Tr
+                    slot="message"
+                    t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({
           preset: selectedPreset.preset,
         })}
-      />
-    </SubtleButton>
-    <SubtleButton
-      on:click={() => {
+            />
+        </SubtleButton>
+        <SubtleButton
+                on:click={() => {
         globalFilter.setData([])
         abort()
       }}
-    >
-      <img slot="image" src="./assets/svg/close.svg" class="h-8 w-8" />
-      <Tr slot="message" t={Translations.t.general.cancel} />
-    </SubtleButton>
-  {:else if !creating}
-    <div class="relative w-full p-1">
-      <div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
-        <NewPointLocationInput
-          value={preciseCoordinate}
-          snappedTo={snappedToObject}
-          {state}
-          {coordinate}
-          targetLayer={selectedPreset.layer}
-          snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}
-        />
-      </div>
-      <div class="absolute bottom-0 left-0 p-4">
-        <MapControlButton
-          on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
         >
-          <Square3Stack3dIcon class="h-6 w-6" />
-        </MapControlButton>
-      </div>
-    </div>
-    <div class="flex flex-wrap-reverse md:flex-nowrap">
-      <BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
-        <Tr t={t.backToSelect} />
-      </BackButton>
+            <img slot="image" src="./assets/svg/close.svg" class="h-8 w-8"/>
+            <Tr slot="message" t={Translations.t.general.cancel}/>
+        </SubtleButton>
+    {:else if !creating}
+        <div class="relative w-full p-1">
+            <div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
+                <NewPointLocationInput
+                        on:click={() => {preciseInputIsTapped = true}}
+                        value={preciseCoordinate}
+                        snappedTo={snappedToObject}
+                        {state}
+                        {coordinate}
+                        targetLayer={selectedPreset.layer}
+                        snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}
+                />
+            </div>
 
-      <NextButton on:click={confirm} clss="primary w-full">
-        <div class="flex w-full justify-end gap-x-2">
-          <Tr t={Translations.t.general.add.confirmLocation} />
+            <div class={(preciseInputIsTapped ? "" : "hidden") + " absolute top-4 flex justify-center w-full"}>
+                <NextButton on:click={confirm} clss="primary w-fit ">
+                    <div class="flex w-full justify-end gap-x-2">
+                        <Tr t={Translations.t.general.add.confirmLocation}/>
+                    </div>
+                </NextButton>
+            </div>
+
+            <div class="absolute bottom-0 left-0 p-4">
+                <MapControlButton
+                        on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
+                >
+                    <Square3Stack3dIcon class="h-6 w-6"/>
+                </MapControlButton>
+            </div>
         </div>
-      </NextButton>
-    </div>
-  {:else}
-    <Loading>Creating point...</Loading>
-  {/if}
+        <div class="flex flex-wrap-reverse md:flex-nowrap">
+            <BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
+                <Tr t={t.backToSelect}/>
+            </BackButton>
+
+            <NextButton on:click={confirm} clss={"primary w-full"}>
+                <div class="flex w-full justify-end gap-x-2">
+                    <Tr t={Translations.t.general.add.confirmLocation}/>
+                </div>
+            </NextButton>
+        </div>
+    {:else}
+        <Loading>Creating point...</Loading>
+    {/if}
 </LoginToggle>
diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index d155cc2a1..ab25c3b62 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -670,6 +670,10 @@ video {
   position: fixed;
 }
 
+.\!fixed {
+  position: fixed !important;
+}
+
 .absolute {
   position: absolute;
 }
@@ -795,10 +799,6 @@ video {
   margin: 1px;
 }
 
-.m-12 {
-  margin: 3rem;
-}
-
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1242,6 +1242,27 @@ video {
           animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+@-webkit-keyframes ping {
+  75%, 100% {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.animate-ping {
+  -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+          animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1730,11 +1751,6 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.text-green-600 {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }