From 37413a7e21f8d9ced70f8e8d4b1e58a26aad7eec Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)"
Date: Tue, 3 Jul 2018 18:09:56 +0200
Subject: [PATCH] Some fixes for nosleep and moving the map around
---
package.json | 2 +-
src/components/Intro.vue | 7 ++++
src/components/Map.vue | 73 ++++++++++++++++++++++++++--------------
src/i18n/en.js | 3 ++
src/views/Map.vue | 62 +++++++++++++++-------------------
yarn.lock | 6 ++--
6 files changed, 89 insertions(+), 64 deletions(-)
create mode 100644 src/components/Intro.vue
diff --git a/package.json b/package.json
index f92058f..da1ac0d 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"vue-router": "^3.0.1",
"vue2-leaflet": "^1.0.2",
"vue2-leaflet-tracksymbol": "^1.0.10",
- "vuetify": "^1.0.0",
+ "vuetify": "^1.1.0",
"vuex": "^3.0.1"
},
"devDependencies": {
diff --git a/src/components/Intro.vue b/src/components/Intro.vue
new file mode 100644
index 0000000..9e8a8d9
--- /dev/null
+++ b/src/components/Intro.vue
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 20388f1..6b35c28 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -10,6 +10,20 @@
+
+ my_location
+
@@ -79,25 +93,38 @@ export default {
this.isProgrammaticZoom = true;
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
}
- if (this.map.getCenter() !== this.positionLatLng) {
+ if (
+ this.map.getCenter().lat !== this.positionLatLng[0] &&
+ this.map.getCenter().lng !== this.positionLatLng[1]
+ ) {
this.isProgrammaticMove = true;
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
}
this.map.setView(this.positionLatLng, this.zoom);
this.showCompass();
},
- updated() {
- if (!this.recenterButton) {
- if (this.map.getZoom() !== this.zoom) {
- this.isProgrammaticZoom = true;
- this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
+ watch: {
+ positionLatLng: (newPositionLatLng) => {
+ if (!this.map) {
+ // Map should have been created
+ return;
}
- if (this.map.getCenter() !== this.positionLatLng) {
- this.isProgrammaticMove = true;
- this.map.once('moveend', () => { this.isProgrammaticMove = false; });
+ if (!this.recenterButton) {
+ // Handle programmatic navigation
+ if (this.map.getZoom() !== this.zoom) {
+ this.isProgrammaticZoom = true;
+ this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
+ }
+ if (
+ this.map.getCenter().lat !== newPositionLatLng[0] &&
+ this.map.getCenter().lng !== newPositionLatLng[1]
+ ) {
+ this.isProgrammaticMove = true;
+ this.map.once('moveend', () => { this.isProgrammaticMove = false; });
+ }
+ this.map.setView(this.positionLatLng, this.zoom);
}
- this.map.setView(this.positionLatLng, this.zoom);
- }
+ },
},
data() {
return {
@@ -110,7 +137,7 @@ export default {
isMouseDown: false,
isProgrammaticZoom: false,
isProgrammaticMove: false,
- recenterButton: null,
+ recenterButton: false,
map: null,
};
},
@@ -120,7 +147,8 @@ export default {
this.onPress(event.latlng);
}
},
- onMoveStart() {
+ onMoveStart(ev) {
+ console.log(ev, this.isProgrammaticMove);
if (!this.isProgrammaticMove) {
this.showRecenterButton();
}
@@ -142,22 +170,12 @@ export default {
},
showRecenterButton() {
if (!this.recenterButton) {
- this.recenterButton = L.control({ position: 'bottomleft' });
- this.recenterButton.onAdd = () => {
- const btn = L.DomUtil.create('button', 'overlayButton btn btn--floating btn--large theme--dark blue legend');
- btn.type = 'button';
- btn.addEventListener('click', this.recenterMap);
- btn.innerHTML = 'my_location
';
- L.DomEvent.disableClickPropagation(btn);
- return btn;
- };
- this.map.addControl(this.recenterButton);
+ this.recenterButton = true;
}
},
hideRecenterButton() {
if (this.recenterButton) {
- this.map.removeControl(this.recenterButton);
- this.recenterButton = null;
+ this.recenterButton = false;
}
},
recenterMap() {
@@ -166,7 +184,10 @@ export default {
this.isProgrammaticZoom = true;
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
}
- if (this.map.getCenter() !== this.positionLatLng) {
+ if (
+ this.map.getCenter().lat !== this.positionLatLng[0] &&
+ this.map.getCenter().lng !== this.positionLatLng[1]
+ ) {
this.isProgrammaticMove = true;
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
}
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 14ea2e2..5282719 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -12,6 +12,9 @@ export default {
fetching: 'Fetching current position…',
unavailable: 'Sorry, geolocation is not available in your browser.',
},
+ intro: {
+ start: "Let's go!",
+ },
menu: {
About: 'Help',
Map: 'Map',
diff --git a/src/views/Map.vue b/src/views/Map.vue
index d517e40..26082e5 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -1,10 +1,17 @@
-
+
+
+
+ {{ $t('about.summary') }}
+ {{ $t('intro.start') }}
+
+
+
diff --git a/yarn.lock b/yarn.lock
index ad2b31d..de433c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5992,9 +5992,9 @@ vue@^2.5.2:
version "2.5.16"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
-vuetify@^1.0.0:
- version "1.0.19"
- resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.0.19.tgz#fb6d123dd1c217795fc2333e912c0ecbed2ed69e"
+vuetify@^1.1.0:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.1.1.tgz#8d8f64306a45aaf862487addae8decf082dac0a3"
vuex@^3.0.1:
version "3.0.1"