From 7806cb2d725ab1aa4f66db86bc376a027dda6df5 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sat, 24 Oct 2020 16:05:36 -0700 Subject: Extract map unit functions --- modern/src/map/MainMap.js | 3 ++- modern/src/map/mapManager.js | 60 ++++---------------------------------------- modern/src/map/mapUtil.js | 52 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 59 insertions(+), 56 deletions(-) create mode 100644 modern/src/map/mapUtil.js (limited to 'modern/src/map') 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; + } +} -- cgit v1.2.3