diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-10-24 12:49:47 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-10-24 12:49:47 -0700 |
commit | 50505e02d2464a5f353aa805c9622c6d4f940ebc (patch) | |
tree | 3c690a14c129f28308af126c2a612dfe06875a27 /modern/src/map | |
parent | 26021f5220d9fd3b7306ecc09e1e86a3858a6e5a (diff) | |
download | etbsa-traccar-web-50505e02d2464a5f353aa805c9622c6d4f940ebc.tar.gz etbsa-traccar-web-50505e02d2464a5f353aa805c9622c6d4f940ebc.tar.bz2 etbsa-traccar-web-50505e02d2464a5f353aa805c9622c6d4f940ebc.zip |
Simplify map code
Diffstat (limited to 'modern/src/map')
-rw-r--r-- | modern/src/map/MainMap.js | 2 | ||||
-rw-r--r-- | modern/src/map/mapManager.js | 68 |
2 files changed, 33 insertions, 37 deletions
diff --git a/modern/src/map/MainMap.js b/modern/src/map/MainMap.js index 7332d93..c93c26d 100644 --- a/modern/src/map/MainMap.js +++ b/modern/src/map/MainMap.js @@ -57,7 +57,7 @@ const MainMap = () => { }, [containerEl]); useEffect(() => { - mapManager.registerListener(() => setMapReady(true)); + mapManager.onMapReady(() => setMapReady(true)); }, []); const markerClickHandler = (event) => { diff --git a/modern/src/map/mapManager.js b/modern/src/map/mapManager.js index a78a598..5c0510c 100644 --- a/modern/src/map/mapManager.js +++ b/modern/src/map/mapManager.js @@ -1,14 +1,13 @@ import 'mapbox-gl/dist/mapbox-gl.css'; import mapboxgl from 'mapbox-gl'; -let ready = false; -let registeredListener = null; +let readyListeners = []; -const registerListener = listener => { - if (ready) { +const onMapReady = listener => { + if (!readyListeners) { listener(); } else { - registeredListener = listener; + readyListeners.push(listener); } }; @@ -20,24 +19,24 @@ const loadImage = (url) => { }); }; -const loadIcon = (key, background, url) => { - return loadImage(url).then((image) => { - const canvas = document.createElement('canvas'); - canvas.width = background.width * window.devicePixelRatio; - canvas.height = background.height * window.devicePixelRatio; - canvas.style.width = `${background.width}px`; - canvas.style.height = `${background.height}px`; - const context = canvas.getContext('2d'); - context.drawImage(background, 0, 0, canvas.width, canvas.height); - - const imageWidth = image.width * window.devicePixelRatio; - const imageHeight = image.height * window.devicePixelRatio; - context.drawImage(image, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight); - - map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), { - pixelRatio: window.devicePixelRatio - }); - }); +const loadIcon = async (key, background, url) => { + const image = await loadImage(url); + const pixelRatio = window.devicePixelRatio; + + const canvas = document.createElement('canvas'); + canvas.width = background.width * pixelRatio; + canvas.height = background.height * pixelRatio; + canvas.style.width = `${background.width}px`; + canvas.style.height = `${background.height}px`; + + const context = canvas.getContext('2d'); + context.drawImage(background, 0, 0, canvas.width, canvas.height); + + const imageWidth = image.width * pixelRatio; + const imageHeight = image.height * pixelRatio; + context.drawImage(image, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight); + + map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), { pixelRatio }); }; const layerClickCallbacks = {}; @@ -155,24 +154,21 @@ const map = new mapboxgl.Map({ map.addControl(new mapboxgl.NavigationControl()); -map.on('load', () => { - loadImage('images/background.svg').then(background => { - Promise.all([ - loadIcon('icon-marker', background, 'images/icon/marker.svg') - ]).then(() => { - ready = true; - if (registeredListener) { - registeredListener(); - registeredListener = null; - } - }); - }); +map.on('load', async () => { + const background = await loadImage('images/background.svg'); + await Promise.all([ + loadIcon('icon-marker', background, 'images/icon/marker.svg'), + ]); + if (readyListeners) { + readyListeners.forEach(listener => listener()); + readyListeners = null; + } }); export default { element, map, - registerListener, + onMapReady, addLayer, removeLayer, calculateBounds, |