Feature: add compass widget/north arrow indicator (which resets rotation when clicking), small UI tweaks

assets/svg/compass.svg,compass_back.svg,compass_needle.svg.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: 
+SPDX-License-Identifier: LicenseRef-TRIVIAL

assets/svg/compass_back.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 59.430214 59.430214"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="compass_back.svg"
+   inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
+   width="59.430214"
+   height="59.430214"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="8.3069369"
+     inkscape:cx="9.510124"
+     inkscape:cy="35.813442"
+     inkscape:window-width="1920"
+     inkscape:window-height="1005"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     id="circle1"
+     style="fill:#f4900c;stroke-width:1.65084"
+     d="M 59.430214,29.715107 A 29.715107,29.715107 0 0 1 29.715107,59.430214 29.715107,29.715107 0 0 1 0,29.715107 29.715107,29.715107 0 0 1 29.715107,0 29.715107,29.715107 0 0 1 59.430214,29.715107 Z" />
+  <path
+     id="circle2"
+     style="fill:#faf5e3;stroke-width:1.65084;fill-opacity:1"
+     d="m 53.652277,29.715107 a 23.93717,23.93717 0 0 1 -23.93717,23.93717 23.93717,23.93717 0 0 1 -23.93717,-23.93717 23.93717,23.93717 0 0 1 23.93717,-23.93717 23.93717,23.93717 0 0 1 23.93717,23.93717 z" />
+  <path
+     style="font-size:10.2423px;line-height:1;font-family:KacstDigital;-inkscape-font-specification:'KacstDigital, Normal';stroke:#000000;stroke-width:1.51913;stroke-linecap:round;stroke-linejoin:round"
+     d="m 25.928816,9.5663916 h 1.82278 l 4.436329,8.3700504 V 9.5663916 h 1.313474 V 19.571583 H 31.678617 L 27.24229,11.201535 v 8.370048 h -1.313474 z"
+     id="text6"
+     aria-label="N" />
+</svg>

assets/svg/compass_back.svg.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: 
+SPDX-License-Identifier: LicenseRef-TRIVIAL

assets/svg/compass_needle.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 36 36"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="compass_needle.svg"
+   inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showguides="true"
+     inkscape:zoom="100.02504"
+     inkscape:cx="19.175198"
+     inkscape:cy="34.356397"
+     inkscape:window-width="1920"
+     inkscape:window-height="1005"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g6">
+    <sodipodi:guide
+       position="18.006328,19.465387"
+       orientation="1,0"
+       id="guide6"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <g
+     id="g6">
+    <path
+       fill="#292f33"
+       d="m 15.596673,19.47983 2.395999,10.012497 2.408791,-10.009229 z"
+       id="path4" />
+    <path
+       fill="#dd2e44"
+       d="M 20.403034,16.535878 18.006328,6.5226736 15.597537,16.533316 Z"
+       id="path5" />
+    <circle
+       fill="#8899a6"
+       cx="25.461292"
+       cy="-0.0074134124"
+       r="3.0550001"
+       id="circle5"
+       transform="rotate(45.030537)" />
+    <circle
+       fill="#f5f8fa"
+       cx="25.461292"
+       cy="-0.0074134124"
+       r="1.648"
+       id="circle6"
+       transform="rotate(45.030537)" />
+  </g>
+</svg>

assets/svg/compass_needle.svg.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: 
+SPDX-License-Identifier: LicenseRef-TRIVIAL

assets/svg/license_info.json

@@ -164,6 +164,18 @@
     ],
     "sources": []
   },
+  {
+    "path": "compass_back.svg",
+    "license": "TRIVIAL",
+    "authors": [],
+    "sources": []
+  },
+  {
+    "path": "compass_needle.svg",
+    "license": "TRIVIAL",
+    "authors": [],
+    "sources": []
+  },
   {
     "path": "confirm.svg",
     "license": "CC0-1.0",
@@ -638,6 +650,14 @@
       "https://nlnet.nl/logo/"
     ]
   },
