Add a little hand, inviting the user to drag location inputs

UI/Input/LocationInput.ts

@@ -11,6 +11,7 @@ import {GeoOperations} from "../../Logic/GeoOperations";
 import ShowDataLayer from "../ShowDataLayer";
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
 import * as L from "leaflet";
+import {FixedUiElement} from "../Base/FixedUiElement";
 
 export default class LocationInput extends InputElement<Loc> {
 
@@ -128,7 +129,7 @@ export default class LocationInput extends InputElement<Loc> {
             })
 
         }
-        this.mapBackground = options.mapBackground ?? State.state.backgroundLayer ?? new UIEventSource(AvailableBaseLayers.osmCarto)
+        this.mapBackground = options.mapBackground ?? State.state?.backgroundLayer ?? new UIEventSource(AvailableBaseLayers.osmCarto)
         this.SetClass("block h-full")
     }
 
@@ -147,7 +148,7 @@ export default class LocationInput extends InputElement<Loc> {
                 {
                     location: this._centerLocation,
                     background: this.mapBackground,
-                    attribution: this.mapBackground !== State.state.backgroundLayer,
+                    attribution: this.mapBackground !== State.state?.backgroundLayer,
                     lastClickLocation: clickLocation
                 }
             )
@@ -219,7 +220,6 @@ export default class LocationInput extends InputElement<Loc> {
                     )
                 }
             }
-
             this.mapBackground.map(layer => {
                 const leaflet = map.leafletMap.data
                 if (leaflet === undefined || layer === undefined) {
@@ -231,20 +231,31 @@ export default class LocationInput extends InputElement<Loc> {
                 leaflet.setZoom(layer.max_zoom - 1)
 
             }, [map.leafletMap])
+            
+            const animatedHand = Svg.hand_ui()
+                .SetStyle("width: 2rem; height: unset;")
+                .SetClass("hand-drag-animation block pointer-events-none")
+            
             return new Combine([
                 new Combine([
                     Svg.move_arrows_ui()
                         .SetClass("block relative pointer-events-none")
                         .SetStyle("left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem")
-                ]).SetClass("block w-0 h-0 z-10 relative")
+                    ]).SetClass("block w-0 h-0 z-10 relative")
-                    .SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%"),
+                    .SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%; opacity: 0.5"),
+                
+                new Combine([
+                    animatedHand])
+                    .SetClass("block w-0 h-0 z-10 relative")
+                    .SetStyle("left: calc(50% + 3rem); top: calc(50% + 2rem); opacity: 0.7"),
+
                 map
                     .SetClass("z-0 relative block w-full h-full bg-gray-100")
 
             ]).ConstructElement();
         } catch (e) {
             console.error("Could not generate LocationInputElement:", e)
-            return undefined;
+            return new FixedUiElement("Constructing a locationInput failed due to" + e).SetClass("alert").ConstructElement();
         }
     }
 

assets/svg/hand.svg

