Skip to content

Commit b0ea7d4

Browse files
vol4timvol4tim
committed
fix provider on map
1 parent 566a357 commit b0ea7d4

File tree

1 file changed

+111
-46
lines changed

1 file changed

+111
-46
lines changed

‎src/components/Map.vue

Lines changed: 111 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,70 @@
11
<template>
2-
<div :class="{ inactive: store.isColored }" class="mapcontainer" id="map"></div>
3-
<Footer :currentProvider="provider" :canHistory="historyready" @history="historyhandler" :measuretype="measuretype">
4-
<button class="popovercontrol" v-if="geoavailable" @click.prevent="resetgeo" :area-label="$t('showlocation')" :title="$t('showlocation')"><font-awesome-icon icon="fa-solid fa-location-arrow" /></button>
2+
<div
3+
:class="{ inactive: store.isColored }"
4+
class="mapcontainer"
5+
id="map"
6+
></div>
7+
<Footer
8+
:currentProvider="provider"
9+
:canHistory="historyready"
10+
@history="historyhandler"
11+
:measuretype="measuretype"
12+
>
13+
<button
14+
class="popovercontrol"
15+
v-if="geoavailable"
16+
@click.prevent="resetgeo"
17+
:area-label="$t('showlocation')"
18+
:title="$t('showlocation')"
19+
>
20+
<font-awesome-icon icon="fa-solid fa-location-arrow" />
21+
</button>
522
</Footer>
623
</template>
724

