aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/map/MainMap.js3
-rw-r--r--modern/src/map/mapManager.js60
-rw-r--r--modern/src/map/mapUtil.js52
3 files changed, 59 insertions, 56 deletions
diff --git a/modern/src/map/MainMap.js b/modern/src/map/MainMap.js
index 0b7eea25..4ee6d4dc 100644
--- a/modern/src/map/MainMap.js
+++ b/modern/src/map/MainMap.js
@@ -6,6 +6,7 @@ import mapboxgl from 'mapbox-gl';
import mapManager from './mapManager';
import store from '../store';
import StatusView from '../StatusView';
+import { calculateBounds } from './mapUtil';
import { useHistory } from 'react-router-dom';
const MainMap = () => {
@@ -92,7 +93,7 @@ const MainMap = () => {
});
mapManager.addLayer('device-icon', 'positions', '{category}', '{name}', markerClickHandler);
- const bounds = mapManager.calculateBounds(positions.features);
+ const bounds = calculateBounds(positions.features);
if (bounds) {
mapManager.map.fitBounds(bounds, {
padding: 100,
diff --git a/modern/src/map/mapManager.js b/modern/src/map/mapManager.js
index e496a6c5..4ea76729 100644
--- a/modern/src/map/mapManager.js
+++ b/modern/src/map/mapManager.js
@@ -1,6 +1,7 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';
import { deviceCategories } from '../common/deviceCategories';
+import { loadIcon, loadImage } from './mapUtil';
let readyListeners = [];
@@ -12,35 +13,6 @@ const onMapReady = listener => {
}
};
-const loadImage = (url) => {
- return new Promise(imageLoaded => {
- const image = new Image();
- image.onload = () => imageLoaded(image);
- image.src = url;
- });
-};
-
-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 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 });
-};
-
const layerClickCallbacks = {};
const layerMouseEnterCallbacks = {};
const layerMauseLeaveCallbacks = {};
@@ -105,30 +77,6 @@ const removeLayer = (id, source) => {
map.removeSource(source);
}
-const calculateBounds = features => {
- if (features && features.length) {
- const first = features[0].geometry.coordinates;
- const bounds = [[...first], [...first]];
- for (let feature of features) {
- const longitude = feature.geometry.coordinates[0]
- const latitude = feature.geometry.coordinates[1]
- if (longitude < bounds[0][0]) {
- bounds[0][0] = longitude;
- } else if (longitude > bounds[1][0]) {
- bounds[1][0] = longitude;
- }
- if (latitude < bounds[0][1]) {
- bounds[0][1] = latitude;
- } else if (latitude > bounds[1][1]) {
- bounds[1][1] = latitude;
- }
- }
- return bounds;
- } else {
- return null;
- }
-}
-
const element = document.createElement('div');
element.style.width = '100%';
element.style.height = '100%';
@@ -158,7 +106,10 @@ map.addControl(new mapboxgl.NavigationControl());
map.on('load', async () => {
const background = await loadImage('images/background.svg');
- await Promise.all(deviceCategories.map(async category => loadIcon(category, background, `images/icon/${category}.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 (readyListeners) {
readyListeners.forEach(listener => listener());
readyListeners = null;
@@ -171,5 +122,4 @@ export default {
onMapReady,
addLayer,
removeLayer,
- calculateBounds,
};
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js
new file mode 100644
index 00000000..614234b5
--- /dev/null
+++ b/modern/src/map/mapUtil.js
@@ -0,0 +1,52 @@
+export const loadImage = (url) => {
+ return new Promise(imageLoaded => {
+ const image = new Image();
+ image.onload = () => imageLoaded(image);
+ image.src = url;
+ });
+};
+
+export 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 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);
+
+ return context.getImageData(0, 0, canvas.width, canvas.height);
+};
+
+export const calculateBounds = features => {
+ if (features && features.length) {
+ const first = features[0].geometry.coordinates;
+ const bounds = [[...first], [...first]];
+ for (let feature of features) {
+ const longitude = feature.geometry.coordinates[0]
+ const latitude = feature.geometry.coordinates[1]
+ if (longitude < bounds[0][0]) {
+ bounds[0][0] = longitude;
+ } else if (longitude > bounds[1][0]) {
+ bounds[1][0] = longitude;
+ }
+ if (latitude < bounds[0][1]) {
+ bounds[0][1] = latitude;
+ } else if (latitude > bounds[1][1]) {
+ bounds[1][1] = latitude;
+ }
+ }
+ return bounds;
+ } else {
+ return null;
+ }
+}