forked from MapComplete/MapComplete
Feature: add compass widget/north arrow indicator (which resets rotation when clicking), small UI tweaks
This commit is contained in:
parent
46b75b877b
commit
eea659da7c
17 changed files with 271 additions and 21 deletions
|
|
@ -0,0 +1,2 @@
|
|||
SPDX-FileCopyrightText:
|
||||
SPDX-License-Identifier: LicenseRef-TRIVIAL
|
||||
47
assets/svg/compass_back.svg
Normal file
47
assets/svg/compass_back.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2 KiB |
2
assets/svg/compass_back.svg.license
Normal file
2
assets/svg/compass_back.svg.license
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
SPDX-FileCopyrightText:
|
||||
SPDX-License-Identifier: LicenseRef-TRIVIAL
|
||||
64
assets/svg/compass_needle.svg
Normal file
64
assets/svg/compass_needle.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
2
assets/svg/compass_needle.svg.license
Normal file
2
assets/svg/compass_needle.svg.license
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
SPDX-FileCopyrightText:
|
||||
SPDX-License-Identifier: LicenseRef-TRIVIAL
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
51
assets/svg/north_arrow.svg
Normal file
51
assets/svg/north_arrow.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
2
assets/svg/north_arrow.svg.license
Normal file
2
assets/svg/north_arrow.svg.license
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
SPDX-FileCopyrightText: Pieter Vander Vennet
|
||||
SPDX-License-Identifier: CC0-1.0
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
57
src/UI/BigComponents/CompassWidget.svelte
Normal file
57
src/UI/BigComponents/CompassWidget.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
4
src/assets/svg/Compass_back.svelte
Normal file
4
src/assets/svg/Compass_back.svelte
Normal file
|
|
@ -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>
|
||||
4
src/assets/svg/Compass_needle.svelte
Normal file
4
src/assets/svg/Compass_needle.svelte
Normal file
|
|
@ -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>
|
||||
4
src/assets/svg/North_arrow.svelte
Normal file
4
src/assets/svg/North_arrow.svelte
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue