aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-11-01 18:44:31 -0800
committerAnton Tananaev <anton.tananaev@gmail.com>2020-11-01 18:44:31 -0800
commit47b95d6739d8bfcb2ee285ffaaffc8fc41520f1f (patch)
tree54767ba07ca2785d4dd613cf23956fbdc206597e /modern
parent4cbb539001e8ba536674373efb60160b16a5d111 (diff)
downloadtrackermap-web-47b95d6739d8bfcb2ee285ffaaffc8fc41520f1f.tar.gz
trackermap-web-47b95d6739d8bfcb2ee285ffaaffc8fc41520f1f.tar.bz2
trackermap-web-47b95d6739d8bfcb2ee285ffaaffc8fc41520f1f.zip
Improve map switching
Diffstat (limited to 'modern')
-rw-r--r--modern/src/map/Map.js33
-rw-r--r--modern/src/map/switcher/switcher.js4
2 files changed, 25 insertions, 12 deletions
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index d5e86171..71fb5e56 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -5,7 +5,7 @@ import { SwitcherControl } from './switcher/switcher';
import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
import { deviceCategories } from '../common/deviceCategories';
import { loadIcon, loadImage } from './mapUtil';
-import { styleCarto, styleOsm } from './mapStyles';
+import { styleCarto, styleMapbox, styleOsm } from './mapStyles';
import t from '../common/localization';
const element = document.createElement('div');
@@ -29,30 +29,39 @@ const updateReadyValue = value => {
readyListeners.forEach(listener => listener(value));
}
-map.on('load', async () => {
+const initMap = async () => {
const background = await loadImage('images/background.svg');
await Promise.all(deviceCategories.map(async category => {
const imageData = await loadIcon(category, background, `images/icon/${category}.svg`);
- map.addImage(category, imageData, { pixelRatio: window.devicePixelRatio });
+ if (!map.hasImage(category)) map.addImage(category, imageData, { pixelRatio: window.devicePixelRatio });
}));
updateReadyValue(true);
-});
+};
+
+map.on('load', initMap);
map.addControl(new mapboxgl.NavigationControl({
showCompass: false,
}));
map.addControl(new SwitcherControl(
- [{
- title: t('mapOsm'),
- uri: styleOsm(),
- }, {
- title: t('mapCarto'),
- uri: styleCarto(),
- }],
+ [
+ { title: t('mapOsm'), uri: styleOsm() },
+ { title: t('mapCarto'), uri: styleCarto() },
+ { title: 'Mapbox Streets', uri: styleMapbox('streets-v11') },
+ ],
t('mapOsm'),
() => updateReadyValue(false),
- () => updateReadyValue(true),
+ () => {
+ const waiting = () => {
+ if (!map.loaded()) {
+ setTimeout(waiting, 100);
+ } else {
+ initMap();
+ }
+ };
+ waiting();
+ },
));
const Map = ({ children }) => {
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index ff9fbe97..c2b9d6d4 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -32,9 +32,13 @@ export class SwitcherControl {
if (srcElement.classList.contains('active')) {
return;
}
+ console.log('beforeSwitch start');
this.beforeSwitch();
+ console.log('beforeSwitch end');
this.map.setStyle(JSON.parse(srcElement.dataset.uri));
+ console.log('afterSwitch start');
this.afterSwitch();
+ console.log('afterSwitch end');
this.mapStyleContainer.style.display = 'none';
this.styleButton.style.display = 'block';
const elms = this.mapStyleContainer.getElementsByClassName('active');