Rework the way Map is initialized

src/App.vue

@@ -91,7 +91,10 @@ export default {
             return this.$store.state.location.gpx.length > 0;
         },
         isMapLoaded() {
-            return this.$store.state.map.center.every(item => item !== null);
+            return (
+                this.$store.state.map.center.every(item => item !== null)
+                || this.$store.getters.getLastLocation
+            );
         },
         unsentReportsLength() {
             return this.$store.state.unsentReports.length;

src/components/Map.vue

@@ -78,7 +78,10 @@ export default {
         },
         olCenter() {
             // Compute center in OL coordinates system
-            return fromLonLat([this.center[1], this.center[0]]);
+            if (this.center.every(item => item !== null)) {
+                return fromLonLat([this.center[1], this.center[0]]);
+            }
+            return this.center;
         },
         olPolyline() {
             // Compute the polyline in OL coordinates system
@@ -135,10 +138,10 @@ export default {
             attribution: $t('map.attribution'),
             hasUserAutorotateMap: this.$store.state.settings.shouldAutorotateMap,
             isProgrammaticMove: true,
+            isRecenterButtonShown: false,
             map: null,
             maxZoom: constants.MAX_ZOOM,
             minZoom: constants.MIN_ZOOM,
-            isRecenterButtonShown: false,
             // Variables for easy access to map feature and layers
             accuracyFeature: null,
             reportsMarkersFeatures: {},
@@ -217,16 +220,16 @@ export default {
         },
         onMoveEnd() {
             const view = this.map.getView();
-            if (this.onMapCenterUpdate) {
+            if (this.onMapCenterManualUpdate && !this.isProgrammaticMove) {
                 const mapCenterLonLat = toLonLat(view.getCenter());
-                this.onMapCenterUpdate([mapCenterLonLat[1], mapCenterLonLat[0]]);
+                this.onMapCenterManualUpdate([mapCenterLonLat[1], mapCenterLonLat[0]]);
             }
             // Show recenter button and call the callback if zoom is updated manually
             const zoom = view.getZoom();
             if (zoom !== this.zoom) {
                 this.showRecenterButton();
-                if (this.onMapZoomUpdate) {
+                if (this.onMapZoomManualUpdate) {
-                    this.onMapZoomUpdate(zoom);
+                    this.onMapZoomManualUpdate(zoom);
                 }
             }
         },
@@ -236,7 +239,7 @@ export default {
             this.hideRecenterButton();
 
             const view = this.map.getView();
-            view.setCenter(this.olCenter);
+            view.setCenter(this.olPosition);
             if (this.isInAutorotateMap) {
                 view.setRotation(-this.headingInRadiansFromNorth);
             } else {
@@ -309,6 +312,9 @@ export default {
             }
         },
         showRecenterButton() {
+            if (!this.hasGeolocationTracking) {
+                return;
+            }
             if (!this.isRecenterButtonShown) {
                 this.isRecenterButtonShown = true;
             }
@@ -442,11 +448,12 @@ export default {
             type: Array,
             required: true,
         },
+        hasGeolocationTracking: Boolean,
         heading: Number, // in degrees, clockwise wrt north
         markers: Array,
         onPress: Function,
-        onMapCenterUpdate: Function,
+        onMapCenterManualUpdate: Function,
-        onMapZoomUpdate: Function,
+        onMapZoomManualUpdate: Function,
         polyline: Array,
         positionLatLng: Array,
         reportLatLng: Array,
@@ -499,7 +506,7 @@ export default {
             }
 
             const view = this.map.getView();
-            if (!this.isRecenterButtonShown) {
+            if (!this.isRecenterButtonShown && newOlCenter.every(item => item !== null)) {
                 // Eventually display closest report
                 const isReportDetailsAlreadyShown = this.$store.state.reportDetails.id;
                 const isReportDetailsOpenedByUser = this.$store.state.reportDetails.userAsked;
@@ -536,6 +543,9 @@ export default {
                     view.setRotation(0);
                 }
                 view.setZoom(this.zoom);
+
+                // Show recenter button
+                this.showRecenterButton();
             }
         },
         olPolyline(newOlPolyline) {
@@ -559,6 +569,11 @@ export default {
                 );
                 this.accuracyFeature.getStyle().getImage().setRadius(this.radiusFromAccuracy);
             }
+
+            // Update view center
+            if (!this.isRecenterButtonShown) {
+                this.map.getView().setCenter(newOlPosition);
+            }
         },
         reportDetailsID(newID, oldID) {
             [oldID, newID].forEach((id) => {

src/components/SearchModal.vue

@@ -58,13 +58,11 @@ export default {
     methods: {
         onManualLocationPicker(value) {
             this.isActive = false;
-            this.$router.push({
+            this.$store.dispatch('setCurrentMapZoom', {
-                name: 'SharedMap',
+                zoom: DEFAULT_ZOOM,
-                params: {
+            });
-                    lat: value.latlng.lat,
+            this.$store.dispatch('setCurrentMapCenter', {
-                    lng: value.latlng.lng,
+                center: [value.latlng.lat, value.latlng.lng],
-                    zoom: DEFAULT_ZOOM,
-                },
             });
         },
     },

src/constants.js

@@ -37,9 +37,12 @@ export const EARTH_RADIUS = 6378137; // in meters
 export const KEEP_REPORTS_METERS_AROUND = 10000; // in meters
 
 export const DEFAULT_ZOOM = 17;
-export const MIN_ZOOM = 10;
+export const MIN_ZOOM = 6;
 export const MAX_ZOOM = 18;
 
+export const MAP_CENTER_WITHOUT_GEOLOCATION = [46.589, 2.944];
+export const MAP_ZOOM_WITHOUT_GEOLOCATION = 6;
+
 export const ACCURACY_DISPLAY_THRESHOLD = 100; // in meters
 export const POSITION_MARKER_RADIUS = 10; // in pixels
 

src/views/Map.vue

@@ -6,10 +6,11 @@
                 <Map
                     :accuracy="currentLocation.hdop"
                     :center="mapCenter"
+                    :hasGeolocationTracking="!hasCenterProvidedByRoute && hasGeolocationTracking"
                     :heading="currentLocation.heading"
                     :markers="reportsMarkers"
-                    :onMapCenterUpdate="onMapCenterUpdate"
+                    :onMapCenterManualUpdate="onMapCenterManualUpdate"
-                    :onMapZoomUpdate="onMapZoomUpdate"
+                    :onMapZoomManualUpdate="onMapZoomManualUpdate"
                     :onPress="showReportDialog"
                     :polyline="positionHistory"
                     :positionLatLng="currentLatLng"
@@ -29,7 +30,7 @@
                     @click.native.stop="() => showReportDialog()"
                     role="button"
                     :aria-label="$t('buttons.reportProblem')"
-                    v-if="!hasCenterProvidedByRoute"
+                    v-if="!hasCenterProvidedByRoute && hasGeolocationTracking"
                     >
                     <v-icon>report_problem</v-icon>
                 </v-btn>
@@ -61,6 +62,10 @@ import AppLogo from '@/assets/logo.svg';
 
 function handlePositionError(error) {
     store.dispatch('setLocationError', { error: error.code });
+    store.dispatch('setCurrentMapZoom', { zoom: constants.MAP_ZOOM_WITHOUT_GEOLOCATION });
+    store.dispatch('setCurrentMapCenter', {
+        center: constants.MAP_CENTER_WITHOUT_GEOLOCATION,
+    });
 }
 
 function setPosition(position) {
@@ -100,7 +105,7 @@ export default {
         currentSpeed() {
             if (
                 this.hasCenterProvidedByRoute
-                || !this.currentLocation
+                || !this.hasGeolocationTracking
             ) {
                 return null;
             }
@@ -124,6 +129,9 @@ export default {
         hasCenterProvidedByRoute() {
             return this.$route.params.lat && this.$route.params.lng;
         },
+        hasGeolocationTracking() {
+            return Object.keys(this.currentLocation).length > 0;
+        },
         mapCenter() {
             if (this.hasCenterProvidedByRoute) {
                 return [
@@ -131,13 +139,25 @@ export default {
                     parseFloat(this.$route.params.lng),
                 ];
             }
-            return this.currentLatLng;
+            if (this.$store.state.map.center.every(item => item !== null)) {
+                return this.$store.state.map.center;
+            }
+            if (!this.hasGeolocationTracking) {
+                return constants.MAP_CENTER_WITHOUT_GEOLOCATION;
+            }
+            return [null, null];
         },
         mapZoom() {
+            if (this.$route.params.zoom) {
+                return parseInt(this.$route.params.zoom, 10);
+            }
+            if (this.$store.state.map.zoom) {
+                return this.$store.state.map.zoom;
+            }
             return (
-                this.$route.params.zoom
+                this.hasGeolocationTracking
-                    ? parseInt(this.$route.params.zoom, 10)
+                    ? constants.DEFAULT_ZOOM
-                    : constants.DEFAULT_ZOOM
+                    : constants.MAP_ZOOM_WITHOUT_GEOLOCATION
             );
         },
         positionHistory() {
@@ -215,7 +235,7 @@ export default {
             }
             this.$store.dispatch('setLocationWatcherId', { id: watchID });
         },
-        onMapCenterUpdate(center) {
+        onMapCenterManualUpdate(center) {
             // Update reports by default
             let distanceFromPreviousPoint = constants.UPDATE_REPORTS_DISTANCE_THRESHOLD + 1;
 
@@ -242,7 +262,7 @@ export default {
 
             this.$store.dispatch('setCurrentMapCenter', { center });
         },
-        onMapZoomUpdate(zoom) {
+        onMapZoomManualUpdate(zoom) {
             this.$store.dispatch('setCurrentMapZoom', { zoom });
         },
         removeNotification() {