aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/map')
-rw-r--r--modern/src/map/MainMap.js10
-rw-r--r--modern/src/map/mapManager.js10
2 files changed, 8 insertions, 12 deletions
diff --git a/modern/src/map/MainMap.js b/modern/src/map/MainMap.js
index c93c26dd..0b7eea25 100644
--- a/modern/src/map/MainMap.js
+++ b/modern/src/map/MainMap.js
@@ -30,6 +30,7 @@ const MainMap = () => {
return {
deviceId: position.deviceId,
name: device ? device.name : '',
+ category: device && device.category || 'default',
}
};
@@ -89,7 +90,7 @@ const MainMap = () => {
'type': 'geojson',
'data': positions,
});
- mapManager.addLayer('device-icon', 'positions', 'icon-marker', '{name}', markerClickHandler);
+ mapManager.addLayer('device-icon', 'positions', '{category}', '{name}', markerClickHandler);
const bounds = mapManager.calculateBounds(positions.features);
if (bounds) {
@@ -118,12 +119,7 @@ const MainMap = () => {
}
}, [positions]);
- const style = {
- width: '100%',
- height: '100%',
- };
-
- return <div style={style} ref={containerEl} />;
+ return <div style={{ width: '100%', height: '100%' }} ref={containerEl} />;
}
export default MainMap;
diff --git a/modern/src/map/mapManager.js b/modern/src/map/mapManager.js
index 5c0510c4..e496a6c5 100644
--- a/modern/src/map/mapManager.js
+++ b/modern/src/map/mapManager.js
@@ -1,5 +1,6 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';
+import { deviceCategories } from '../common/deviceCategories';
let readyListeners = [];
@@ -32,8 +33,9 @@ const loadIcon = async (key, background, url) => {
const context = canvas.getContext('2d');
context.drawImage(background, 0, 0, canvas.width, canvas.height);
- const imageWidth = image.width * pixelRatio;
- const imageHeight = image.height * pixelRatio;
+ const iconRatio = 0.5;
+ const imageWidth = canvas.width * iconRatio;
+ const imageHeight = canvas.height * iconRatio;
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 });
@@ -156,9 +158,7 @@ map.addControl(new mapboxgl.NavigationControl());
map.on('load', async () => {
const background = await loadImage('images/background.svg');
- await Promise.all([
- loadIcon('icon-marker', background, 'images/icon/marker.svg'),
- ]);
+ await Promise.all(deviceCategories.map(async category => loadIcon(category, background, `images/icon/${category}.svg`)));
if (readyListeners) {
readyListeners.forEach(listener => listener());
readyListeners = null;