825
<script>
926
import { useStore } from "@/store";
27+
import Footer from "../components/footer/Footer.vue";
1028
import config from "../config";
11-
import { init, removeMap, setTheme, setview, drawuser } from "../utils/map/instance";
29+
import {
30+
drawuser,
31+
init,
32+
removeMap,
33+
setTheme,
34+
setview,
35+
} from "../utils/map/instance";
1236
import { init as initMarkers } from "../utils/map/marker";
1337
import { init as initWind } from "../utils/map/wind";
14-
import Footer from "../components/footer/Footer.vue";
1538
1639
export default {
1740
emits: ["city", "clickMarker", "close"],
1841
props: ["measuretype", "historyready", "historyhandler"],
19-
components: {Footer},
42+
components: { Footer },
2043
data() {
2144
return {
2245
store: useStore(),
2346
locale: localStorage.getItem("locale") || this.$i18n.locale || "en",
24-
theme: window?.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark",
47+
theme: window?.matchMedia("(prefers-color-scheme: light)").matches
48+
? "light"
49+
: "dark",
2550
userposition: null,
2651
geoavailable: false,
2752
};
2853
},
2954
3055
computed: {
31-
zoom() { return this.store.mapposition.zoom },
32-
lat() { return this.store.mapposition.lat },
33-
lng() { return this.store.mapposition.lng },
34-
provider() { return config.DEFAUL_TYPE_PROVIDER || this.$route.params.provider },
56+
zoom() {
57+
return this.store.mapposition.zoom;
58+
},
59+
lat() {
60+
return this.store.mapposition.lat;
61+
},
62+
lng() {
63+
return this.store.mapposition.lng;
64+
},
65+
provider() {
66+
return this.$route.params.provider || config.DEFAUL_TYPE_PROVIDER;
67+
},
3568
},
3669
3770
methods: {
@@ -52,66 +85,83 @@ export default {
5285
5386
relocatemap(lat, lng, zoom, type) {
5487
const options = {
55-
name: "main",
56-
params: {
57-
provider: this.provider || config.DEFAUL_TYPE_PROVIDER,
58-
type: this.$route.params.type || "pm10",
59-
zoom: zoom,
60-
lat: lat,
61-
lng: lng,
62-
sensor: this.$route.params.sensor,
63-
},
64-
}
65-
88+
name: "main",
89+
params: {
90+
provider: this.provider || config.DEFAUL_TYPE_PROVIDER,
91+
type: this.$route.params.type || "pm10",
92+
zoom: zoom,
93+
lat: lat,
94+
lng: lng,
95+
sensor: this.$route.params.sensor,
96+
},
97+
};
98+
6699
if (this.$router.currentRoute.value.name === "main") {
100+
console.log(options);
67101
/* added here check for current route is map (main), as it caused problems with other pages */
68-
if(type === 'reload') {
69-
this.$router.push(options).catch(e => { console.warn(e) });
102+
if (type === "reload") {
103+
this.$router.push(options).catch((e) => {
104+
console.warn(e);
105+
});
70106
setview([lat, lng], zoom);
71107
} else {
72-
this.$router.replace(options).catch(e => { console.warn(e) });
108+
this.$router.replace(options).catch((e) => {
109+
console.warn(e);
110+
});
73111
}
74112
}
75113
},
76114
77115
getlocalmappos() {
78-
if(localStorage.getItem("map-position")) {
116+
if (localStorage.getItem("map-position")) {
79117
const lastsettings = localStorage.getItem("map-position");
80-
this.store.setmapposition(JSON.parse(lastsettings).lat, JSON.parse(lastsettings).lng, JSON.parse(lastsettings).zoom);
118+
this.store.setmapposition(
119+
JSON.parse(lastsettings).lat,
120+
JSON.parse(lastsettings).lng,
121+
JSON.parse(lastsettings).zoom
122+
);
81123
}
82124
},
83125
84126
setgeo() {
85127
return new Promise((resolve) => {
86128
if ("geolocation" in navigator) {
87129
navigator.geolocation.getCurrentPosition(
88-
position => {
89-
this.userposition = [position.coords.latitude, position.coords.longitude];
130+
(position) => {
131+
this.userposition = [
132+
position.coords.latitude,
133+
position.coords.longitude,
134+
];
90135
/* setting for the app globally user's geo position and zoom 20 for better view */
91-
this.store.setmapposition(this.userposition[0], this.userposition[1], 20);
136+
this.store.setmapposition(
137+
this.userposition[0],
138+
this.userposition[1],
139+
20
140+
);
92141
this.geoavailable = true;
93142
resolve();
94143
},
95-
e => {
144+
(e) => {
96145
console.warn(`ERROR(${e.code}): ${e.message}`);
97146
/* Если не удалось получить позицию юзера, то проверяем локальное хранилище */
98147
this.getlocalmappos();
99148
resolve();
100-
});
149+
}
150+
);
101151
} else {
102152
/* Если нет возможности "geolocation", то проверяем локальное хранилище */
103153
this.getlocalmappos();
104154
resolve();
105155
}
106-
})
156+
});
107157
},
108158
109159
resetgeo() {
110160
const waitcoords = this.setgeo();
111-
waitcoords.then( () => {
112-
this.relocatemap(this.lat, this.lng, this.zoom, 'reload');
113-
})
114-
}
161+
waitcoords.then(() => {
162+
this.relocatemap(this.lat, this.lng, this.zoom, "reload");
163+
});
164+
},
115165
},
116166
117167
unmounted() {
@@ -134,31 +184,46 @@ export default {
134184
const waitcoords = this.setgeo();
135185
/* - retrieve coordinates */
136186
137-
138187
/* + Operate with a map */
139-
waitcoords.then( async () => {
188+
waitcoords.then(async () => {
140189
const map = init([this.lat, this.lng], this.zoom, this.theme);
141-
this.relocatemap(this.lat, this.lng, this.zoom, 'reload');
190+
this.relocatemap(this.lat, this.lng, this.zoom, "reload");
142191
143-
if(this.userposition) {
192+
if (this.userposition) {
144193
drawuser(this.userposition, this.zoom);
145194
}
146195
147196
map.on("zoomend", (e) => {
148-
this.relocatemap(e.target.getCenter().lat.toFixed(4), e.target.getCenter().lng.toFixed(4), e.target.getZoom());
149-
this.store.setmapposition(e.target.getCenter().lat.toFixed(4), e.target.getCenter().lng.toFixed(4), e.target.getZoom());
197+
this.relocatemap(
198+
e.target.getCenter().lat.toFixed(4),
199+
e.target.getCenter().lng.toFixed(4),
200+
e.target.getZoom()
201+
);
202+
this.store.setmapposition(
203+
e.target.getCenter().lat.toFixed(4),
204+
e.target.getCenter().lng.toFixed(4),
205+
e.target.getZoom()
206+
);
150207
});
151208
152209
map.on("moveend", (e) => {
153-
this.relocatemap(e.target.getCenter().lat.toFixed(4), e.target.getCenter().lng.toFixed(4), e.target.getZoom());
154-
this.store.setmapposition(e.target.getCenter().lat.toFixed(4), e.target.getCenter().lng.toFixed(4), e.target.getZoom());
210+
this.relocatemap(
211+
e.target.getCenter().lat.toFixed(4),
212+
e.target.getCenter().lng.toFixed(4),
213+
e.target.getZoom()
214+
);
215+
this.store.setmapposition(
216+
e.target.getCenter().lat.toFixed(4),
217+
e.target.getCenter().lng.toFixed(4),
218+
e.target.getZoom()
219+
);
155220
});
156221
157222
initMarkers(map, this.measuretype, (data) => {
158223
this.$emit("clickMarker", data);
159224
});
160225
161-
if (this.provider === 'realtime') {
226+
if (this.provider === "realtime") {
162227
await initWind();
163228
}
164229
});

0 commit comments

Comments
 (0)