Add map and description to location step with layout adjustments

frontend/src/components/steps/Location.js

@@ -1,15 +0,0 @@
-import Step from '../Step';
-
-export default function LocationStep() {
-    const locationInfoPanel = (
-        <h1>Location Information</h1>
-    )
-
-    const locationSelectionPanel = (
-        <h1>Location Selection</h1>
-    )
-
-    return (
-        <Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
-    )
-}

frontend/src/components/steps/Results.js

@@ -1,5 +1,4 @@
-// import React from 'react'
-import Step from '../Step';
+import Step from './Step';
 import { ListGroup, ListGroupItem } from 'reactstrap';
 
 export default function Results(props) {

frontend/src/components/steps/Soil.js

@@ -1,4 +1,4 @@
-import Step from '../Step';
+import Step from './Step';
 
 export default function SoilVariantStep() {
     const soilVarientInfoPanel = (

frontend/src/components/steps/Step.js

@@ -0,0 +1,29 @@
+import { Row, Col } from 'reactstrap'
+import SampleBackground from '../../assets/img/sample-bg.jpg';
+
+export default function Step(props) {
+    const StepBackgroundImage = props.backgroundImage || SampleBackground
+    const stepBackground = {
+        backgroundImage: `url(${StepBackgroundImage})`
+    };
+
+    return (
+        <div className='step-container' style={stepBackground}>
+            <div className='step-overlay'>
+                {props.contentComponent ? (
+                    props.contentComponent
+                ) : (
+                    <Row style={{height: '100%'}}>
+                        <Col md="5" sm="12">
+                            {props.informationComponent}
+                        </Col>
+                        <Col md="7" sm="12">
+                            {props.selectionComponent}
+                        </Col>
+                    </Row>
+
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/components/steps/location/Location.js

@@ -0,0 +1,22 @@
+import Step from '../Step';
+import LocationSelectorMap from './Map';
+
+export default function LocationStep() {
+    const locationInfoPanel = (
+        <div className='py-5'>
+            <h4>Right Plant Right Place Plant Selector Tool for New Zealand.</h4>
+            <br/>
+            <p>
+                Your native plant selection starts here! Use the map to select a planting site location within New Zealand. On the following pages you will provide more details on your project until the system has enough information to create your plant species list and planting plan. To start, click on the map and pan and zoom to the site location. Once the location is selected, click on the “next step” button to complete the process. Repeat this process for sites at different locations.
+            </p>
+        </div>
+    )
+
+    const locationSelectionPanel = (
+        <LocationSelectorMap />
+    )
+
+    return (
+        <Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
+    )
+}

frontend/src/components/steps/location/Map.js

@@ -0,0 +1,19 @@
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
+
+export default function Map() {
+  return (
+    <div className="map-container">
+      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+        <TileLayer
+          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker position={[51.505, -0.09]}>
+          <Popup>
+            A pretty CSS3 popup. <br /> Easily customizable.
+          </Popup>
+        </Marker>
+      </MapContainer>
+    </div>
+  )
+}