From 767f7a01979450fc712dc6d3b5e75c971ae9a563 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Sat, 13 Sep 2025 10:48:49 +0200
Subject: [PATCH] added navigation functionality

---
 .../ItemPopupComponents/HeaderView.tsx        |  76 ++-
 lib/src/assets/navigation/OSM.svg             | 481 ++++++++++++++++++
 lib/src/assets/navigation/apple-maps.svg      |   1 +
 lib/src/assets/navigation/googlemaps.svg      |   1 +
 4 files changed, 547 insertions(+), 12 deletions(-)
 create mode 100644 lib/src/assets/navigation/OSM.svg
 create mode 100644 lib/src/assets/navigation/apple-maps.svg
 create mode 100644 lib/src/assets/navigation/googlemaps.svg

diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index 806499b0..2531be3a 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -21,6 +21,9 @@ import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 
 import ChevronSVG from '#assets/chevron.svg'
+import AppleMapsSVG from '#assets/navigation/apple-maps.svg'
+import GoogleMapsSVG from '#assets/navigation/googlemaps.svg'
+import OpenStreetMapSVG from '#assets/navigation/OSM.svg'
 import ClipboardSVG from '#assets/share/clipboard.svg'
 import FacebookSVG from '#assets/share/facebook.svg'
 import LinkedinSVG from '#assets/share/linkedin.svg'
