Add redux and load positions

1 files changed, 19 insertions, 9 deletions

diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 3388d670..0e93ddba 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -1,28 +1,38 @@
 import React, { Component } from 'react';
 import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+import { connect } from 'react-redux'
+
+const mapStateToProps = state => ({
+  positions: state.positions
+});
 
 class MainMap extends Component {
   state = {
-    lat: 51.505,
-    lng: -0.09,
-    zoom: 13,
+    lat: 0,
+    lng: 0,
+    zoom: 3,
   }
 
   render() {
     const position = [this.state.lat, this.state.lng]
+
+    const markers = this.props.positions.map((position) =>
+      <Marker key={position.id.toString()} position={{ lat: position.latitude, lng: position.longitude }}>
+        <Popup>
+          A pretty CSS3 popup. <br /> Easily customizable.
+        </Popup>
+      </Marker>
+    );
+
     return (
       <Map style={{height: this.props.height, width: this.props.width}} center={position} zoom={this.state.zoom}>
         <TileLayer
           attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>'
           url="https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png" />
-        <Marker position={position}>
-          <Popup>
-            A pretty CSS3 popup. <br /> Easily customizable.
-          </Popup>
-        </Marker>
+        {markers}
       </Map>
     )
   }
 }
 
-export default MainMap;
+export default connect(mapStateToProps)(MainMap);