@@ -1,53 +1,30 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-        xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
-        xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
-        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:svg="http://www.w3.org/2000/svg"
-        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns="http://www.w3.org/2000/svg"
-        xmlns="http://www.w3.org/2000/svg"
+   id="svg6"
-        version="1.1"
+   height="39.557907"
-        width="28.561806"
+   width="28.561806"
-        height="39.557907"
+   version="1.1">
-        id="svg6"
+  <metadata
-        sodipodi:docname="Right-pointing_hand_in_green_octagon.svg"
+     id="metadata12">
-        inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+    <rdf:RDF>
-    <metadata
+      <cc:Work
-            id="metadata12">
+         rdf:about="">
-        <rdf:RDF>
+        <dc:format>image/svg+xml</dc:format>
-            <cc:Work
+        <dc:type
-                    rdf:about="">
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-                <dc:format>image/svg+xml</dc:format>
+        <dc:title></dc:title>
-                <dc:type
+      </cc:Work>
-                        rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    </rdf:RDF>
-            </cc:Work>
+  </metadata>
-        </rdf:RDF>
+  <defs
-    </metadata>
+     id="defs10" />
-    <defs
+  <path
-            id="defs10"/>
+     id="path4"
-    <sodipodi:namedview
+     style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.73000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
-            pagecolor="#ffffff"
+     d="m 7.931404,38.692909 h 16.078583 l 3.686819,-10.34355 V 16.367203 c 0,-1.666145 -5.427816,-2.851496 -5.427816,-1.945801 V 18.1082 12.782817 c 0,-0.971193 -5.398869,-1.707156 -5.398869,0 v 3.994037 -4.406807 c -0.573718,-0.956195 -5.354332,-1.343658 -5.354332,0 V 17.084093 2.6404066 c -0.191239,-2.28522003 -4.938353,-2.44771503 -5.416439,0 V 24.048061 18.20547 c 0.02267,-1.537788 -5.14447599,-1.703651 -5.23434999,0 v 6.14983 z" />
-            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="namedview8"
-            showgrid="false"
-            inkscape:zoom="3.6875"
-            inkscape:cx="-15.38013"
-            inkscape:cy="19.778954"
-            inkscape:window-x="0"
-            inkscape:window-y="0"
-            inkscape:window-maximized="1"
-            inkscape:current-layer="svg6"/>
-    <path
-            d="m 7.931404,38.692909 h 16.078583 l 3.686819,-10.34355 V 16.367203 c 0,-1.666145 -5.427816,-2.851496 -5.427816,-1.945801 V 18.1082 12.782817 c 0,-0.971193 -5.398869,-1.707156 -5.398869,0 v 3.994037 -4.406807 c -0.573718,-0.956195 -5.354332,-1.343658 -5.354332,0 V 17.084093 2.6404066 c -0.191239,-2.28522003 -4.938353,-2.44771503 -5.416439,0 V 24.048061 18.20547 c 0.02267,-1.537788 -5.14447599,-1.703651 -5.23434999,0 v 6.14983 z"
-            style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.73000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
-            id="path4"
-            inkscape:connector-curvature="0"/>
 </svg>

index.css

@@ -307,6 +307,7 @@ li::marker {
 
 
 @keyframes slide {
+    /* This is the animation on the marker to add a new point - it slides through all the possible presets */
     from {
         transform: translateX(0%);
     }
@@ -316,6 +317,51 @@ li::marker {
     }
 }
 
+.hand-drag-animation {
+    animation: hand-drag-animation 6s ease-in-out infinite;
+    transform-origin: 50% 125%;
+}
+
+@keyframes hand-drag-animation {
+    /* This is the animation on the little extra hand on the location input. If fades in, invites the user to interact/drag the map */
+    0% {
+        opacity: 0;
+        transform: rotate(-30deg);
+    }
+    
+    6% {
+        opacity: 1;
+        transform: rotate(-30deg);
+    }
+    
+    12% {
+        opacity: 1;
+        transform: rotate(-45deg);
+    }
+
+    24% {
+        opacity: 1;
+        transform: rotate(-00deg);
+    }
+
+    30% {
+        opacity: 1;
+        transform: rotate(-30deg);
+    }
+
+
+    36% {
+        opacity: 0;
+        transform: rotate(-30deg);
+    }
+    
+    100% {
+        opacity: 0;
+        transform: rotate(-30deg);
+    }
+
+}
+
 /**************************************/
 
 

test.ts

@@ -1,16 +1,12 @@
-const client_token = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"
+import LocationInput from "./UI/Input/LocationInput";
+import Loc from "./Models/Loc";
+import {UIEventSource} from "./Logic/UIEventSource";
 
-const image_id = '196804715753265';
+new LocationInput({
-const api_url = 'https://graph.mapillary.com/' + image_id + '?fields=thumb_1024_url&&access_token=' + client_token;
+    centerLocation: new UIEventSource<Loc>({
-fetch(api_url,
+        lat: 51.1110,
-    {
+        lon: 3.3701,
-        headers: {'Authorization': 'OAuth ' + client_token}
+        zoom : 14
-    }
+    })
-).then(response => {
+}).SetStyle("height: 500px")
-    return response.json()
+    .AttachTo("maindiv");
-}).then(
-    json => {
-        const thumbnail_url = json["thumb_1024"]
-        console.log(thumbnail_url)
-    }
-)