aboutsummaryrefslogtreecommitdiff
path: root/modern/src/MainMap.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-03-22 19:30:28 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-03-22 19:30:28 -0700
commit990d485a21c945e7d57b85378650a65f3e79eed3 (patch)
treeeb513a337f097607410f4ae48d673dd18c2f1c74 /modern/src/MainMap.js
parent80f36b23de8557445623e530708298a557f9fa2e (diff)
downloadtrackermap-web-990d485a21c945e7d57b85378650a65f3e79eed3.tar.gz
trackermap-web-990d485a21c945e7d57b85378650a65f3e79eed3.tar.bz2
trackermap-web-990d485a21c945e7d57b85378650a65f3e79eed3.zip
Handle list clicks
Diffstat (limited to 'modern/src/MainMap.js')
-rw-r--r--modern/src/MainMap.js22
1 files changed, 20 insertions, 2 deletions
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index f0305602..35b933b4 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -3,6 +3,16 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import mapboxgl from 'mapbox-gl';
+const calculateMapCenter = (state) => {
+ if (state.selectedDevice) {
+ const position = state.positions.get(state.selectedDevice);
+ if (position) {
+ return [position.longitude, position.latitude];
+ }
+ }
+ return null;
+}
+
const mapFeatureProperties = (state, position) => {
return {
name: state.devices.get(position.deviceId).name
@@ -10,6 +20,7 @@ const mapFeatureProperties = (state, position) => {
}
const mapStateToProps = state => ({
+ mapCenter: calculateMapCenter(state),
data: {
type: 'FeatureCollection',
features: Array.from(state.positions.values()).map(position => ({
@@ -135,8 +146,15 @@ class MainMap extends Component {
}
componentDidUpdate(prevProps) {
- if (this.map && prevProps.data !== this.props.data) {
- this.map.getSource('positions').setData(this.props.data);
+ if (this.map) {
+ if (prevProps.mapCenter !== this.props.mapCenter) {
+ this.map.easeTo({
+ center: this.props.mapCenter
+ });
+ }
+ if (prevProps.data.features !== this.props.data.features) {
+ this.map.getSource('positions').setData(this.props.data);
+ }
}
}