diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-10-24 11:52:27 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-10-24 11:52:27 -0700 |
commit | 5836e53995f4f70b1e33c108823cf6f3293078de (patch) | |
tree | 23093a615fa7e0655fc2356900825e1569139d2c /modern/src/MainMap.js | |
parent | 962267b2c5c2c33945880a360107c2812765c983 (diff) | |
download | etbsa-traccar-web-5836e53995f4f70b1e33c108823cf6f3293078de.tar.gz etbsa-traccar-web-5836e53995f4f70b1e33c108823cf6f3293078de.tar.bz2 etbsa-traccar-web-5836e53995f4f70b1e33c108823cf6f3293078de.zip |
Move map classes
Diffstat (limited to 'modern/src/MainMap.js')
-rw-r--r-- | modern/src/MainMap.js | 129 |
1 files changed, 0 insertions, 129 deletions
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js deleted file mode 100644 index b3fafb6..0000000 --- a/modern/src/MainMap.js +++ /dev/null @@ -1,129 +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 { 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 : '', - } - }; - - 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.registerListener(() => 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( - <Provider store={store}> - <StatusView deviceId={feature.properties.deviceId} onShowDetails={positionId => history.push(`/position/${positionId}`)} /> - </Provider>, - 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', 'icon-marker', '{name}', markerClickHandler); - - const bounds = mapManager.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]); - - const style = { - width: '100%', - height: '100%', - }; - - return <div style={style} ref={containerEl} />; -} - -export default MainMap; |