Add locations in map

smppir-checkin-portal/src/Components/MapComponent.js

@@ -10,7 +10,7 @@ class MapComponent extends Component {
   constructor() {
     super();
     this.state = {
-      markers: [],
+      markers: undefined,
       hasLocation:false,
       latlng:[-14.424429, -49.265382],
       zoom:4
@@ -35,8 +35,14 @@ class MapComponent extends Component {
       this.setState({markers: this.props.markers})
     }
   }
+  componentWillReceiveProps(nextProps){
+    if(nextProps.markers !== this.props.markers){
+      this.setState({markers: nextProps.markers})
+    }
+  }
   
   render() {
+    console.log(this.state.markers)
     if(this.props.readOnly){
       return (
         <div>
@@ -55,9 +61,9 @@ class MapComponent extends Component {
               <CustomMarker 
                 id={idx}
                 key={`marker-${idx}`} 
-                lat={position.lat} 
-                lng={position.lng} 
-                text={idx===0?<div>{`Você está Aqui`}</div>:<div>{`Ponto ${idx}`}</div>}
+                lat={position.latitude} 
+                lng={position.longitude} 
+                text={<div>{position.geolocation_name}</div>}
                 dragableMarker={false}
                 icon={'default'}
 
@@ -87,8 +93,8 @@ class MapComponent extends Component {
               <CustomMarker 
                 id={idx}
                 key={`marker-${idx}`} 
-                lat={position.lat} 
-                lng={position.lng} 
+                lat={position.latitude} 
+                lng={position.longitude} 
                 text={idx===0?<div>{`Você está Aqui`}</div>:<div>{`Ponto ${idx}`}</div>}
                 delete={idx===0 ? undefined : this.deletedMarker}
                 deleteButton={idx===0 ? false :true}

smppir-checkin-portal/src/Pages/Map.js

@@ -3,23 +3,33 @@ import './Styles/MainPage.css';
 import BarraBrasil from '../Components/BarraBrasil'
 import { Card, Row, Col, Breadcrumb, MenuItem } from 'react-materialize'
 import AppFooter from '../Components/AppFooter'
-import Button from '../Components/Button'
 import NavigationBar from '../Components/NavigationBar'
 import { Redirect } from 'react-router-dom'
 import MapComponent from '../Components/MapComponent'
+import {URL} from '../env'
+import DataFrame from 'dataframe-js';
 
 import './Styles/Login.css'
-
+import axios from 'axios';
 
 class Map extends Component { 
   constructor(props) {
     super(props);
     this.state={
       'redirect':false,
-      'credentials': {}
+      'credentials': {},
+      'data': undefined, //it's a dataframe 
+      'latLng': []
     }
   }
- 
+  componentWillMount(){
+    axios.get(`${URL}geolocations`).then((resp) => {
+      let response = resp.data.result
+      let df = new DataFrame(response)
+      let latLng = df.select('latitude', 'longitude','geolocation_name').toCollection()
+      this.setState({data: df, latLng: latLng})
+    })
+  }
   render() {
     if (this.state.redirect){
       return <Redirect to='/welcome'/>
@@ -36,7 +46,7 @@ class Map extends Component {
               <Row>
               <Col s={12} m={10} offset={'m1'}>
                 <Card className='white' textClassName='black-text'>
-                    <MapComponent readOnly={true}/>
+                    <MapComponent readOnly={true} markers={this.state.latLng}/>
                 </Card>
               </Col>
               </Row>

smppir-checkin-portal/src/Pages/Styles/Map.css

+.listLocations{
+    height: 723px;
+}
\ No newline at end of file