Extract map unit functions

1 files changed, 5 insertions, 55 deletions

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,
 };