update map

src/Pages/Home.js

@@ -162,7 +162,10 @@ class Home extends Component {
 				.collection('device')
 				.doc(allDevicesId[i])
 				.get();
-			allDeviceInfo.push(deviceInfo.data());
+			let devicedata = deviceInfo.data();
+			devicedata.deviceid = allDevicesId[i]
+			devicedata.position = [devicedata.location._long,devicedata.location._lat]
+			allDeviceInfo.push(devicedata);
 			if (i === allDevicesId.length - 1) {
 				this.setState({ allDeviceInfo });
 			}
@@ -224,7 +227,7 @@ class Home extends Component {
 				currentLast:
 					Math.round(
 						response.data.queries[0].results[5].values[
-							response.data.queries[0].results[5].values.length - 1
+						response.data.queries[0].results[5].values.length - 1
 						][1] * 100
 					) / 100,
 				revenueTotal: Math.round(this.getTotal(response.data.queries[0].results[4].values) * 100) / 100,
@@ -241,7 +244,7 @@ class Home extends Component {
 				remoteAvg: Math.round(this.getAvg(response.data.queries[0].results[2].values) * 100) / 100,
 				fingerPrintTotal: Math.round(
 					response.data.queries[0].results[0].values[
-						response.data.queries[0].results[0].values.length - 1
+					response.data.queries[0].results[0].values.length - 1
 					][1] * 100
 				) / 100,
 				fingerPrintMax: Math.round(this.getMax(response.data.queries[0].results[0].values) * 100) / 100,
@@ -249,7 +252,7 @@ class Home extends Component {
 				fingerPrintAvg: Math.round(this.getAvg(response.data.queries[0].results[0].values) * 100) / 100,
 				keycardTotal: Math.round(
 					response.data.queries[0].results[3].values[
-						response.data.queries[0].results[3].values.length - 1
+					response.data.queries[0].results[3].values.length - 1
 					][1] * 100
 				) / 100,
 				keycardMax: Math.round(this.getMax(response.data.queries[0].results[3].values) * 100) / 100,
@@ -343,7 +346,7 @@ class Home extends Component {
 						/>
 					</Row>
 					<Row>
-						<Mapbox />
+						<Mapbox allDeviceInfo={allDeviceInfo} />
 					</Row>
 					<Row>
 						<DataCard

src/components/Mapbox.js

@@ -14,12 +14,25 @@ const Data = [
 	{ id: 5, position: [100.679211, 13.826122], name: 'Fashion Island' },
 ];
 
-export default class Mapbox extends React.Component {
+export default class Mapbox extends React.PureComponent {
 	state = {
-		center: [100.523186, 13.736717],
+		center: undefined,
 		active: undefined,
-		zoom: [5],
+		zoom: [15],
+		data:[]
 	};
+
+	componentDidUpdate = () => {
+		if (this.props.allDeviceInfo) {
+			let data1 = this.props.allDeviceInfo;
+			this.setState({
+				data: data1,
+				center:data1[0].position,
+				active:data1[0]
+			});
+		}
+	};
+
 	render() {
 		const { center, active, zoom } = this.state;
 		return (
@@ -46,20 +59,20 @@ export default class Mapbox extends React.Component {
 							'circle-stroke-opacity': 1,
 						}}
 					>
-						{Object.keys(Data).map((item, index) => (
+						{Object.keys(this.state.data).map((item, index) => (
 							<Feature
 								key={item}
-								coordinates={Data[item].position}
+								coordinates={this.state.data[item].position}
 								onMouseEnter={() =>
 									this.setState({
-										active: Data[item],
+										active: this.state.data[item],
 									})
 								}
 								onClick={() =>
 									this.setState({
-										center: Data[item].position,
-										zoom: [14],
-										active: Data[item],
+										center: this.state.data[item].position,
+										zoom: [15],
+										active: this.state.data[item],
 									})
 								}
 							/>