[mapapp] Refactor the application to use the new architecture

Task-number: QTAUTO-883
Change-Id: I350d66179e6fe1281f075c91d4548af02f38a177
Reviewed-by: Lukáš Tinkl <ltinkl@luxoft.com>

24 files changed, 704 insertions, 233 deletions

diff --git a/apps/com.pelagicore.qtlocation/Main.qml b/apps/com.pelagicore.qtlocation/Main.qml
index 0601f790..ea695898 100644
--- a/apps/com.pelagicore.qtlocation/Main.qml
+++ b/apps/com.pelagicore.qtlocation/Main.qml
@@ -36,6 +36,8 @@ import com.pelagicore.systeminfo 1.0
 import com.pelagicore.qtlocation 1.0
 
 import QtApplicationManager 1.0
+import "views"
+import "stores"
 
 QtObject {
     id: root
@@ -70,7 +72,7 @@ QtObject {
             }
         }
 
-        Maps {
+        MapView {
             id: mainMap
             x: state === "Maximized" && !searchViewEnabled ? mainWindow.x : mainWindow.exposedRect.x
             y: state === "Maximized" && !searchViewEnabled ? mainWindow.y : mainWindow.exposedRect.y
@@ -79,6 +81,9 @@ QtObject {
             state: mainWindow.neptuneState
             offlineMapsEnabled: !sysinfo.online && Qt.platform.os === "linux"
             mapInteractive: !searchViewEnabled
+            store: MapStore {
+                currentLocationCoord: mainMap.currentLocation
+            }
 
             onMapReadyChanged: {
                 if (mapReady && !mainWindow.secondaryWindowObject) {
@@ -98,7 +103,7 @@ QtObject {
     property Component secondaryWindowComponent: Component {
         id: secondaryWindowComponent
         SecondaryWindow {
-            Maps {
+            MapView {
                 anchors.fill: parent
                 mapInteractive: false
                 mapCenter: mainMap.mapCenter
@@ -106,6 +111,7 @@ QtObject {
                 mapTilt: mainMap.mapTilt
                 mapBearing: mainMap.mapBearing
                 offlineMapsEnabled: mainMap.offlineMapsEnabled
+                store: mainMap.store
             }
         }
     }
diff --git a/apps/com.pelagicore.qtlocation/MapSearchTextField.qml b/apps/com.pelagicore.qtlocation/controls/MapSearchTextField.qml
index 4b8b9eb7..ee72e2bd 100644
--- a/apps/com.pelagicore.qtlocation/MapSearchTextField.qml
+++ b/apps/com.pelagicore.qtlocation/controls/MapSearchTextField.qml
@@ -33,11 +33,13 @@ import QtQuick 2.6
 import QtQuick.Controls 2.0
 import utils 1.0
 import com.pelagicore.styles.neptune 3.0
+import "../helpers"
 
 TextField {
     id: root
 
     property alias busy: searchBusyIndicator.running
+    property Helper helper: Helper {}
 
     font.family: NeptuneStyle.fontFamily
     font.pixelSize: NeptuneStyle.fontSizeM
@@ -59,7 +61,7 @@ TextField {
                 anchors.right: parent.right
                 anchors.rightMargin: Style.hspan(0.4)
                 anchors.verticalCenter: parent.verticalCenter
-                source: Style.localAsset("ic-search", NeptuneStyle.theme)
+                source: helper.localAsset("ic-search", NeptuneStyle.theme)
                 visible: !searchBusyIndicator.visible
             }
             BusyIndicator {
diff --git a/apps/com.pelagicore.qtlocation/MapToolButton.qml b/apps/com.pelagicore.qtlocation/controls/MapToolButton.qml
index 12107570..12107570 100644
--- a/apps/com.pelagicore.qtlocation/MapToolButton.qml
+++ b/apps/com.pelagicore.qtlocation/controls/MapToolButton.qml
diff --git a/apps/com.pelagicore.qtlocation/helpers/Helper.qml b/apps/com.pelagicore.qtlocation/helpers/Helper.qml
new file mode 100644
index 00000000..5c94d7be
--- /dev/null
+++ b/apps/com.pelagicore.qtlocation/helpers/Helper.qml
@@ -0,0 +1,42 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import com.pelagicore.styles.neptune 3.0
+
+QtObject {
+    id: root
+
+    function localAsset(asset, theme) {
+        var themeStr = theme === NeptuneStyle.Dark ? "-dark" : "";
+        return "../assets/" + asset + themeStr + '.png'
+    }
+}
diff --git a/apps/com.pelagicore.qtlocation/StandAlone.qml b/apps/com.pelagicore.qtlocation/helpers/StandAlone.qml
index 5abc716d..0d24a79e 100644
--- a/apps/com.pelagicore.qtlocation/StandAlone.qml
+++ b/apps/com.pelagicore.qtlocation/helpers/StandAlone.qml
@@ -35,6 +35,8 @@ import QtQuick.Window 2.3
 import utils 1.0
 import com.pelagicore.styles.neptune 3.0
 
+import ".."
+
 Window {
     id: root
     width: 1080
diff --git a/apps/com.pelagicore.qtlocation/run-standalone.sh b/apps/com.pelagicore.qtlocation/helpers/run-standalone.sh
index 236674bc..236674bc 100755
--- a/apps/com.pelagicore.qtlocation/run-standalone.sh
+++ b/apps/com.pelagicore.qtlocation/helpers/run-standalone.sh
diff --git a/apps/com.pelagicore.qtlocation/FavoriteDestinationButtons.qml b/apps/com.pelagicore.qtlocation/panels/FavDestinationButtonsPanel.qml
index ebaf126d..528b552b 100644
--- a/apps/com.pelagicore.qtlocation/FavoriteDestinationButtons.qml
+++ b/apps/com.pelagicore.qtlocation/panels/FavDestinationButtonsPanel.qml
@@ -36,6 +36,8 @@ import QtPositioning 5.9
 import animations 1.0
 import utils 1.0
 import com.pelagicore.styles.neptune 3.0
+import "../controls"
+import "../helpers"
 
 Item {
     id: root
@@ -46,6 +48,8 @@ Item {
     property string homeRouteTime: ""
     property string workRouteTime: ""
 
+    property Helper helper: Helper {}
+
     signal showRoute(var destCoord, string description)
 
     RowLayout {
@@ -54,7 +58,7 @@ Item {
             id: buttonGoHome
             Layout.preferredWidth: root.width/2
             anchors.verticalCenter: parent.verticalCenter
-            iconSource: Style.localAsset("ic-home", NeptuneStyle.theme)
+            iconSource: helper.localAsset("ic-home", NeptuneStyle.theme)
             primaryText: qsTr("Home")
             extendedText: homeRouteTime
             //TODO: add properties to the root object to access this externally
@@ -71,7 +75,7 @@ Item {
             id: buttonGoWork
             Layout.preferredWidth: root.width/2
             anchors.verticalCenter: parent.verticalCenter
-            iconSource: Style.localAsset("ic-work", NeptuneStyle.theme)
+            iconSource: helper.localAsset("ic-work", NeptuneStyle.theme)
             primaryText: qsTr("Work")
             extendedText: workRouteTime
             //TODO: add properties to the root object to access this externally
diff --git a/apps/com.pelagicore.qtlocation/HeaderBackgroundMaximized.qml b/apps/com.pelagicore.qtlocation/panels/HeaderBackgroundMaximizedPanel.qml
index f0aa6921..65ccb05a 100644
--- a/apps/com.pelagicore.qtlocation/HeaderBackgroundMaximized.qml
+++ b/apps/com.pelagicore.qtlocation/panels/HeaderBackgroundMaximizedPanel.qml
@@ -35,6 +35,7 @@ import utils 1.0
 import animations 1.0
 
 import com.pelagicore.styles.neptune 3.0
+import "../helpers"
 
 Item {
     id: root
@@ -42,6 +43,8 @@ Item {
     property int destinationButtonrowHeight: 0
     property bool navigationMode: false
     property bool guidanceMode: false
+    property Helper helper: Helper {}
+
     height: destinationButtonsPanel.visible ? destinationButtonsPanel.sourceSize.height : searchPanel.height
 
     BorderImage {
@@ -52,7 +55,7 @@ Item {
         anchors.right: destinationButtonsPanel.right
         anchors.rightMargin: -Style.vspan(.5)
         height: root.navigationMode && !root.guidanceMode ? sourceSize.height - root.destinationButtonrowHeight : sourceSize.height
-        source: Style.localAsset("panel-shadow", NeptuneStyle.theme)
+        source: helper.localAsset("panel-shadow", NeptuneStyle.theme)
         border {
             left: 0
             top: 101
@@ -67,7 +70,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.rightMargin: -Style.vspan(1)
-        source: Style.localAsset("panel-more-contrast-background", NeptuneStyle.theme)
+        source: helper.localAsset("panel-more-contrast-background", NeptuneStyle.theme)
         visible: !root.navigationMode || root.guidanceMode
         border {
             left: 0
@@ -93,7 +96,7 @@ Item {
         anchors.right: parent.right
         anchors.rightMargin: -Style.vspan(1)
         height: root.guidanceMode ? sourceSize.height : destinationButtonsPanel.sourceSize.height - root.destinationButtonrowHeight
-        source: Style.localAsset("panel-background", NeptuneStyle.theme)
+        source: helper.localAsset("panel-background", NeptuneStyle.theme)
         border {
             left: 0
             top: 20
diff --git a/apps/com.pelagicore.qtlocation/HeaderBackgroundWidget.qml b/apps/com.pelagicore.qtlocation/panels/HeaderBackgroundWidgetPanel.qml
index 9267d8f3..9abd2e76 100644
--- a/apps/com.pelagicore.qtlocation/HeaderBackgroundWidget.qml
+++ b/apps/com.pelagicore.qtlocation/panels/HeaderBackgroundWidgetPanel.qml
@@ -35,10 +35,12 @@ import utils 1.0
 import animations 1.0
 
 import com.pelagicore.styles.neptune 3.0
+import "../helpers"
 
 Item {
     id: root
 
+    property Helper helper: Helper {}
     height: widgetBackgroundImage.height
 
     Image {
@@ -48,7 +50,7 @@ Item {
         anchors.right: parent.right
         anchors.top: parent.top
         fillMode: Image.TileHorizontally
-        source: Style.localAsset("navigation-widget-overlay-top", NeptuneStyle.theme)
+        source: helper.localAsset("navigation-widget-overlay-top", NeptuneStyle.theme)
         Behavior on height { DefaultNumberAnimation {} }
     }
 }
diff --git a/apps/com.pelagicore.qtlocation/MapView.qml b/apps/com.pelagicore.qtlocation/panels/MapBoxPanel.qml
index ca40b0d3..039ed4c3 100644
--- a/apps/com.pelagicore.qtlocation/MapView.qml
+++ b/apps/com.pelagicore.qtlocation/panels/MapBoxPanel.qml
@@ -39,6 +39,8 @@ import utils 1.0
 import com.pelagicore.styles.neptune 3.0
 import controls 1.0 as NeptuneControls
 import animations 1.0
+import "../controls"
+import "../helpers"
 
 Item {
     id: root
@@ -53,21 +55,29 @@ Item {
     property alias tilt: mainMap.tilt
     property alias bearing: mainMap.bearing
     property alias zoomLevel: mainMap.zoomLevel
+    property alias mapHeader: header
+
+    property string destination
+    property RouteModel model
+    property string routeDistance
+    property string routeTime
+    property var routeSegments
+    property string homeRouteTime
+    property string workRouteTime
+    property var destCoord: QtPositioning.coordinate()
 
     property bool offlineMapsEnabled
     property bool navigationMode
     property bool guidanceMode
-    property alias routingPlugin: mapRouting.routingPlugin
-    property alias startCoord: mapRouting.startCoord
-    property alias destCoord: mapRouting.destCoord
-    property alias destination: mapRouting.destination
     property var currentLocation
 
+    property Helper helper: Helper {}
+
     signal openSearchTextInput()
     signal maximizeMap()
     signal startNavigationRequested()
     signal stopNavigationRequested()
-    signal showRouteRequested()
+    signal showRouteRequested(var destCoord, var description)
 
     function zoomIn() {
         mainMap.zoomLevel += 1.0;
@@ -96,16 +106,9 @@ Item {
             console.warn("Map error:", error, errorString)
         }
 
-        MapRouting {
-            id: mapRouting
-            currentLocationCoord: root.currentLocation
-            homeCoord: header.homeAddressData
-            workCoord: header.workAddressData
-        }
-
         MapItemView {
             autoFitViewport: true
-            model: root.guidanceMode ? mapRouting.model : null
+            model: root.guidanceMode ? root.model : null
             delegate: MapRoute {
                 route: routeData
                 line.color: "#798bd9"
@@ -118,12 +121,12 @@ Item {
         MapQuickItem {
             id: destMarker
             anchorPoint: Qt.point(markerImage.width * 0.5, markerImage.height * 0.8)
-            coordinate: mapRouting.destCoord ? mapRouting.destCoord : QtPositioning.coordinate()
-            visible: root.navigationMode && mapRouting.destCoord.isValid
+            coordinate: root.destCoord ? root.destCoord : QtPositioning.coordinate()
+            visible: root.navigationMode && root.destCoord.isValid
 
             sourceItem: Image {
                 id: markerImage
-                source: Qt.resolvedUrl("assets/pin-destination.png")
+                source: Qt.resolvedUrl("../assets/pin-destination.png")
                 width: 139/2
                 height: 161/2
             }
@@ -132,17 +135,17 @@ Item {
         MapQuickItem {
             id: posMarker
             anchorPoint: Qt.point(posImage.width * 0.5, posImage.height * 0.5)
-            coordinate: mapRouting.routeSegments && mapRouting.routeSegments[0] ? mapRouting.routeSegments[0].path[0]
-                                                                                : QtPositioning.coordinate()
+            coordinate: root.routeSegments && root.routeSegments[0] ? root.routeSegments[0].path[0]
+                                                                       : QtPositioning.coordinate()
             visible: root.guidanceMode
 
             sourceItem: Image {
                 id: posImage
-                source: Qt.resolvedUrl("assets/pin-your-position.png")
+                source: Qt.resolvedUrl("../assets/pin-your-position.png")
                 width: 116/2
                 height: 135/2
             }
-            rotation: mapRouting.routeSegments ? mapRouting.routeSegments[0].path[0].azimuthTo(mapRouting.routeSegments[0].path[1])
+            rotation: root.routeSegments ? root.routeSegments[0].path[0].azimuthTo(root.routeSegments[0].path[1])
                                                : 0
         }
     }
@@ -150,7 +153,7 @@ Item {
     Image {
         id: mask
         anchors.fill: mainMap
-        source: Style.localAsset("bg-home-navigation-overlay", NeptuneStyle.theme)
+        source: helper.localAsset("bg-home-navigation-overlay", NeptuneStyle.theme)
         visible: root.state === "Maximized"
         scale: root.state === "Maximized" ? 1 : 1.6
         Behavior on scale {
@@ -158,7 +161,7 @@ Item {
         }
     }
 
-    MapHeader {
+    MapHeaderPanel {
         id: header
         anchors.left: parent.left
         anchors.right: parent.right
@@ -174,11 +177,11 @@ Item {
         navigationMode: root.navigationMode
         guidanceMode: root.guidanceMode
         currentLocation: root.currentLocation
-        destination: mapRouting.destination
-        routeDistance: mapRouting.routeDistance
-        routeTime: mapRouting.routeTime
-        homeRouteTime: mapRouting.homeRouteTime
-        workRouteTime: mapRouting.workRouteTime
+        destination: root.destination
+        routeDistance: root.routeDistance
+        routeTime: root.routeTime
+        homeRouteTime: root.homeRouteTime
+        workRouteTime: root.workRouteTime
 
         onOpenSearchTextInput: root.openSearchTextInput()
         onStartNavigation: {
@@ -192,11 +195,8 @@ Item {
             root.guidanceMode = false;
         }
         onShowRoute: {
-            root.showRouteRequested();
+            root.showRouteRequested(destCoord, description);
             root.center = destCoord;
-            root.startCoord = root.currentLocation;
-            root.destCoord = destCoord;
-            root.destination = description;
             root.navigationMode = true;
             root.maximizeMap();
         }
@@ -213,9 +213,9 @@ Item {
         visible: opacity > 0
         background: Image {
             fillMode: Image.Pad
-            source: Style.localAsset("floating-button-bg", NeptuneStyle.theme)
+            source: helper.localAsset("floating-button-bg", NeptuneStyle.theme)
         }
-        symbol: checked ? Qt.resolvedUrl("assets/ic-3D_ON.png") : Qt.resolvedUrl("assets/ic-3D_OFF.png")
+        symbol: checked ? Qt.resolvedUrl("../assets/ic-3D_ON.png") : Qt.resolvedUrl("../assets/ic-3D_OFF.png")
         onClicked: mainMap.tilt = checked ? mainMap.maximumTilt : mainMap.minimumTilt;
     }
 
diff --git a/apps/com.pelagicore.qtlocation/MapHeader.qml b/apps/com.pelagicore.qtlocation/panels/MapHeaderPanel.qml
index f5158404..7f085bf9 100644
--- a/apps/com.pelagicore.qtlocation/MapHeader.qml
+++ b/apps/com.pelagicore.qtlocation/panels/MapHeaderPanel.qml
@@ -73,7 +73,7 @@ Item {
         anchors.top: parent.top
         anchors.topMargin: Style.vspan(210/80)
         active: root.state === "Maximized"
-        sourceComponent: HeaderBackgroundMaximized {
+        sourceComponent: HeaderBackgroundMaximizedPanel {
             navigationMode: root.navigationMode
             guidanceMode: root.guidanceMode
             destinationButtonrowHeight: root.destinationButtonrowHeight
@@ -86,7 +86,7 @@ Item {
         anchors.right: parent.right
         anchors.top: parent.top
         active: root.state === "Widget2Rows" || root.state === "Widget3Rows"
-        sourceComponent: HeaderBackgroundWidget {
+        sourceComponent: HeaderBackgroundWidgetPanel {
             state: root.state
         }
     }
@@ -99,7 +99,7 @@ Item {
         anchors.top: headerBackgroundFullscreen.top
         anchors.topMargin: Style.vspan(1.4)
         anchors.horizontalCenter: headerBackgroundFullscreen.horizontalCenter
-        sourceComponent: NavigationSearch {
+        sourceComponent: NavigationSearchPanel {
             onOpenSearchTextInput: root.openSearchTextInput()
         }
     }
@@ -112,7 +112,7 @@ Item {
         anchors.top: headerBackgroundWidget.top
         anchors.topMargin: Style.vspan(.6)
         anchors.horizontalCenter: headerBackgroundWidget.horizontalCenter
-        sourceComponent: NavigationSearch {
+        sourceComponent: NavigationSearchPanel {
             onOpenSearchTextInput: root.openSearchTextInput()
         }
     }
@@ -122,7 +122,7 @@ Item {
         anchors.fill: headerBackgroundFullscreen
         anchors.rightMargin: Style.hspan(.5)
         active: headerBackgroundFullscreen.active && root.navigationMode
-        sourceComponent: NavigationConfirm {
+        sourceComponent: NavigationConfirmPanel {
             guidanceMode: root.guidanceMode
             destination: root.destination
             routeDistance: root.routeDistance
@@ -143,7 +143,7 @@ Item {
         anchors.rightMargin: Style.hspan(1.5)
         height: root.destinationButtonrowHeight
         active: headerBackgroundFullscreen.active && !root.navigationMode
-        sourceComponent: FavoriteDestinationButtons {
+        sourceComponent: FavDestinationButtonsPanel {
             homeAddressData: root.homeAddressData
             workAddressData: root.workAddressData
             homeRouteTime: root.homeRouteTime
@@ -162,7 +162,7 @@ Item {
         anchors.rightMargin: Style.hspan(1.5)
         height: root.destinationButtonrowHeight
         active: headerBackgroundWidget.active && root.state === "Widget3Rows"
-        sourceComponent: FavoriteDestinationButtons {
+        sourceComponent: FavDestinationButtonsPanel {
             homeAddressData: root.homeAddressData
             workAddressData: root.workAddressData
             homeRouteTime: root.homeRouteTime
diff --git a/apps/com.pelagicore.qtlocation/NavigationConfirm.qml b/apps/com.pelagicore.qtlocation/panels/NavigationConfirmPanel.qml
index d894c185..6d13a73a 100644
--- a/apps/com.pelagicore.qtlocation/NavigationConfirm.qml
+++ b/apps/com.pelagicore.qtlocation/panels/NavigationConfirmPanel.qml
@@ -36,6 +36,7 @@ import QtQuick.Layouts 1.3
 import controls 1.0 as NeptuneControls
 import utils 1.0
 import com.pelagicore.styles.neptune 3.0
+import "../helpers"
 
 Row {
     id: root
@@ -44,6 +45,7 @@ Row {
     property string destination: ""
     property string routeDistance: ""
     property string routeTime: ""
+    property Helper helper: Helper {}
 
     signal startNavigation()
     signal stopNavigation()
@@ -54,7 +56,7 @@ Row {
         width: Style.hspan(.9)
         height: width
         visible: root.guidanceMode
-        symbol: Qt.resolvedUrl("assets/ic-end-route.png")
+        symbol: Qt.resolvedUrl("../assets/ic-end-route.png")
         onClicked: root.stopNavigation()
     }
 
@@ -106,7 +108,7 @@ Row {
                 Image {
                     anchors.verticalCenter: parent.verticalCenter
                     fillMode: Image.Pad
-                    source: Style.localAsset("ic-start-navigation", NeptuneStyle.theme)
+                    source: helper.localAsset("ic-start-navigation", NeptuneStyle.theme)
                     opacity: startNavigationButton.enabled ? NeptuneStyle.fontOpacityHigh : NeptuneStyle.fontOpacityDisabled
                 }
                 Label {
diff --git a/apps/com.pelagicore.qtlocation/NavigationSearch.qml b/apps/com.pelagicore.qtlocation/panels/NavigationSearchPanel.qml
index fccda397..3820f504 100644
--- a/apps/com.pelagicore.qtlocation/NavigationSearch.qml
+++ b/apps/com.pelagicore.qtlocation/panels/NavigationSearchPanel.qml
@@ -35,10 +35,12 @@ import QtQuick.Controls 2.2
 import controls 1.0 as NeptuneControls
 import utils 1.0
 import com.pelagicore.styles.neptune 3.0
+import "../helpers"
 
 Row {
     id: root
 
+    property Helper helper: Helper {}
     signal openSearchTextInput()
 
     spacing: Style.hspan(.5)
@@ -70,7 +72,7 @@ Row {
                 Image {
                     anchors.verticalCenter: parent.verticalCenter
                     fillMode: Image.Pad
-                    source: Style.localAsset("ic-search", NeptuneStyle.theme)
+                    source: helper.localAsset("ic-search", NeptuneStyle.theme)
                 }
                 Label {
                     anchors.verticalCenter: parent.verticalCenter
diff --git a/apps/com.pelagicore.qtlocation/panels/SearchOverlayPanel.qml b/apps/com.pelagicore.qtlocation/panels/SearchOverlayPanel.qml
new file mode 100644
index 00000000..bb171f07
--- /dev/null
+++ b/apps/com.pelagicore.qtlocation/panels/SearchOverlayPanel.qml
@@ -0,0 +1,118 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import QtLocation 5.9
+
+import controls 1.0
+import utils 1.0
+import com.pelagicore.styles.neptune 3.0
+
+import "../helpers"
+import "../controls"
+
+ColumnLayout {
+    id: root
+
+    property GeocodeModel model
+
+    spacing: Style.vspan(1)
+
+    signal backButtonClicked()
+    signal searchFieldAccepted()
+    signal escapePressed()
+    signal searchQueryChanged(var searchQuery)
+    signal itemClicked(var index, string addressText, var coordinate, var boundingBox)
+
+    Tool {
+        anchors.left: parent.left
+        anchors.leftMargin: Style.hspan(1)
+        symbol: Style.symbol("ic_back")
+        text: qsTr("Back")
+        onClicked: root.backButtonClicked()
+    }
+
+    MapSearchTextField {
+        id: searchField
+        anchors.left: parent.left
+        anchors.leftMargin: Style.hspan(2)
+        anchors.right: parent.right
+        anchors.rightMargin: Style.hspan(2)
+        selectByMouse: true
+        focus: root.visible
+        busy: root.model.status === GeocodeModel.Loading
+        onTextChanged: {
+            if (searchField.text.length > 1) {
+                searchTimer.restart();
+            } else {
+                searchTimer.stop();
+            }
+        }
+        onAccepted: root.searchFieldAccepted()
+        Keys.onEscapePressed: root.escapePressed()
+    }
+
+    ListView {
+        id: searchResultsList
+        Layout.fillHeight: true
+        anchors.left: parent.left
+        anchors.leftMargin: Style.hspan(2)
+        anchors.right: parent.right
+        anchors.rightMargin: Style.hspan(2)
+        clip: true
+        visible: root.visible
+        model: root.model
+        delegate: ListItem {
+            id: itemDelegate
+            width: parent.width
+            height: Style.vspan(1.5)
+            readonly property string addressText: locationData.address.text
+            readonly property string city: locationData.address.city
+            readonly property string country: locationData.address.country
+            text: addressText
+            subText: itemDelegate.city !== "" ? itemDelegate.city + ", " + itemDelegate.country : itemDelegate.country;
+            onClicked: {
+                root.itemClicked(index, itemDelegate.addressText, locationData.coordinate, locationData.boundingBox)
+            }
+        }
+        ScrollIndicator.vertical: ScrollIndicator {}
+    }
+
+    Timer {
+        id: searchTimer
+        interval: 500
+        onTriggered: {
+            root.searchQueryChanged(searchField.text)
+        }
+    }
+}
diff --git a/apps/com.pelagicore.qtlocation/MapRouting.qml b/apps/com.pelagicore.qtlocation/stores/MapStore.qml
index 90cee085..90cee085 100644
--- a/apps/com.pelagicore.qtlocation/MapRouting.qml
+++ b/apps/com.pelagicore.qtlocation/stores/MapStore.qml
diff --git a/apps/com.pelagicore.qtlocation/Maps.qml b/apps/com.pelagicore.qtlocation/views/MapView.qml
index 84cc3d8d..e07ab71c 100644
--- a/apps/com.pelagicore.qtlocation/Maps.qml
+++ b/apps/com.pelagicore.qtlocation/views/MapView.qml
@@ -44,24 +44,40 @@ import animations 1.0
 
 import com.pelagicore.styles.neptune 3.0
 
+import "../controls"
+import "../panels"
+import "../stores"
+import "../helpers"
+
 Item {
     id: root
 
     property bool offlineMapsEnabled
     onOfflineMapsEnabledChanged: getAvailableMapsAndLocation()
 
+    property MapStore store
+
     // props for secondary window
-    property alias mapInteractive: mainMap.mapInteractive
-    property alias mapCenter: mainMap.center
-    property alias mapZoomLevel: mainMap.zoomLevel
-    property alias mapTilt: mainMap.tilt
-    property alias mapBearing: mainMap.bearing
-    readonly property alias mapReady: mainMap.mapReady
+    property alias mapInteractive: mapBoxView.mapInteractive
+    property alias mapCenter: mapBoxView.center
+    property alias mapZoomLevel: mapBoxView.zoomLevel
+    property alias mapTilt: mapBoxView.tilt
+    property alias mapBearing: mapBoxView.bearing
+    readonly property alias mapReady: mapBoxView.mapReady
+    readonly property alias currentLocation: priv.positionCoordinate
 
     property bool searchViewEnabled: false
+    property Helper helper: Helper {}
 
     signal maximizeMap()
 
+    Component.onCompleted: {
+        root.store.homeCoord = mapBoxView.mapHeader.homeAddressData;
+        root.store.workCoord = mapBoxView.mapHeader.workAddressData;
+    }
+
+    onStateChanged: root.searchViewEnabled = false;
+
     function fetchCurrentLocation() { // PositionSource doesn't work on Linux
         var req = new XMLHttpRequest;
         req.onreadystatechange = function() {
@@ -80,11 +96,11 @@ Item {
     }
 
     function getAvailableMapsAndLocation() {
-        if (mainMap.mapReady) {
+        if (mapBoxView.mapReady) {
             mapTypeModel.clear();
             console.info("Supported map types:");
-            for (var i = 0; i < mainMap.supportedMapTypes.length; i++) {
-                var map = mainMap.supportedMapTypes[i];
+            for (var i = 0; i < mapBoxView.supportedMapTypes.length; i++) {
+                var map = mapBoxView.supportedMapTypes[i];
                 mapTypeModel.append({"name": map.name, "data": map}) // fill the map type model
                 console.info("\t", map.name, ", description:", map.description, ", style:", map.style, ", night mode:", map.night);
             }
@@ -95,7 +111,7 @@ Item {
     }
 
     function getMapType(name) {
-        if (!mainMap.mapReady || !mapTypeModel.count) {
+        if (!mapBoxView.mapReady || !mapTypeModel.count) {
             return
         }
         for (var i = 0; i < mapTypeModel.count; i++) {
@@ -163,15 +179,23 @@ Item {
         limit: 20
     }
 
-    MapView {
-        id: mainMap
+    MapBoxPanel {
+        id: mapBoxView
         anchors.fill: parent
         plugin: mapPlugin
-        routingPlugin: geocodePlugin
         center: priv.positionCoordinate
         state: root.state
         currentLocation: priv.positionCoordinate
         offlineMapsEnabled: root.offlineMapsEnabled
+        destination: root.store.destination
+        model: root.store.model
+        routeDistance: root.store.routeDistance
+        routeTime: root.store.routeTime
+        routeSegments: root.store.routeSegments
+        homeRouteTime: root.store.homeRouteTime
+        workRouteTime: root.store.workRouteTime
+        destCoord: root.store.destCoord
+
         activeMapType: {
             if (!mapReady || plugin.name !== "mapboxgl") {
                 return supportedMapTypes[0];
@@ -187,14 +211,20 @@ Item {
         }
         onShowRouteRequested: {
             priv.originalPosition = priv.positionCoordinate;
+            root.store.destCoord = destCoord;
+            root.store.destination = description;
+            root.store.startCoord = mapBoxView.currentLocation;
         }
         onStopNavigationRequested: {
             priv.positionCoordinate = priv.originalPosition;
-            mainMap.center = priv.positionCoordinate;
+            mapBoxView.center = priv.positionCoordinate;
         }
 
         onMapReadyChanged: getAvailableMapsAndLocation();
-        onMaximizeMap: root.maximizeMap()
+        onMaximizeMap: root.maximizeMap();
+        Component.onCompleted: {
+            root.store.routingPlugin = geocodePlugin
+        }
     }
 
     NeptuneControls.Tool {
@@ -205,17 +235,17 @@ Item {
         opacity: root.state === "Widget1Row" ? 1 : 0
         Behavior on opacity { DefaultNumberAnimation {} }
         visible: opacity > 0
-        symbol: Qt.resolvedUrl("assets/ic-search.png")
+        symbol: Qt.resolvedUrl("../assets/ic-search.png")
         background: Image {
             fillMode: Image.Pad
-            source: Style.localAsset("floating-button-bg", NeptuneStyle.theme)
+            source: helper.localAsset("floating-button-bg", NeptuneStyle.theme)
         }
         onClicked: root.maximizeMap()
     }
 
     FastBlur {
-        anchors.fill: mainMap
-        source: mainMap
+        anchors.fill: mapBoxView
+        source: mapBoxView
         radius: 64
         visible: searchViewEnabled
     }
@@ -231,93 +261,40 @@ Item {
         visible: searchViewEnabled
     }
 
-    ColumnLayout {
+    SearchOverlayPanel {
         id: searchOverlay
         anchors.fill: root
         anchors.topMargin: Style.vspan(1)
         visible: searchViewEnabled
         spacing: Style.vspan(1)
+        model: geocodeModel
 
-        NeptuneControls.Tool {
-            anchors.left: parent.left
-            anchors.leftMargin: Style.hspan(1)
-            symbol: Style.symbol("ic_back")
-            onClicked: searchViewEnabled = false
-            text: qsTr("Back")
-        }
+        onBackButtonClicked: searchViewEnabled = false
 
-        MapSearchTextField {
-            id: searchField
-            anchors.left: parent.left
-            anchors.leftMargin: Style.hspan(2)
-            anchors.right: parent.right
-            anchors.rightMargin: Style.hspan(2)
-            selectByMouse: true
-            focus: searchViewEnabled
-            busy: geocodeModel.status == GeocodeModel.Loading
-            onAccepted: {
-                geocodeModel.query = searchField.text;
-                geocodeModel.update();
-                searchViewEnabled = false;
-            }
-            onTextChanged: {
-                if (text.length > 1) {
-                    searchTimer.restart();
-                } else {
-                    searchTimer.stop();
-                    geocodeModel.reset();
-                }
-            }
-            Keys.onEscapePressed: searchViewEnabled = false
+        onSearchFieldAccepted: {
+            geocodeModel.query = searchOverlay.searchQuery;
+            geocodeModel.update();
+            searchViewEnabled = false;
         }
 
-        ListView {
-            id: searchResultsList
-            Layout.fillHeight: true
-            anchors.left: parent.left
-            anchors.leftMargin: Style.hspan(2)
-            anchors.right: parent.right
-            anchors.rightMargin: Style.hspan(2)
-            clip: true
-            model: geocodeModel
-            visible: searchViewEnabled
-            state: root.state
-            delegate: NeptuneControls.ListItem {
-                id: itemDelegate
-                width: parent.width
-                height: Style.vspan(1.5)
-                readonly property string addressText: locationData.address.text
-                readonly property string city: locationData.address.city
-                readonly property string country: locationData.address.country
-                text: addressText
-                subText: itemDelegate.city !== "" ? itemDelegate.city + ", " + itemDelegate.country : itemDelegate.country;
-                onClicked: {
-                    searchViewEnabled = false;
-                    mainMap.center = locationData.coordinate;
-                    mainMap.startCoord = priv.positionCoordinate;
-                    mainMap.destCoord = locationData.coordinate;
-                    mainMap.destination = itemDelegate.addressText;
-                    if (locationData.boundingBox.isValid) {
-                        mainMap.visibleRegion = locationData.boundingBox;
-                    }
-                    mainMap.navigationMode = true;
-                }
-            }
-            onStateChanged: {
-                if (state !== "Maximized") {
-                    searchViewEnabled = false;
-                }
-            }
-            ScrollIndicator.vertical: ScrollIndicator {}
+        onSearchQueryChanged: {
+            geocodeModel.reset();
+            geocodeModel.query = searchQuery;
+            geocodeModel.update();
         }
-    }
 
-    Timer {
-        id: searchTimer
-        interval: 500
-        onTriggered: {
-            geocodeModel.query = searchField.text;
-            geocodeModel.update();
+        onEscapePressed: searchViewEnabled = false
+
+        onItemClicked: {
+            searchViewEnabled = false;
+            mapBoxView.center = coordinate;
+            root.store.startCoord = priv.positionCoordinate;
+            root.store.destCoord = coordinate;
+            root.store.destination = addressText;
+            if (boundingBox.isValid) {
+                mapBoxView.visibleRegion = boundingBox;
+            }
+            mapBoxView.navigationMode = true;
         }
     }
 }
diff --git a/imports/assets/translations/cs_CZ.ts b/imports/assets/translations/cs_CZ.ts
index 0a0fc739..852c8489 100644
--- a/imports/assets/translations/cs_CZ.ts
+++ b/imports/assets/translations/cs_CZ.ts
@@ -366,14 +366,25 @@ UX na cestu</translation>
     </message>
 </context>
 <context>
+    <name>FavDestinationButtonsPanel</name>
+    <message>
+        <source>Home</source>
+        <translation type="unfinished">Domů</translation>
+    </message>
+    <message>
+        <source>Work</source>
+        <translation type="unfinished">Práce</translation>
+    </message>
+</context>
+<context>
     <name>FavoriteDestinationButtons</name>
     <message>
         <source>Home</source>
-        <translation>Domů</translation>
+        <translation type="vanished">Domů</translation>
     </message>
     <message>
         <source>Work</source>
-        <translation>Práce</translation>
+        <translation type="vanished">Práce</translation>
     </message>
 </context>
 <context>
@@ -538,7 +549,42 @@ UX na cestu</translation>
     <name>MapRouting</name>
     <message numerus="yes">
         <source>%n kilometer(s)</source>
-        <translation>
+        <translation type="vanished">
+            <numerusform>%n kilometr</numerusform>
+            <numerusform>%n kilometry</numerusform>
+            <numerusform>%n kilometrů</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n day(s)</source>
+        <translation type="vanished">
+            <numerusform>%n den</numerusform>
+            <numerusform>%n dny</numerusform>
+            <numerusform>%n dnů</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n hour(s)</source>
+        <translation type="vanished">
+            <numerusform>%n hodina</numerusform>
+            <numerusform>%n hodiny</numerusform>
+            <numerusform>%n hodin</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n minute(s)</source>
+        <translation type="vanished">
+            <numerusform>%n minuta</numerusform>
+            <numerusform>%n minuty</numerusform>
+            <numerusform>%n minut</numerusform>
+        </translation>
+    </message>
+</context>
+<context>
+    <name>MapStore</name>
+    <message numerus="yes">
+        <source>%n kilometer(s)</source>
+        <translation type="unfinished">
             <numerusform>%n kilometr</numerusform>
             <numerusform>%n kilometry</numerusform>
             <numerusform>%n kilometrů</numerusform>
@@ -546,7 +592,7 @@ UX na cestu</translation>
     </message>
     <message numerus="yes">
         <source>%n day(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n den</numerusform>
             <numerusform>%n dny</numerusform>
             <numerusform>%n dnů</numerusform>
@@ -554,7 +600,7 @@ UX na cestu</translation>
     </message>
     <message numerus="yes">
         <source>%n hour(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n hodina</numerusform>
             <numerusform>%n hodiny</numerusform>
             <numerusform>%n hodin</numerusform>
@@ -562,7 +608,7 @@ UX na cestu</translation>
     </message>
     <message numerus="yes">
         <source>%n minute(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n minuta</numerusform>
             <numerusform>%n minuty</numerusform>
             <numerusform>%n minut</numerusform>
@@ -598,10 +644,6 @@ UX na cestu</translation>
         <source>Where do you wanna go today?</source>
         <translation type="vanished">Kam se chcete vydat dnes?</translation>
     </message>
-    <message>
-        <source>Back</source>
-        <translation type="unfinished"></translation>
-    </message>
 </context>
 <context>
     <name>MonitorView</name>
@@ -766,18 +808,36 @@ UX na cestu</translation>
     <name>NavigationConfirm</name>
     <message>
         <source>Start Navigation</source>
-        <translation>Spustit navigaci</translation>
+        <translation type="vanished">Spustit navigaci</translation>
+    </message>
+</context>
+<context>
+    <name>NavigationConfirmPanel</name>
+    <message>
+        <source>Start Navigation</source>
+        <translation type="unfinished">Spustit navigaci</translation>
     </message>
 </context>
 <context>
     <name>NavigationSearch</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation>Kam se chcete vydat dnes?</translation>
+        <translation type="vanished">Kam se chcete vydat dnes?</translation>
+    </message>
+    <message>
+        <source>Search</source>
+        <translation type="vanished">Hledat</translation>
+    </message>
+</context>
+<context>
+    <name>NavigationSearchPanel</name>
+    <message>
+        <source>Where do you wanna go today?</source>
+        <translation type="unfinished">Kam se chcete vydat dnes?</translation>
     </message>
     <message>
         <source>Search</source>
-        <translation>Hledat</translation>
+        <translation type="unfinished">Hledat</translation>
     </message>
 </context>
 <context>
@@ -901,6 +961,13 @@ UX na cestu</translation>
     </message>
 </context>
 <context>
+    <name>SearchOverlayPanel</name>
+    <message>
+        <source>Back</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+<context>
     <name>SettingsModel</name>
     <message>
         <source>Driver 1</source>
diff --git a/imports/assets/translations/de_DE.ts b/imports/assets/translations/de_DE.ts
index 52dbc59e..5289c957 100644
--- a/imports/assets/translations/de_DE.ts
+++ b/imports/assets/translations/de_DE.ts
@@ -309,7 +309,7 @@ UX to the road</source>
     </message>
 </context>
 <context>
-    <name>FavoriteDestinationButtons</name>
+    <name>FavDestinationButtonsPanel</name>
     <message>
         <source>Home</source>
         <translation type="unfinished"></translation>
@@ -420,7 +420,7 @@ UX to the road</source>
     </message>
 </context>
 <context>
-    <name>MapRouting</name>
+    <name>MapStore</name>
     <message numerus="yes">
         <source>%n kilometer(s)</source>
         <translation type="unfinished">
@@ -463,10 +463,6 @@ UX to the road</source>
         <source>Where do you wanna go today?</source>
         <translation type="vanished">Wo soll es heute hingehen?</translation>
     </message>
-    <message>
-        <source>Back</source>
-        <translation type="unfinished"></translation>
-    </message>
 </context>
 <context>
     <name>MonitorView</name>
@@ -581,7 +577,7 @@ UX to the road</source>
     </message>
 </context>
 <context>
-    <name>NavigationConfirm</name>
+    <name>NavigationConfirmPanel</name>
     <message>
         <source>Start Navigation</source>
         <translation type="unfinished"></translation>
@@ -591,6 +587,13 @@ UX to the road</source>
     <name>NavigationSearch</name>
     <message>
         <source>Where do you wanna go today?</source>
+        <translation type="obsolete">Wo soll es heute hingehen?</translation>
+    </message>
+</context>
+<context>
+    <name>NavigationSearchPanel</name>
+    <message>
+        <source>Where do you wanna go today?</source>
         <translation type="unfinished">Wo soll es heute hingehen?</translation>
     </message>
     <message>
@@ -677,6 +680,13 @@ UX to the road</source>
     </message>
 </context>
 <context>
+    <name>SearchOverlayPanel</name>
+    <message>
+        <source>Back</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+<context>
     <name>SettingsModel</name>
     <message>
         <source>Hill Descent Control</source>
diff --git a/imports/assets/translations/en_GB.ts b/imports/assets/translations/en_GB.ts
index 62d81b36..ec95cd18 100644
--- a/imports/assets/translations/en_GB.ts
+++ b/imports/assets/translations/en_GB.ts
@@ -213,7 +213,7 @@ UX to the road</source>
     </message>
 </context>
 <context>
-    <name>FavoriteDestinationButtons</name>
+    <name>FavDestinationButtonsPanel</name>
     <message>
         <source>Home</source>
         <translation type="unfinished"></translation>
@@ -282,38 +282,62 @@ UX to the road</source>
     <name>MapRouting</name>
     <message numerus="yes">
         <source>%n kilometer(s)</source>
-        <translation>
+        <translation type="vanished">
             <numerusform>%n kilometer</numerusform>
             <numerusform>%n kilometers</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n day(s)</source>
-        <translation>
+        <translation type="vanished">
             <numerusform>%n day</numerusform>
             <numerusform>%n days</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n hour(s)</source>
-        <translation>
+        <translation type="vanished">
             <numerusform>%n hour</numerusform>
             <numerusform>%n hours</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n minute(s)</source>
-        <translation>
+        <translation type="vanished">
             <numerusform>%n minute</numerusform>
             <numerusform>%n minutes</numerusform>
         </translation>
     </message>
 </context>
 <context>
-    <name>Maps</name>
-    <message>
-        <source>Back</source>
-        <translation type="unfinished"></translation>
+    <name>MapStore</name>
+    <message numerus="yes">
+        <source>%n kilometer(s)</source>
+        <translation type="unfinished">
+            <numerusform>%n kilometer</numerusform>
+            <numerusform>%n kilometers</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n day(s)</source>
+        <translation type="unfinished">
+            <numerusform>%n day</numerusform>
+            <numerusform>%n days</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n hour(s)</source>
+        <translation type="unfinished">
+            <numerusform>%n hour</numerusform>
+            <numerusform>%n hours</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n minute(s)</source>
+        <translation type="unfinished">
+            <numerusform>%n minute</numerusform>
+            <numerusform>%n minutes</numerusform>
+        </translation>
     </message>
 </context>
 <context>
@@ -380,14 +404,14 @@ UX to the road</source>
     </message>
 </context>
 <context>
-    <name>NavigationConfirm</name>
+    <name>NavigationConfirmPanel</name>
     <message>
         <source>Start Navigation</source>
         <translation type="unfinished"></translation>
     </message>
 </context>
 <context>
-    <name>NavigationSearch</name>
+    <name>NavigationSearchPanel</name>
     <message>
         <source>Where do you wanna go today?</source>
         <translation type="unfinished"></translation>
@@ -476,6 +500,13 @@ UX to the road</source>
     </message>
 </context>
 <context>
+    <name>SearchOverlayPanel</name>
+    <message>
+        <source>Back</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+<context>
     <name>SettingsModel</name>
     <message>
         <source>Hill Descent Control</source>
diff --git a/imports/assets/translations/en_US.ts b/imports/assets/translations/en_US.ts
index 72ec78ec..e8653dd2 100644
--- a/imports/assets/translations/en_US.ts
+++ b/imports/assets/translations/en_US.ts
@@ -213,7 +213,7 @@ UX to the road</source>
     </message>
 </context>
 <context>
-    <name>FavoriteDestinationButtons</name>
+    <name>FavDestinationButtonsPanel</name>
     <message>
         <source>Home</source>
         <translation type="unfinished"></translation>
@@ -282,38 +282,62 @@ UX to the road</source>
     <name>MapRouting</name>
     <message numerus="yes">
         <source>%n kilometer(s)</source>
-        <translation>
+        <translation type="vanished">
             <numerusform>%n kilometer</numerusform>
             <numerusform>%n kilometers</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n day(s)</source>
-        <translation>
+        <translation type="vanished">
             <numerusform>%n day</numerusform>
             <numerusform>%n days</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n hour(s)</source>
-        <translation>
+        <translation type="vanished">
             <numerusform>%n hour</numerusform>
             <numerusform>%n hours</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n minute(s)</source>
-        <translation>
+        <translation type="vanished">
             <numerusform>%n minute</numerusform>
             <numerusform>%n minutes</numerusform>
         </translation>
     </message>
 </context>
 <context>
-    <name>Maps</name>
-    <message>
-        <source>Back</source>
-        <translation type="unfinished"></translation>
+    <name>MapStore</name>
+    <message numerus="yes">
+        <source>%n kilometer(s)</source>
+        <translation type="unfinished">
+            <numerusform>%n kilometer</numerusform>
+            <numerusform>%n kilometers</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n day(s)</source>
+        <translation type="unfinished">
+            <numerusform>%n day</numerusform>
+            <numerusform>%n days</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n hour(s)</source>
+        <translation type="unfinished">
+            <numerusform>%n hour</numerusform>
+            <numerusform>%n hours</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n minute(s)</source>
+        <translation type="unfinished">
+            <numerusform>%n minute</numerusform>
+            <numerusform>%n minutes</numerusform>
+        </translation>
     </message>
 </context>
 <context>
@@ -373,14 +397,14 @@ UX to the road</source>
     </message>
 </context>
 <context>
-    <name>NavigationConfirm</name>
+    <name>NavigationConfirmPanel</name>
     <message>
         <source>Start Navigation</source>
         <translation type="unfinished"></translation>
     </message>
 </context>
 <context>
-    <name>NavigationSearch</name>
+    <name>NavigationSearchPanel</name>
     <message>
         <source>Where do you wanna go today?</source>
         <translation type="unfinished"></translation>
@@ -469,6 +493,13 @@ UX to the road</source>
     </message>
 </context>
 <context>
+    <name>SearchOverlayPanel</name>
+    <message>
+        <source>Back</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+<context>
     <name>SettingsModel</name>
     <message>
         <source>Driver 1</source>
diff --git a/imports/assets/translations/ja_JP.ts b/imports/assets/translations/ja_JP.ts
index b31d3061..f5b45faa 100644
--- a/imports/assets/translations/ja_JP.ts
+++ b/imports/assets/translations/ja_JP.ts
@@ -295,14 +295,25 @@ UX to the road</source>
     </message>
 </context>
 <context>
+    <name>FavDestinationButtonsPanel</name>
+    <message>
+        <source>Home</source>
+        <translation type="unfinished">ホーム</translation>
+    </message>
+    <message>
+        <source>Work</source>
+        <translation type="unfinished">作業</translation>
+    </message>
+</context>
+<context>
     <name>FavoriteDestinationButtons</name>
     <message>
         <source>Home</source>
-        <translation>ホーム</translation>
+        <translation type="vanished">ホーム</translation>
     </message>
     <message>
         <source>Work</source>
-        <translation>作業</translation>
+        <translation type="vanished">作業</translation>
     </message>
 </context>
 <context>
@@ -432,25 +443,52 @@ UX to the road</source>
     <name>MapRouting</name>
     <message numerus="yes">
         <source>%n kilometer(s)</source>
-        <translation>
+        <translation type="vanished">
+            <numerusform>%nキロメートル</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n day(s)</source>
+        <translation type="vanished">
+            <numerusform>%n日</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n hour(s)</source>
+        <translation type="vanished">
+            <numerusform>%n時間</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n minute(s)</source>
+        <translation type="vanished">
+            <numerusform>%n分</numerusform>
+        </translation>
+    </message>
+</context>
+<context>
+    <name>MapStore</name>
+    <message numerus="yes">
+        <source>%n kilometer(s)</source>
+        <translation type="unfinished">
             <numerusform>%nキロメートル</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n day(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n日</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n hour(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n時間</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n minute(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n分</numerusform>
         </translation>
     </message>
@@ -468,10 +506,6 @@ UX to the road</source>
         <source>Where do you wanna go today?</source>
         <translation type="vanished">あなたはヒンジを握っていますか？</translation>
     </message>
-    <message>
-        <source>Back</source>
-        <translation type="unfinished"></translation>
-    </message>
 </context>
 <context>
     <name>MonitorView</name>
@@ -620,18 +654,36 @@ UX to the road</source>
     <name>NavigationConfirm</name>
     <message>
         <source>Start Navigation</source>
-        <translation>ナビゲーションを開始する</translation>
+        <translation type="vanished">ナビゲーションを開始する</translation>
+    </message>
+</context>
+<context>
+    <name>NavigationConfirmPanel</name>
+    <message>
+        <source>Start Navigation</source>
+        <translation type="unfinished">ナビゲーションを開始する</translation>
     </message>
 </context>
 <context>
     <name>NavigationSearch</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation>あなたはヒンジを握っていますか？</translation>
+        <translation type="vanished">あなたはヒンジを握っていますか？</translation>
     </message>
     <message>
         <source>Search</source>
-        <translation>探す</translation>
+        <translation type="vanished">探す</translation>
+    </message>
+</context>
+<context>
+    <name>NavigationSearchPanel</name>
+    <message>
+        <source>Where do you wanna go today?</source>
+        <translation type="unfinished">あなたはヒンジを握っていますか？</translation>
+    </message>
+    <message>
+        <source>Search</source>
+        <translation type="unfinished">探す</translation>
     </message>
 </context>
 <context>
@@ -732,6 +784,13 @@ UX to the road</source>
     </message>
 </context>
 <context>
+    <name>SearchOverlayPanel</name>
+    <message>
+        <source>Back</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+<context>
     <name>SettingsModel</name>
     <message>
         <source>Driver 1</source>
diff --git a/imports/assets/translations/ko_KR.ts b/imports/assets/translations/ko_KR.ts
index f5be3c59..95880da8 100644
--- a/imports/assets/translations/ko_KR.ts
+++ b/imports/assets/translations/ko_KR.ts
@@ -302,14 +302,25 @@ UX to the road</source>
     </message>
 </context>
 <context>
+    <name>FavDestinationButtonsPanel</name>
+    <message>
+        <source>Home</source>
+        <translation type="unfinished">집</translation>
+    </message>
+    <message>
+        <source>Work</source>
+        <translation type="unfinished">작업</translation>
+    </message>
+</context>
+<context>
     <name>FavoriteDestinationButtons</name>
     <message>
         <source>Home</source>
-        <translation>집</translation>
+        <translation type="vanished">집</translation>
     </message>
     <message>
         <source>Work</source>
-        <translation>작업</translation>
+        <translation type="vanished">작업</translation>
     </message>
 </context>
 <context>
@@ -439,25 +450,52 @@ UX to the road</source>
     <name>MapRouting</name>
     <message numerus="yes">
         <source>%n kilometer(s)</source>
-        <translation>
+        <translation type="vanished">
+            <numerusform>%n 킬로미터</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n day(s)</source>
+        <translation type="vanished">
+            <numerusform>%n 일</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n hour(s)</source>
+        <translation type="vanished">
+            <numerusform>%n 시간</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n minute(s)</source>
+        <translation type="vanished">
+            <numerusform>%n 분</numerusform>
+        </translation>
+    </message>
+</context>
+<context>
+    <name>MapStore</name>
+    <message numerus="yes">
+        <source>%n kilometer(s)</source>
+        <translation type="unfinished">
             <numerusform>%n 킬로미터</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n day(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n 일</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n hour(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n 시간</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n minute(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n 분</numerusform>
         </translation>
     </message>
@@ -475,10 +513,6 @@ UX to the road</source>
         <source>Where do you wanna go today?</source>
         <translation type="vanished">힌트 힌지를 해결 하시겠습니까?</translation>
     </message>
-    <message>
-        <source>Back</source>
-        <translation type="unfinished"></translation>
-    </message>
 </context>
 <context>
     <name>MonitorView</name>
@@ -627,18 +661,36 @@ UX to the road</source>
     <name>NavigationConfirm</name>
     <message>
         <source>Start Navigation</source>
-        <translation>내비게이션 시작</translation>
+        <translation type="vanished">내비게이션 시작</translation>
+    </message>
+</context>
+<context>
+    <name>NavigationConfirmPanel</name>
+    <message>
+        <source>Start Navigation</source>
+        <translation type="unfinished">내비게이션 시작</translation>
     </message>
 </context>
 <context>
     <name>NavigationSearch</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation>힌트 힌지를 해결 하시겠습니까?</translation>
+        <translation type="vanished">힌트 힌지를 해결 하시겠습니까?</translation>
     </message>
     <message>
         <source>Search</source>
-        <translation>발견</translation>
+        <translation type="vanished">발견</translation>
+    </message>
+</context>
+<context>
+    <name>NavigationSearchPanel</name>
+    <message>
+        <source>Where do you wanna go today?</source>
+        <translation type="unfinished">힌트 힌지를 해결 하시겠습니까?</translation>
+    </message>
+    <message>
+        <source>Search</source>
+        <translation type="unfinished">발견</translation>
     </message>
 </context>
 <context>
@@ -739,6 +791,13 @@ UX to the road</source>
     </message>
 </context>
 <context>
+    <name>SearchOverlayPanel</name>
+    <message>
+        <source>Back</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+<context>
     <name>SettingsModel</name>
     <message>
         <source>Driver 1</source>
diff --git a/imports/assets/translations/zh_CN.ts b/imports/assets/translations/zh_CN.ts
index a7bda2f2..5b2d31c0 100644
--- a/imports/assets/translations/zh_CN.ts
+++ b/imports/assets/translations/zh_CN.ts
@@ -302,14 +302,25 @@ UX to the road</source>
     </message>
 </context>
 <context>
+    <name>FavDestinationButtonsPanel</name>
+    <message>
+        <source>Home</source>
+        <translation type="unfinished">家</translation>
+    </message>
+    <message>
+        <source>Work</source>
+        <translation type="unfinished">工作</translation>
+    </message>
+</context>
+<context>
     <name>FavoriteDestinationButtons</name>
     <message>
         <source>Home</source>
-        <translation>家</translation>
+        <translation type="vanished">家</translation>
     </message>
     <message>
         <source>Work</source>
-        <translation>工作</translation>
+        <translation type="vanished">工作</translation>
     </message>
 </context>
 <context>
@@ -460,25 +471,52 @@ If it is wrong, you can just delete first two charactor, just ues &quot;源&quot
     <name>MapRouting</name>
     <message numerus="yes">
         <source>%n kilometer(s)</source>
-        <translation>
+        <translation type="vanished">
+            <numerusform>%n公里</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n day(s)</source>
+        <translation type="vanished">
+            <numerusform>%n天</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n hour(s)</source>
+        <translation type="vanished">
+            <numerusform>%n小时</numerusform>
+        </translation>
+    </message>
+    <message numerus="yes">
+        <source>%n minute(s)</source>
+        <translation type="vanished">
+            <numerusform>%n分钟</numerusform>
+        </translation>
+    </message>
+</context>
+<context>
+    <name>MapStore</name>
+    <message numerus="yes">
+        <source>%n kilometer(s)</source>
+        <translation type="unfinished">
             <numerusform>%n公里</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n day(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n天</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n hour(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n小时</numerusform>
         </translation>
     </message>
     <message numerus="yes">
         <source>%n minute(s)</source>
-        <translation>
+        <translation type="unfinished">
             <numerusform>%n分钟</numerusform>
         </translation>
     </message>
@@ -496,10 +534,6 @@ If it is wrong, you can just delete first two charactor, just ues &quot;源&quot
         <source>Where do you wanna go today?</source>
         <translation type="vanished">今天你想要去哪儿？</translation>
     </message>
-    <message>
-        <source>Back</source>
-        <translation type="unfinished"></translation>
-    </message>
 </context>
 <context>
     <name>MonitorView</name>
@@ -652,18 +686,36 @@ If it is wrong, you can just delete first two charactor, just ues &quot;源&quot
     <name>NavigationConfirm</name>
     <message>
         <source>Start Navigation</source>
-        <translation>开始导航</translation>
+        <translation type="vanished">开始导航</translation>
+    </message>
+</context>
+<context>
+    <name>NavigationConfirmPanel</name>
+    <message>
+        <source>Start Navigation</source>
+        <translation type="unfinished">开始导航</translation>
     </message>
 </context>
 <context>
     <name>NavigationSearch</name>
     <message>
         <source>Where do you wanna go today?</source>
-        <translation>今天你想要去哪儿？</translation>
+        <translation type="vanished">今天你想要去哪儿？</translation>
     </message>
     <message>
         <source>Search</source>
-        <translation>搜索</translation>
+        <translation type="vanished">搜索</translation>
+    </message>
+</context>
+<context>
+    <name>NavigationSearchPanel</name>
+    <message>
+        <source>Where do you wanna go today?</source>
+        <translation type="unfinished">今天你想要去哪儿？</translation>
+    </message>
+    <message>
+        <source>Search</source>
+        <translation type="unfinished">搜索</translation>
     </message>
 </context>
 <context>
@@ -779,6 +831,13 @@ If it is wrong, you can just delete first two charactor, just ues &quot;源&quot
     </message>
 </context>
 <context>
+    <name>SearchOverlayPanel</name>
+    <message>
+        <source>Back</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+<context>
     <name>SettingsModel</name>
     <message>
         <source>Driver 1</source>
diff --git a/imports/shared/utils/Style.qml b/imports/shared/utils/Style.qml
index 0bcb08cc..ec5bf44b 100644
--- a/imports/shared/utils/Style.qml
+++ b/imports/shared/utils/Style.qml
@@ -88,11 +88,6 @@ QtObject {
         return gfxUrl + name + themeStr + '.png'
     }
 
-    function localAsset(asset, theme) {
-        var themeStr = theme === NeptuneStyle.Dark ? "-dark" : "";
-        return "assets/" + asset + themeStr + '.png'
-    }
-
     function icon(name) {
         return drawableUrl + '/' + name + '.png';
     }