@@ -148,6 +151,30 @@ export function HeaderView({
       .replace('{title}', encodeURIComponent(shareTitle))
   }
 
+  const routingServices = [
+    {
+      name: 'Google Maps',
+      url: item?.position?.coordinates
+        ? `https://www.google.com/maps/dir/?api=1&destination=${item.position.coordinates[1]},${item.position.coordinates[0]}`
+        : '',
+      icon: <img src={GoogleMapsSVG} alt='Google Maps' className='tw:w-6 tw:h-6' />,
+    },
+    {
+      name: 'Apple Maps',
+      url: item?.position?.coordinates
+        ? `https://maps.apple.com/?daddr=${item.position.coordinates[1]},${item.position.coordinates[0]}`
+        : '',
+      icon: <img src={AppleMapsSVG} alt='Apple Maps' className='tw:w-6 tw:h-6' />,
+    },
+    {
+      name: 'OpenStreetMap',
+      url: item?.position?.coordinates
+        ? `https://www.openstreetmap.org/directions?to=${item.position.coordinates[1]},${item.position.coordinates[0]}`
+        : '',
+      icon: <img src={OpenStreetMapSVG} alt='OpenStreetMap' className='tw:w-6 tw:h-6' />,
+    },
+  ]
+
   const openDeleteModal = async (event: React.MouseEvent<HTMLElement>) => {
     setModalOpen(true)
     event.stopPropagation()
@@ -156,7 +183,7 @@ export function HeaderView({
   return (
     <>
       <div className='tw:flex tw:flex-row'>
-        <div className={'tw:grow tw:max-w-[calc(100%-60px)] }'}>
+        <div className={'tw:grow'}>
           <div className='tw:flex tw:items-center'>
             {avatar && (
               <div className='tw:avatar'>
@@ -208,11 +235,8 @@ export function HeaderView({
             (hasUserPermission(api?.collectionName!, 'delete', item) ||
               hasUserPermission(api?.collectionName!, 'update', item)) &&
             !hideMenu && (
-              <div className='tw:dropdown tw:dropdown-bottom'>
-                <label
-                  tabIndex={0}
-                  className='tw:bg-base-100 tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
-                >
+              <div className='tw:dropdown tw:dropdown-bottom tw:dropdown-center'>
+                <label tabIndex={0} className='tw:btn tw:btn-sm tw:px-2'>
                   <EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
                 </label>
                 <ul
@@ -224,7 +248,7 @@ export function HeaderView({
                     editCallback && (
                       <li>
                         <a
-                          className='tw:text-base-content! tw:tooltip tw:tooltip-right tw:cursor-pointer'
+                          className='tw:text-base-content! tw:tooltip tw:tooltip-top tw:cursor-pointer'
                           data-tip='Edit'
                           onClick={(e) =>
                             item.layer?.customEditLink
@@ -243,7 +267,7 @@ export function HeaderView({
                     setPositionCallback && (
                       <li>
                         <a
-                          className='tw:text-base-content! tw:tooltip tw:tooltip-right tw:cursor-pointer'
+                          className='tw:text-base-content! tw:tooltip tw:tooltip-top tw:cursor-pointer'
                           data-tip='Set position'
                           onClick={setPositionCallback}
                         >
@@ -256,7 +280,7 @@ export function HeaderView({
                     deleteCallback && (
                       <li>
                         <a
-                          className='tw:text-error! tw:tooltip tw:tooltip-right tw:cursor-pointer'
+                          className='tw:text-error! tw:tooltip tw:tooltip-top tw:cursor-pointer'
                           data-tip='Delete'
                           onClick={openDeleteModal}
                         >
@@ -297,9 +321,37 @@ export function HeaderView({
             >
               Follow
             </button>
-            <div className='tw:btn tw:btn-sm tw:mr-2 tw:px-2'>
-              <LuNavigation className='tw:h-4 tw:w-4' />
-            </div>
+            {item?.position?.coordinates ? (
+              <div className='tw:dropdown tw:dropdown-end tw:mr-2'>
+                <div tabIndex={0} role='button' className='tw:btn tw:btn-sm tw:px-2'>
+                  <LuNavigation className='tw:h-4 tw:w-4' />
+                </div>
+                <ul
+                  tabIndex={0}
+                  className='tw:dropdown-content tw:menu tw:bg-base-100 tw:rounded-box tw:z-[1] tw:p-2 tw:shadow-sm'
+                >
+                  {routingServices.map((service) => (
+                    <li key={service.name}>
+                      <a
+                        href={service.url}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        className='tw:flex tw:items-center tw:gap-3'
+                      >
+                        <div className='tw:w-6 tw:h-6 tw:rounded-full tw:flex tw:items-center tw:justify-center tw:text-white'>
+                          <span className='tw:text-xs'>{service.icon}</span>
+                        </div>
+                        {service.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ) : (
+              <div className='tw:btn tw:btn-sm tw:mr-2 tw:px-2 tw:btn-disabled'>
+                <LuNavigation className='tw:h-4 tw:w-4' />
+              </div>
+            )}
             <div className='tw:dropdown tw:dropdown-end'>
               <div tabIndex={0} role='button' className='tw:btn tw:btn-sm tw:px-2'>
                 <ShareIcon className='tw:w-4 tw:h-4' />
diff --git a/lib/src/assets/navigation/OSM.svg b/lib/src/assets/navigation/OSM.svg
new file mode 100644
index 00000000..8d1c1d37
--- /dev/null
+++ b/lib/src/assets/navigation/OSM.svg
@@ -0,0 +1,481 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10cm"
+   height="10cm"
+   id="svg2455"
+   sodipodi:version="0.32"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="OSM_logo_simplified.svg"
+   inkscape:export-filename="/home/matt/Programming/openstreetmap/misc_icons/mag_map_unbusy_reallylowcolour_QR.png"
+   inkscape:export-xdpi="64.769997"
+   inkscape:export-ydpi="64.769997"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   version="1.1"
+   style="display:inline">
+  <defs
+     id="defs3">
+    <pattern
+       inkscape:collect="always"
+       xlink:href="#pattern2573"
+       id="pattern2583" />
+    <pattern
+       inkscape:collect="always"
+       xlink:href="#pattern2565"
+       id="pattern2576" />
+    <pattern
+       inkscape:collect="always"
+       xlink:href="#pattern2560"
+       id="pattern2569" />
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 177.16536 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="354.33072 : 177.16536 : 1"
+       inkscape:persp3d-origin="177.16536 : 118.11024 : 1"
+       id="perspective2471" />
+    <linearGradient
+       id="linearGradient2419">
+      <stop
+         style="stop-color:#000000;stop-opacity:0.50515461;"
+         offset="0.0000000"
+         id="stop2420" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop2421" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2411">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop2412" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.0000000;"
+         offset="1.0000000"
+         id="stop2413" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2411"
+       id="radialGradient2415"
+       cx="212.59842"
+       cy="70.866119"
+       fx="212.59842"
+       fy="70.866119"
+       r="35.433071"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient1767">
+      <stop
+         style="stop-color:#3f3318;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop1768" />
+      <stop
+         style="stop-color:#815f0e;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop1769" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient1754">
+      <stop
+         style="stop-color:#747474;stop-opacity:1.0000000;"
+         offset="0.0000000"
+         id="stop1755" />
+      <stop
+         style="stop-color:#bebebe;stop-opacity:1.0000000;"
+         offset="0.50000000"
+         id="stop1757" />
+      <stop
+         style="stop-color:#d5d5d5;stop-opacity:1.0000000;"
+         offset="0.62500000"
+         id="stop1759" />
+      <stop
+         style="stop-color:#818181;stop-opacity:1.0000000;"
+         offset="0.75000000"
+         id="stop1758" />
+      <stop
+         style="stop-color:#c3c3c3;stop-opacity:1.0000000;"
+         offset="1.0000000"
+         id="stop1756" />
+    </linearGradient>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="28.945312"
+       height="33.076172"
+       patternTransform="translate(190.4901,70.84341)"
+       id="pattern2568">
+      <text
+         xml:space="preserve"
+         style="font-size:12.000000;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1.0000000;stroke:none;stroke-width:1.0000000pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans"
+         x="189.69904"
+         y="67.749657"
+         id="text2569"
+         transform="translate(-190.4901,-70.84341)"><tspan
+           sodipodi:role="line"
+           id="tspan2570"
+           x="189.69904"
+           y="67.749657" /><tspan
+           sodipodi:role="line"
+           id="tspan2576"
+           x="189.69904"
+           y="79.749657">0010</tspan><tspan
+           sodipodi:role="line"
+           id="tspan2578"
+           x="189.69904"
+           y="91.749657">0100</tspan><tspan
+           sodipodi:role="line"
+           id="tspan2580"
+           x="189.69904"
+           y="103.74966">0111</tspan><tspan
+           sodipodi:role="line"
+           id="tspan2582"
+           x="189.69904"
+           y="115.74966" /></text>
+    </pattern>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="32.232422"
+       height="37.876175"
+       patternTransform="translate(183.7668,59.46841)"
+       id="pattern2606">
+      <text
+         xml:space="preserve"
+         style="font-size:12.000000;font-style:normal;font-weight:bold;fill:#000000;fill-opacity:1.0000000;stroke:none;stroke-width:1.0000000pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans;font-stretch:normal;font-variant:normal;text-anchor:middle;writing-mode:lr;"
+         x="189.69904"
+         y="67.749657"
+         id="text2607"
+         transform="translate(-173.5858,-58.84341)"
+         sodipodi:linespacing="120%"><tspan
+           x="189.69904"
+           y="67.749657"
+           sodipodi:role="line"
+           id="tspan2608">0010</tspan><tspan
+           x="189.69904"
+           y="82.149657"
+           sodipodi:role="line"
+           id="tspan2610">0100</tspan><tspan
+           x="189.69904"
+           y="96.549658"
+           sodipodi:role="line"
+           id="tspan2612">0111</tspan></text>
+    </pattern>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="32.232422"
+       height="28.276169"
+       patternTransform="translate(183.7668,59.46841)"
+       id="pattern2623">
+      <text
+         xml:space="preserve"
+         style="font-size:12.000000;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1.0000000;stroke:none;stroke-width:1.0000000pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans;text-anchor:middle;writing-mode:lr;"
+         x="189.69904"
+         y="67.749657"
+         id="text2624"
+         transform="translate(-173.5858,-58.84341)"
+         sodipodi:linespacing="80%"><tspan
+           x="189.69904"
+           y="67.749657"
+           sodipodi:role="line"
+           id="tspan2625">0010</tspan><tspan
+           x="189.69904"
+           y="77.349657"
+           sodipodi:role="line"
+           id="tspan2627">0100</tspan><tspan
+           x="189.69904"
+           y="86.949657"
+           sodipodi:role="line"
+           id="tspan2629">0111</tspan></text>
+    </pattern>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="32.232422"
+       height="25.876175"
+       patternTransform="translate(183.7668,59.46841)"
+       id="pattern2639">
+      <text
+         xml:space="preserve"
+         style="font-size:12.000000;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1.0000000;stroke:none;stroke-width:1.0000000pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans;text-anchor:middle;writing-mode:lr;"
+         x="189.69904"
+         y="67.749657"
+         id="text2640"
+         transform="translate(-173.5858,-58.84341)"
+         sodipodi:linespacing="70%"><tspan
+           x="189.69904"
+           y="67.749657"
+           sodipodi:role="line"
+           id="tspan2641">0010</tspan><tspan
+           x="189.69904"
+           y="76.149656"
+           sodipodi:role="line"
+           id="tspan2643">0100</tspan><tspan
+           x="189.69904"
+           y="84.549656"
+           sodipodi:role="line"
+           id="tspan2645">0111</tspan></text>
+    </pattern>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="96.697266"
+       height="77.628510"
+       patternTransform="translate(151.5402,41.65591)"
+       id="pattern2692">
+      <text
+         xml:space="preserve"
+         style="font-size:36.000000;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1.0000000;stroke:none;stroke-width:1.0000000pt;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1.0000000;font-family:Bitstream Vera Sans;text-anchor:middle;writing-mode:lr;"
+         x="189.69904"
+         y="67.749657"
+         id="text2693"
+         transform="translate(-141.3592,-41.03091)"
+         sodipodi:linespacing="70%"><tspan
+           x="189.69904"
+           y="67.749657"
+           sodipodi:role="line"
+           id="tspan2694">0010</tspan><tspan
+           x="189.69904"
+           y="92.949656"
+           sodipodi:role="line"
+           id="tspan2696">0100</tspan><tspan
+           x="189.69904"
+           y="118.14965"
+           sodipodi:role="line"
+           id="tspan2698">0111</tspan></text>
+    </pattern>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="201.79236"
+       height="201.79236"
+       patternTransform="translate(-78.725091,-19.681293)"
+       id="pattern2553">
+      <path
+         transform="translate(-124.01575,-17.716515)"
+         d="M 325.80811,118.61269 A 100.89618,100.89618 0 1 1 124.01575,118.61269 A 100.89618,100.89618 0 1 1 325.80811,118.61269 z"
+         sodipodi:ry="100.89618"
+         sodipodi:rx="100.89618"
+         sodipodi:cy="118.61269"
+         sodipodi:cx="224.91193"
+         id="path2615"
+         style="opacity:0.35975611;fill:url(#pattern2692);fill-opacity:1;stroke:none;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:10, 1.25;stroke-dashoffset:0;stroke-opacity:1"
+         sodipodi:type="arc" />
+    </pattern>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="201.79236"
+       height="201.79236"
+       patternTransform="translate(-73.305123,-24.559268)"
+       id="pattern2560">
+      <path
+         transform="translate(-124.01575,-17.716515)"
+         d="M 325.80811,118.61269 A 100.89618,100.89618 0 1 1 124.01575,118.61269 A 100.89618,100.89618 0 1 1 325.80811,118.61269 z"
+         sodipodi:ry="100.89618"
+         sodipodi:rx="100.89618"
+         sodipodi:cy="118.61269"
+         sodipodi:cx="224.91193"
+         id="path2558"
+         style="opacity:0.35975611;fill:url(#pattern2692);fill-opacity:1;stroke:none;stroke-width:1.25;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:10, 1.25;stroke-dashoffset:0;stroke-opacity:1"
+         sodipodi:type="arc" />
+    </pattern>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="201.79236"
+       height="201.79236"
+       patternTransform="translate(-73.305122,-24.559269)"
+       id="pattern2565">
+      <rect
+         id="rect2563"
+         y="0"
+         x="0"
+         height="201.79236"
+         width="201.79236"
+         style="fill:url(#pattern2569);stroke:none" />
+    </pattern>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="201.79236"
+       height="201.79236"
+       patternTransform="translate(-73.305122,-24.559269)"
+       id="pattern2573">
+      <rect
+         id="rect2571"
+         y="0"
+         x="0"
+         height="201.79236"
+         width="201.79236"
+         style="fill:url(#pattern2576);stroke:none" />
+    </pattern>
+    <pattern
+       patternUnits="userSpaceOnUse"
+       width="201.79236"
+       height="201.79236"
+       patternTransform="translate(-73.305122,-24.559269)"
+       id="pattern2580">
+      <rect
+         id="rect2578"
+         y="0"
+         x="0"
+         height="201.79236"
+         width="201.79236"
+         style="fill:url(#pattern2583);stroke:none" />
+    </pattern>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2419"
+       id="linearGradient4191"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(1.19593,0.836169)"
+       x1="156.33752"
+       y1="184.92068"
+       x2="264.56921"
+       y2="184.92068" />
+    <inkscape:perspective
+       id="perspective3956"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective4031"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.0776307"
+     inkscape:cx="269.25951"
+     inkscape:cy="219.45682"
+     inkscape:current-layer="layer4"
+     showgrid="false"
+     inkscape:grid-bbox="true"
+     inkscape:grid-points="true"
+     inkscape:window-width="1582"
+     inkscape:window-height="997"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="false"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3670" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="Map"
+     style="display:inline">
+    <path
+       style="color:#000000;fill:#8bdc81;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 24.941657,22.868809 70,20 20.000003,70.000001 -70.000003,-20.000001 -20,-70 z"
+       id="path3682"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;fill:#9ae091;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 164.5,23 -69.5625,19.875 20,70 1.5,-0.4375 C 118.0924,83.981227 129.724,56.026005 151.40625,34.34375 155.55019,30.199813 159.93266,26.416536 164.5,23 z"
+       id="path3686"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccsc" />
+    <path
+       style="color:#000000;fill:#8bdc81;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 116.4375,112.4375 -1.5,0.4375 -20,70 33.8125,-9.65625 c -9.43265,-19.03184 -13.5188,-40.03882 -12.3125,-60.78125 z"
+       id="path3812"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;fill:#79d76e;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 94.941657,182.86881 20.000003,-70 -70.000003,-20.000001 -20,70.000001 70,20 z"
+       id="path3814"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;fill:#8bdc81;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 24.9375,162.875 20,70 6.375,1.8125 37.84375,-37.84375 c 2.429556,-2.42956 5.159516,-4.39869 8.0625,-5.9375 l -2.28125,-8.03125 -70,-20 z"
+       id="path3838" />
+    <path
+       style="color:#000000;fill:#9ae091;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 128.75,173.21875 -33.8125,9.65625 2.28125,8.03125 c 7.88192,-4.17805 17.10926,-5.08994 25.59375,-2.71875 l 9.0625,-9.0625 c -1.1026,-1.94426 -2.13871,-3.91626 -3.125,-5.90625 z m 48.53125,51.28125 -9.0625,9.0625 c 0.35803,1.27034 0.63199,2.54704 0.84375,3.84375 l 15.875,-4.53125 -1.46875,-5.09375 c -2.08738,-1.02807 -4.15018,-2.12555 -6.1875,-3.28125 z"
+       id="path3840" />
+    <path
+       style="color:#000000;fill:#8bdc81;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 183.46875,227.78125 1.46875,5.09375 70,20 -3.875,-13.53125 c -22.91257,2.68291 -46.45645,-1.15199 -67.59375,-11.5625 z"
+       id="path3844"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;fill:#9ae091;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 318.0625,208.8125 c -19.19452,17.52324 -42.74675,27.69135 -67,30.53125 l 3.875,13.53125 70,-20 z"
+       id="path3846"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;fill:#8bdc81;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 324.94166,232.86881 -70,20 -20,70 70,-20 20,-70 z"
+       id="path3852"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;fill:#79d76e;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 234.94166,322.86881 20,-70 -70,-20 -20,70 70,20 z"
+       id="path3854"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;fill:#8bdc81;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 184.9375,232.875 -15.875,4.53125 c 1.72744,10.57779 -1.40388,21.81013 -9.46875,29.875 l -52,51.96875 57.34375,-16.375 20,-70 z"
+       id="path3858" />
+    <path
+       style="color:#000000;fill:#79d76e;fill-opacity:1;fill-rule:nonzero;stroke:#8bdc81;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 44.9375,232.875 -3.28125,11.46875 9.65625,-9.65625 -6.375,-1.8125 z"
+       id="path3860" />
+    <text
+       xml:space="preserve"
+       style="font-size:48px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+       x="162.72966"
+       y="167.32285"
+       id="text3085"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan3087"
+         x="162.72966"
+         y="167.32285" /></text>
+  </g>
+  <g
+     inkscape:label="MagnifyingGlass"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       inkscape:connector-curvature="0"
+       style="fill:#585858;fill-opacity:1;stroke:none"
+       d="m 236.78125,13.4375 c -27.20888,-0.0055 -54.44198,10.348233 -75.1875,31.09375 -37.21281,37.212814 -40.9449,95.18225 -11.40625,136.6875 l -24.28125,24.3125 c -7.8655,-6.27663 -19.27236,-5.79014 -26.5625,1.5 l -83.1875,83.1875 c -7.8347456,7.83475 -7.8347456,20.4465 0,28.28125 l 21.8125,21.84375 c 7.834746,7.83475 20.446504,7.83475 28.28125,0 l 83.21875,-83.1875 c 7.2903,-7.2903 7.77707,-18.72823 1.5,-26.59375 L 175.25,206.28125 c 41.50526,29.53866 99.4747,25.80657 136.6875,-11.40625 41.49103,-41.49104 41.49103,-108.821469 0,-150.3125 -20.74552,-20.745515 -47.94737,-31.119475 -75.15625,-31.125 z m -2.125,17.71875 c 23.37625,-0.551438 46.92182,8.109319 64.75,25.9375 34.57586,34.575863 34.60711,90.67414 0.0312,125.25 -34.57585,34.57587 -90.73663,34.57587 -125.3125,0 -34.57587,-34.57585 -34.57586,-90.705386 0,-125.28125 16.74768,-16.747687 38.57174,-25.388232 60.53125,-25.90625 z"
+       id="path1736" />
+  </g>
+</svg>
diff --git a/lib/src/assets/navigation/apple-maps.svg b/lib/src/assets/navigation/apple-maps.svg
new file mode 100644
index 00000000..369a06a7
--- /dev/null
+++ b/lib/src/assets/navigation/apple-maps.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#e0e0e0" d="M35.13 42H19V30C19 30 35.48 42 35.13 42zM6.3 10.87c.1-.33.22-.65.38-.96C7.36 8.46 8.54 7.3 10 6.64 10.149 6.565 11 13 11 13S6.193 11.207 6.3 10.87z"/><path fill="#7cb342" d="M18 6H20V23H18z"/><path fill="#ffcdd2" d="M11,18v23.73c-0.35-0.09-0.68-0.21-1-0.37c-2.36-1.08-4-3.47-4-6.23V18H11z"/><path fill="#aed581" d="M42,25v10.13c0,0.36-0.03,0.71-0.09,1.05L20,20.6V6h3C23,16.48,31.52,25,42,25z"/><path fill="#bdbdbd" d="M12 14h-2V6.64c.32-.16.65-.28 1-.37.32-.1.66-.17 1-.2C12.28 6.02 12 14 12 14zM18 32H20V42H18z"/><path fill="#f9a825" d="M42,35.02v0.11c0,0.36-0.03,0.71-0.09,1.05c-0.06,0.43-0.16,0.84-0.31,1.23 c-0.82,2.36-2.9,4.13-5.44,4.5C35.83,41.97,35.48,42,35.13,42h-0.57l-3.02-2.15c-0.01,0-0.01-0.01-0.01-0.01l-4.5-3.2 c0,0-0.01,0-0.01-0.01l-6.36-4.52L20,31.65l-1-0.72l-1-0.71l-0.91-0.64L16.28,29l-2.49-1.77L12.06,26L12,25.96l-1-0.71l-1-0.72 L9.26,24H9.25L6,21.69v-8.82c0-0.69,0.1-1.37,0.3-2c0.1-0.33,0.22-0.65,0.38-0.96L10,12.27l2,1.42l1,0.71l5,3.55l1,0.71l0.55,0.39 L20,19.37v0.01l14.73,10.47l1.6,1.14l2.66,1.89l0.98,0.7L42,35.02z"/><path fill="#fdd835" d="M41.91,36.18c-0.06,0.43-0.16,0.84-0.31,1.23c-0.82,2.36-2.9,4.13-5.44,4.5l-2.72-1.93 c-0.01,0.01-0.01,0.01-0.02,0l-1.49-1.08l-4.15-2.94c0,0,0,0-0.01-0.01l-1.51-1.08l-5.07-3.6L20,30.42l-1-0.71L18,29l-1.53-1.09 h-0.01l-2.31-1.65L13,25.45l-1-0.72l-1-0.71l-1-0.71l-0.11-0.08L6,20.47v-7.6c0-0.69,0.1-1.37,0.3-2L10,13.5l1,0.71l2,1.42l5,3.55 l1,0.71l1,0.71v0.01l12.41,8.81l1.89,1.35c0,0,0,0.01,0.01,0.01l4.6,3.26l0.88,0.63L41.91,36.18z"/><path fill="#ef9a9a" d="M12,33v8.94c-0.34-0.04-0.68-0.11-1-0.21c-0.35-0.09-0.68-0.21-1-0.37V32L12,33z"/><path fill="#fafafa" d="M19,6v36h-6.13c-0.3,0-0.59-0.02-0.87-0.06c-0.34-0.04-0.68-0.11-1-0.21V6.27 c0.32-0.1,0.66-0.17,1-0.2C12.28,6.02,12.57,6,12.87,6H19z"/><path fill="#3996e8" d="M18,6v17h-6V6.052C12.28,6.015,12.57,6,12.87,6H18z"/><path fill="#1976d2" d="M38.77,29.04c0,0-0.77,0.96-2.77,0.96s-3-1-3-1s-1,1-3,1s-2.77-0.96-2.77-0.96 C26.45,30.16,26,31.53,26,33c0,3.87,3.13,7,7,7s7-3.13,7-7C40,31.53,39.55,30.16,38.77,29.04z"/><path fill="#d84315" d="M38,33H28c0-0.42,0.05-0.83,0.15-1.23C28.72,31.92,29.34,32,30,32c1.28,0,2.29-0.31,3-0.64 c0.71,0.33,1.72,0.64,3,0.64c0.66,0,1.28-0.08,1.85-0.23C37.95,32.17,38,32.58,38,33z"/><path fill="#fbc02d" d="M10 12.27L10 13.5 10 24.53 11 25.25 11 14.21 11 12.98zM20 19.38L20 31.65 19 30.93 19 18.66z"/><path fill="#1976d2" d="M15 21A7 7 0 1 0 15 35A7 7 0 1 0 15 21Z"/><path fill="#e89c23" d="M10 12.27L10 13.5 11 14.21 11 12.98zM19 18.66L19 19.89 20 20.6 20 19.37z"/><path fill="#e9e9e9" d="M42,16.96V26c-11.03,0-20-8.97-20-20h9.04C31.52,11.83,36.17,16.48,42,16.96z"/><path fill="#7cb342" d="M42,13v4.96C35.62,17.48,30.52,12.38,30.05,6H35C38.87,6,42,9.13,42,13z"/><path fill="#aed581" d="M42,13v3.96C36.17,16.48,31.52,11.83,31.04,6H35C38.87,6,42,9.13,42,13z"/><g><path fill="#7cb342" d="M23,6h-1c0,11.03,8.97,20,20,20v-1C31.52,25,23,16.48,23,6z"/></g><g><path fill="#fafafa" d="M15 24L12 32 15 30 18 32z"/><path fill="#fff" d="M38.45,30.48C37.88,30.76,37.08,31,36,31c-1.39,0-2.39-0.41-3-0.77C32.39,30.59,31.39,31,30,31 c-1.08,0-1.88-0.24-2.45-0.52C27.19,31.26,27,32.11,27,33c0,3.31,2.69,6,6,6s6-2.69,6-6C39,32.11,38.81,31.26,38.45,30.48z M33,38 c-2.415,0-4.434-1.721-4.899-4h9.798C37.434,36.279,35.415,38,33,38z M28,33c0-0.422,0.051-0.834,0.151-1.233 C28.724,31.922,29.343,32,30,32c1.283,0,2.288-0.308,3-0.641C33.712,31.692,34.717,32,36,32c0.657,0,1.276-0.078,1.849-0.233 C37.949,32.166,38,32.578,38,33H28z"/><path fill="#fff" d="M32.125 35.24c0 0 0-.625-.625-.625s-.625.625-.625.625h.375c0-.114.043-.25.25-.25.066 0 .242 0 .25.25 0 .215-.291.549-.487.707l-.013.01-.375.325v.036.298h1.25V36.24h-.628C31.497 36.24 32.125 35.74 32.125 35.24zM33.4 35.615c.125-.102.225-.243.225-.427 0-.316-.28-.573-.625-.573s-.625.257-.625.573c0 .184.1.325.225.427-.125.102-.225.243-.225.427 0 .316.28.573.625.573s.625-.257.625-.573C33.625 35.858 33.525 35.717 33.4 35.615zM33 34.99c.135 0 .25.091.25.198 0 .106-.157.19-.25.228-.092-.037-.25-.121-.25-.228C32.75 35.079 32.862 34.99 33 34.99zM33 36.24c-.138 0-.25-.089-.25-.198 0-.106.157-.19.25-.228.092.037.25.121.25.228C33.25 36.149 33.135 36.24 33 36.24zM34.499 34.99c.104 0 .138.033.163.067.057.075.087.207.087.382v.354c0 .175-.03.307-.086.381-.026.034-.06.067-.162.067-.105 0-.139-.033-.165-.067-.057-.075-.087-.206-.087-.38v-.355c0-.175.03-.307.086-.381C34.362 35.023 34.396 34.99 34.499 34.99M34.499 34.615c-.199 0-.352.071-.461.214s-.163.346-.163.608v.355c0 .261.055.463.164.607.109.144.264.215.463.215.198 0 .351-.071.46-.214.109-.143.163-.346.163-.608v-.354c0-.262-.055-.465-.164-.608C34.852 34.687 34.698 34.615 34.499 34.615L34.499 34.615z"/></g></svg>
\ No newline at end of file
diff --git a/lib/src/assets/navigation/googlemaps.svg b/lib/src/assets/navigation/googlemaps.svg
new file mode 100644
index 00000000..7c8cc9f7
--- /dev/null
+++ b/lib/src/assets/navigation/googlemaps.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#1c9957" d="M42,39V9c0-1.657-1.343-3-3-3H9C7.343,6,6,7.343,6,9v30c0,1.657,1.343,3,3,3h30C40.657,42,42,40.657,42,39z"/><path fill="#3e7bf1" d="M9,42h30c1.657,0-15-16-15-16S7.343,42,9,42z"/><path fill="#cbccc9" d="M42,39V9c0-1.657-16,15-16,15S42,40.657,42,39z"/><path fill="#efefef" d="M39,42c1.657,0,3-1.343,3-3v-0.245L26.245,23L23,26.245L38.755,42H39z"/><path fill="#ffd73d" d="M42,9c0-1.657-1.343-3-3-3h-0.245L6,38.755V39c0,1.657,1.343,3,3,3h0.245L42,9.245V9z"/><path fill="#d73f35" d="M36,2c-5.523,0-10,4.477-10,10c0,6.813,7.666,9.295,9.333,19.851C35.44,32.531,35.448,33,36,33s0.56-0.469,0.667-1.149C38.334,21.295,46,18.813,46,12C46,6.477,41.523,2,36,2z"/><path fill="#752622" d="M36 8.5A3.5 3.5 0 1 0 36 15.5A3.5 3.5 0 1 0 36 8.5Z"/><path fill="#fff" d="M14.493,12.531v2.101h2.994c-0.392,1.274-1.455,2.185-2.994,2.185c-1.833,0-3.318-1.485-3.318-3.318s1.486-3.318,3.318-3.318c0.824,0,1.576,0.302,2.156,0.799l1.548-1.547C17.22,8.543,15.92,8,14.493,8c-3.038,0-5.501,2.463-5.501,5.5s2.463,5.5,5.501,5.5c4.81,0,5.637-4.317,5.184-6.461L14.493,12.531z"/></svg>
\ No newline at end of file