First hacky implementation

1 files changed, 29 insertions, 0 deletions

diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
new file mode 100644
index 0000000..27c58bc
--- /dev/null
+++ b/modern/src/MainMap.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+
+class MainMap extends Component {
+  state = {
+    lat: 51.505,
+    lng: -0.09,
+    zoom: 13,
+  }
+
+  render() {
+    const position = [this.state.lat, this.state.lng]
+    return (
+      <Map style={{height: this.props.height, width: this.props.width}} center={position} zoom={this.state.zoom}>
+        <TileLayer
+          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker position={position}>
+          <Popup>
+            A pretty CSS3 popup. <br /> Easily customizable.
+          </Popup>
+        </Marker>
+      </Map>
+    )
+  }
+}
+
+export default MainMap;