+  {
+    "path": "north_arrow.svg",
+    "license": "CC0-1.0",
+    "authors": [
+      "Pieter Vander Vennet"
+    ],
+    "sources": []
+  },
   {
     "path": "not_found.svg",
     "license": "CC-BY-4.0",

assets/svg/north_arrow.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 19.998842 21.478794"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="north_arrow.svg"
+   width="19.998842"
+   height="21.478794"
+   inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showguides="true"
+     inkscape:zoom="31.809268"
+     inkscape:cx="10.374335"
+     inkscape:cy="10.327179"
+     inkscape:window-width="1920"
+     inkscape:window-height="1005"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <g
+     id="g6"
+     transform="matrix(1.3906291,1.4182437,-1.4182437,1.3906291,10.496254,-26.783855)"
+     style="fill:#000000;fill-opacity:1">
+    <path
+       fill="#dd2e44"
+       d="M 18.378552,14.993974 9.879,9.886 l 5.123325,8.551246 1.328258,-2.074158 z"
+       id="path5"
+       sodipodi:nodetypes="ccccc"
+       style="fill:#000000;fill-opacity:1" />
+  </g>
+  <path
+     style="font-size:10.2423px;line-height:1;font-family:KacstDigital;-inkscape-font-specification:'KacstDigital, Normal';fill:#ffffff;fill-opacity:1;stroke:#fffbff;stroke-width:0.46;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 8.3448502,13.390069 H 9.141387 l 1.938629,3.657626 v -3.657626 h 0.573976 v 4.372166 H 10.857453 L 8.9188256,14.104609 v 3.657626 H 8.3448502 Z"
+     id="text6"
+     aria-label="N" />
+</svg>

assets/svg/north_arrow.svg.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Pieter Vander Vennet
+SPDX-License-Identifier: CC0-1.0

public/css/index-tailwind-output.css

@@ -3163,6 +3163,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-style: dashed;
 }
 
+.border-dotted {
+  border-style: dotted;
+}
+
 .border-none {
   border-style: none;
 }
@@ -8344,10 +8348,6 @@ svg.apply-fill path {
     order: 9999;
   }
 
-  .sm\:m-1 {
-    margin: 0.25rem;
-  }
-
   .sm\:m-2 {
     margin: 0.5rem;
   }

