diff options
| -rw-r--r-- | modern/src/MainMap.js | 51 |
1 files changed, 30 insertions, 21 deletions
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js index d934c511..f0305602 100644 --- a/modern/src/MainMap.js +++ b/modern/src/MainMap.js @@ -36,34 +36,43 @@ class MainMap extends Component { } loadImage(key, url) { - const image = new Image(); - image.onload = () => { - const canvas = document.createElement('canvas'); - canvas.width = image.width * window.devicePixelRatio; - canvas.height = image.height * window.devicePixelRatio; - canvas.style.width = `${image.width}px`; - canvas.style.height = `${image.height}px`; - const context = canvas.getContext('2d'); - context.drawImage(image, 0, 0, canvas.width, canvas.height); - this.map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), { - pixelRatio: window.devicePixelRatio - }); - } - image.src = url; + return new Promise(resolutionFunc => { + const image = new Image(); + image.onload = () => { + const canvas = document.createElement('canvas'); + canvas.width = image.width * window.devicePixelRatio; + canvas.height = image.height * window.devicePixelRatio; + canvas.style.width = `${image.width}px`; + canvas.style.height = `${image.height}px`; + const context = canvas.getContext('2d'); + context.drawImage(image, 0, 0, canvas.width, canvas.height); + this.map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), { + pixelRatio: window.devicePixelRatio + }); + resolutionFunc() + } + image.src = url; + }); } mapDidLoad(map) { this.map = map; - this.loadImage('background', 'images/background.svg'); - this.loadImage('icon-marker', 'images/icon/marker.svg'); + Promise.all([ + this.loadImage('background', 'images/background.svg'), + this.loadImage('icon-marker', 'images/icon/marker.svg') + ]).then(() => { + this.imagesDidLoad(); + }); + } - map.addSource('positions', { + imagesDidLoad() { + this.map.addSource('positions', { 'type': 'geojson', 'data': this.props.data }); - map.addLayer({ + this.map.addLayer({ 'id': 'device-background', 'type': 'symbol', 'source': 'positions', @@ -83,7 +92,7 @@ class MainMap extends Component { } }); - map.addLayer({ + this.map.addLayer({ 'id': 'device-icon', 'type': 'symbol', 'source': 'positions', @@ -93,9 +102,9 @@ class MainMap extends Component { } }); - map.addControl(new mapboxgl.NavigationControl()); + this.map.addControl(new mapboxgl.NavigationControl()); - map.fitBounds(this.calculateBounds(), { + this.map.fitBounds(this.calculateBounds(), { padding: 100, maxZoom: 9 }); |