From e9f0913d2b1b66764931b6c1235877a44e72890b Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sat, 24 Oct 2020 16:42:29 -0700 Subject: Refactor map implementation --- modern/src/map/MainMap.js | 126 ---------------------------------------------- 1 file changed, 126 deletions(-) delete mode 100644 modern/src/map/MainMap.js (limited to 'modern/src/map/MainMap.js') diff --git a/modern/src/map/MainMap.js b/modern/src/map/MainMap.js deleted file mode 100644 index 4ee6d4d..0000000 --- a/modern/src/map/MainMap.js +++ /dev/null @@ -1,126 +0,0 @@ -import React, { useRef, useLayoutEffect, useEffect, useState } from 'react'; -import ReactDOM from 'react-dom'; -import { Provider, useSelector } from 'react-redux'; -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 = () => { - const history = useHistory(); - - const containerEl = useRef(null); - - const [mapReady, setMapReady] = useState(false); - - const mapCenter = useSelector(state => { - if (state.devices.selectedId) { - const position = state.positions.items[state.devices.selectedId] || null; - if (position) { - return [position.longitude, position.latitude]; - } - } - return null; - }); - - const createFeature = (state, position) => { - const device = state.devices.items[position.deviceId] || null; - return { - deviceId: position.deviceId, - name: device ? device.name : '', - category: device && device.category || 'default', - } - }; - - const positions = useSelector(state => ({ - type: 'FeatureCollection', - features: Object.values(state.positions.items).map(position => ({ - type: 'Feature', - geometry: { - type: 'Point', - coordinates: [position.longitude, position.latitude] - }, - properties: createFeature(state, position), - })), - })); - - useLayoutEffect(() => { - const currentEl = containerEl.current; - currentEl.appendChild(mapManager.element); - if (mapManager.map) { - mapManager.map.resize(); - } - return () => { - currentEl.removeChild(mapManager.element); - }; - }, [containerEl]); - - useEffect(() => { - mapManager.onMapReady(() => setMapReady(true)); - }, []); - - const markerClickHandler = (event) => { - const feature = event.features[0]; - let coordinates = feature.geometry.coordinates.slice(); - while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) { - coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360; - } - - const placeholder = document.createElement('div'); - ReactDOM.render( - - history.push(`/position/${positionId}`)} /> - , - placeholder); - - new mapboxgl.Popup({ - offset: 25, - anchor: 'top' - }) - .setDOMContent(placeholder) - .setLngLat(coordinates) - .addTo(mapManager.map); - }; - - useEffect(() => { - if (mapReady) { - mapManager.map.addSource('positions', { - 'type': 'geojson', - 'data': positions, - }); - mapManager.addLayer('device-icon', 'positions', '{category}', '{name}', markerClickHandler); - - const bounds = calculateBounds(positions.features); - if (bounds) { - mapManager.map.fitBounds(bounds, { - padding: 100, - maxZoom: 9 - }); - } - - return () => { - mapManager.removeLayer('device-icon', 'positions'); - }; - } - }, [mapReady]); - - useEffect(() => { - mapManager.map.easeTo({ - center: mapCenter - }); - }, [mapCenter]); - - useEffect(() => { - const source = mapManager.map.getSource('positions'); - if (source) { - source.setData(positions); - } - }, [positions]); - - return
; -} - -export default MainMap; -- cgit v1.2.3