src/UI/BigComponents/CompassWidget.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">/**
+ * Show a compass. The compass outline rotates with the map, the compass needle points to the actual north
+ */
+import { Stores, UIEventSource } from "../../Logic/UIEventSource"
+import { Orientation } from "../../Sensors/Orientation"
+import Compass_back from "../../assets/svg/Compass_back.svelte"
+import Compass_needle from "../../assets/svg/Compass_needle.svelte"
+import North_arrow from "../../assets/svg/North_arrow.svelte"
+import Popup from "../Base/Popup.svelte"
+import { Popover } from "flowbite-svelte"
+import Tr from "../Base/Tr.svelte"
+import { fade } from "svelte/transition"
+import ThemeViewState from "../../Models/ThemeViewState"
+import { onDestroy } from "svelte"
+import { Store } from "../../Logic/UIEventSource"
+import { Translation } from "../i18n/Translation"
+
+export let mapProperties: { rotation: UIEventSource<number>, allowRotating: Store<boolean> }
+let orientation = Orientation.singleton.alpha
+let mapRotation = mapProperties.rotation
+export let size = "h-10"
+let wrapperClass = "absolute top-0 left-0 " + size
+let compassLoaded = Orientation.singleton.gotMeasurement
+let allowRotation = mapProperties.allowRotating
+
+function clicked(e: Event) {
+  if (mapProperties.rotation.data === 0) {
+    if (mapProperties.allowRotating.data && compassLoaded.data) {
+      mapProperties.rotation.set(orientation.data)
+    }
+  } else {
+    mapProperties.rotation.set(0)
+    explanation.set(new Translation({ "*": "North is now up" }))
+    showPopover = true
+    Utils.waitFor(5000).then(() => {
+      showPopover = false
+    })
+  }
+}
+
+</script>
+<button style="z-index: -1" class={"relative as-link pointer-events-auto "+size} on:click={(e) => clicked(e)}>
+  {#if $allowRotation && !$compassLoaded}
+    <div class={"border-2 rounded-full border-gray-500 border-dotted  "+wrapperClass} style={`transform: rotate(${-$mapRotation}deg); transition: transform linear 500ms`}>
+      <North_arrow class="w-full" />
+    </div>
+  {:else}
+    {#if $allowRotation}
+      <div class={wrapperClass} style={`transform: rotate(${-$mapRotation}deg); transition: transform linear 500ms`}>
+        <Compass_back class="w-full" />
+      </div>
+    {/if}
+    <div class={wrapperClass} style={`transform: rotate(${-$orientation}deg)`}>
+      <Compass_needle class="w-full" />
+    </div>
+  {/if}
+</button>

src/UI/BigComponents/GpsElementHelper.svelte

@@ -12,7 +12,7 @@
   export let state: ThemeViewState
   let gpsState = state.geolocationState
   export let mapIsDragged: Store<void>
-  let open = true
+  let open = false
 
   function showFor(timeoutSeconds: number = 3) {
     open = true

src/UI/BigComponents/WelcomeBack.svelte

@@ -28,7 +28,7 @@
   {#if $username !== undefined}
     <div style="width: max-content" class="flex items-center">
       {#if $userdetails.img}
-        <img src={$userdetails.img} alt="avatar" class="mr-4 h-8 w-8 rounded-full" />
+        <img src={$userdetails.img} alt="avatar" class="mr-4 h-10 w-10 rounded-full" />
       {/if}
       <div>
         <div>Welcome back</div>

src/UI/Map/MapLibreAdaptor.ts

@@ -178,7 +178,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
             this.setMinzoom(this.minzoom.data)
             this.setMaxzoom(this.maxzoom.data)
             this.setBounds(this.bounds.data)
-            this.SetRotation(this.rotation.data)
+            this.setRotation(this.rotation.data)
             this.setScale(this.showScale.data)
             this.updateStores(true)
         }
@@ -252,7 +252,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         })
         this.zoom.addCallbackAndRunD((z) => this.SetZoom(z))
         this.maxbounds.addCallbackAndRun((bbox) => this.setMaxBounds(bbox))
-        this.rotation.addCallbackAndRunD((bearing) => this.SetRotation(bearing))
+        this.rotation.addCallbackAndRunD((bearing) => this.setRotation(bearing))
         this.allowMoving.addCallbackAndRun((allowMoving) => {
             this.setAllowMoving(allowMoving)
             this.pingKeycodeEvent(allowMoving ? "unlocked" : "locked")
@@ -554,12 +554,12 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         }
     }
 
-    private SetRotation(bearing: number): void {
+    private setRotation(bearing: number): void {
         const map = this._maplibreMap.data
         if (!map || bearing === undefined) {
             return
         }
-        map.rotateTo(bearing, { duration: 0 })
+        map.rotateTo(bearing, { duration: 500 })
     }
 
     private MoveMapToCurrentLoc(loc: { lat: number; lon: number }): void {

src/UI/ThemeViewGUI.svelte

@@ -30,7 +30,6 @@
   import VisualFeedbackPanel from "./BigComponents/VisualFeedbackPanel.svelte"
   import { Orientation } from "../Sensors/Orientation"
   import GeolocationIndicator from "./BigComponents/GeolocationIndicator.svelte"
-  import Compass_arrow from "../assets/svg/Compass_arrow.svelte"
   import ReverseGeocoding from "./BigComponents/ReverseGeocoding.svelte"
   import { BBox } from "../Logic/BBox"
   import ExtraLinkButton from "./BigComponents/ExtraLinkButton.svelte"
@@ -55,6 +54,7 @@
   import WelcomeBack from "./BigComponents/WelcomeBack.svelte"
   import InsetSpacer from "./Base/InsetSpacer.svelte"
   import { AndroidPolyfill } from "../Logic/Web/AndroidPolyfill"
+  import CompassWidget from "./BigComponents/CompassWidget.svelte"
   export let state: WithSearchState
   new TitleHandler(state.selectedElement, state)
 
@@ -64,8 +64,6 @@
   let theme = state.theme
   let maplibremap: UIEventSource<MlMap> = state.map
   let selectedElement: UIEventSource<Feature> = new UIEventSource<Feature>(undefined)
-  let compass = Orientation.singleton.alpha
-  let compassLoaded = Orientation.singleton.gotMeasurement
   let addNewFeatureMode = state.userRelatedState.addNewFeatureMode
   let gpsAvailable = state.geolocation.geolocationState.gpsAvailable
   let gpsButtonAriaLabel = state.geolocation.geolocationState.gpsStateExplanation
@@ -314,14 +312,6 @@
               <GeolocationIndicator {state} />
               <!-- h-8 w-8 + p-0.5 sm:p-1 + 2px border => 9 sm: 10 in total-->
             </MapControlButton>
-            {#if $compassLoaded}
-              <div class="absolute left-0 top-0 m-0.5 h-0 w-0 sm:m-1">
-                <Compass_arrow
-                  class="compass_arrow"
-                  openstyle={`rotate: calc(${-$compass}deg + 45deg); transform-origin: 50% 50%;`}
-                />
-              </div>
-            {/if}
           </div>
           <GpsElementHelper {state} {mapIsDragged} />
         </If>
@@ -430,6 +420,7 @@
       {/if}
 
       <ExtraLinkButton {state} />
+      <CompassWidget mapProperties={state.mapProperties} />
       <UploadingImageCounter featureId="*" showThankYou={false} {state} />
       <PendingChangesIndicator {state} />
       <If condition={state.featureSwitchIsTesting}>

src/assets/svg/Compass_back.svelte

@@ -0,0 +1,4 @@
+<script>
+export let color = "#000000"
+</script>
+ <svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown on:focus    viewBox="0 0 59.430214 59.430214"    version="1.1"    id="svg6"    sodipodi:docname="compass_back.svg"    inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"    width="59.430214"    height="59.430214"    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"    xmlns="http://www.w3.org/2000/svg"    xmlns:svg="http://www.w3.org/2000/svg">   <defs      id="defs6" />   <sodipodi:namedview      id="namedview6"      pagecolor="#ffffff"      bordercolor="#999999"      borderopacity="1"      inkscape:showpageshadow="2"      inkscape:pageopacity="0"      inkscape:pagecheckerboard="0"      inkscape:deskcolor="#d1d1d1"      inkscape:zoom="8.3069369"      inkscape:cx="9.510124"      inkscape:cy="35.813442"      inkscape:window-width="1920"      inkscape:window-height="1005"      inkscape:window-x="0"      inkscape:window-y="0"      inkscape:window-maximized="1"      inkscape:current-layer="svg6" />   <path      id="circle1"      style="fill:#f4900c;stroke-width:1.65084"      d="M 59.430214,29.715107 A 29.715107,29.715107 0 0 1 29.715107,59.430214 29.715107,29.715107 0 0 1 0,29.715107 29.715107,29.715107 0 0 1 29.715107,0 29.715107,29.715107 0 0 1 59.430214,29.715107 Z" />   <path      id="circle2"      style="fill:#faf5e3;stroke-width:1.65084;fill-opacity:1"      d="m 53.652277,29.715107 a 23.93717,23.93717 0 0 1 -23.93717,23.93717 23.93717,23.93717 0 0 1 -23.93717,-23.93717 23.93717,23.93717 0 0 1 23.93717,-23.93717 23.93717,23.93717 0 0 1 23.93717,23.93717 z" />   <path      style="font-size:10.2423px;line-height:1;font-family:KacstDigital;-inkscape-font-specification:'KacstDigital, Normal';stroke:{color};stroke-width:1.51913;stroke-linecap:round;stroke-linejoin:round"      d="m 25.928816,9.5663916 h 1.82278 l 4.436329,8.3700504 V 9.5663916 h 1.313474 V 19.571583 H 31.678617 L 27.24229,11.201535 v 8.370048 h -1.313474 z"      id="text6"      aria-label="N" /> </svg> 

src/assets/svg/Compass_needle.svelte

@@ -0,0 +1,4 @@
+<script>
+export const color = "#000000"
+</script>
+ <svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown on:focus    viewBox="0 0 36 36"    version="1.1"    id="svg6"    sodipodi:docname="compass_needle.svg"    inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"    xmlns="http://www.w3.org/2000/svg"    xmlns:svg="http://www.w3.org/2000/svg">   <defs      id="defs6" />   <sodipodi:namedview      id="namedview6"      pagecolor="#ffffff"      bordercolor="#999999"      borderopacity="1"      inkscape:showpageshadow="2"      inkscape:pageopacity="0"      inkscape:pagecheckerboard="0"      inkscape:deskcolor="#d1d1d1"      showguides="true"      inkscape:zoom="100.02504"      inkscape:cx="19.175198"      inkscape:cy="34.356397"      inkscape:window-width="1920"      inkscape:window-height="1005"      inkscape:window-x="0"      inkscape:window-y="0"      inkscape:window-maximized="1"      inkscape:current-layer="g6">     <sodipodi:guide        position="18.006328,19.465387"        orientation="1,0"        id="guide6"        inkscape:locked="false" />   </sodipodi:namedview>   <g      id="g6">     <path        fill="#292f33"        d="m 15.596673,19.47983 2.395999,10.012497 2.408791,-10.009229 z"        id="path4" />     <path        fill="#dd2e44"        d="M 20.403034,16.535878 18.006328,6.5226736 15.597537,16.533316 Z"        id="path5" />     <circle        fill="#8899a6"        cx="25.461292"        cy="-0.0074134124"        r="3.0550001"        id="circle5"        transform="rotate(45.030537)" />     <circle        fill="#f5f8fa"        cx="25.461292"        cy="-0.0074134124"        r="1.648"        id="circle6"        transform="rotate(45.030537)" />   </g> </svg> 

src/assets/svg/North_arrow.svelte

@@ -0,0 +1,4 @@
+<script>
+export let color = "#000000"
+</script>
+ <svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown on:focus    viewBox="0 0 19.998842 21.478794"    version="1.1"    id="svg6"    sodipodi:docname="north_arrow.svg"    width="19.998842"    height="21.478794"    inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"    xmlns="http://www.w3.org/2000/svg"    xmlns:svg="http://www.w3.org/2000/svg">   <defs      id="defs6" />   <sodipodi:namedview      id="namedview6"      pagecolor="#ffffff"      bordercolor="#999999"      borderopacity="1"      inkscape:showpageshadow="2"      inkscape:pageopacity="0"      inkscape:pagecheckerboard="0"      inkscape:deskcolor="#d1d1d1"      showguides="true"      inkscape:zoom="31.809268"      inkscape:cx="10.374335"      inkscape:cy="10.327179"      inkscape:window-width="1920"      inkscape:window-height="1005"      inkscape:window-x="0"      inkscape:window-y="0"      inkscape:window-maximized="1"      inkscape:current-layer="svg6" />   <g      id="g6"      transform="matrix(1.3906291,1.4182437,-1.4182437,1.3906291,10.496254,-26.783855)"      style="fill:{color};fill-opacity:1">     <path        fill="#dd2e44"        d="M 18.378552,14.993974 9.879,9.886 l 5.123325,8.551246 1.328258,-2.074158 z"        id="path5"        sodipodi:nodetypes="ccccc"        style="fill:{color};fill-opacity:1" />   </g>   <path      style="font-size:10.2423px;line-height:1;font-family:KacstDigital;-inkscape-font-specification:'KacstDigital, Normal';fill:#ffffff;fill-opacity:1;stroke:#fffbff;stroke-width:0.46;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"      d="M 8.3448502,13.390069 H 9.141387 l 1.938629,3.657626 v -3.657626 h 0.573976 v 4.372166 H 10.857453 L 8.9188256,14.104609 v 3.657626 H 8.3448502 Z"      id="text6"      aria-label="N" /> </svg>