Extract map unit functions

3 files changed, 59 insertions, 56 deletions

diff --git a/modern/src/map/MainMap.js b/modern/src/map/MainMap.js
index 0b7eea2..4ee6d4d 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 e496a6c..4ea7672 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 0000000..614234b
--- /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;
+  }
+}