Merge pull request #40 from CodeForPhilly/buttons

Added buttons below map

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to release number versioning.
 - Added Docker containers with docker-compose [#10](https://github.com/CodeForPhilly/third-places/pull/10)
 - Set up Leaflet React component and boiletplate homepage[#7](https://github.com/CodeForPhilly/third-places/issues/7)
 - Added initial Django models & migration [#21](https://github.com/CodeForPhilly/third-places/pull/21)
+- Added buttons at bottom of Map [#40](https://github.com/CodeForPhilly/third-places/pull/40)
 
 ### Changed
 - Made Leaflet map element fullscreen and rmeoved title[#27](https://github.com/CodeForPhilly/third-places/issues/27)

src/app/src/App.tsx

@@ -2,7 +2,6 @@ import './App.css'
 import Map from './Map/Map'
 
 
-
 function App() {
 
   return (

src/app/src/Map/Map.css

@@ -1,4 +1,21 @@
+.leaflet-container-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100vh;
+}
+
 .leaflet-container {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
+  flex-grow: 1;
+}
+
+.button-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  z-index: 1000;
+  width: 100vw;
+  padding: 1rem 0;
+  background-color: white;
 }

src/app/src/Map/Map.tsx

@@ -1,24 +1,32 @@
 import './Map.css'
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
 import 'leaflet/dist/leaflet.css'
+import Button from 'react-bootstrap/Button';
 
 
 function Map() {
-
+  const buttonStyle = {backgroundColor:"#ADD8E6", marginLeft: '1rem', marginRight: '1rem'}
   return (
-    <div className="leaflet-container">    
-      <MapContainer center={[39.952584, -75.165222]} zoom={13} scrollWheelZoom={true}>
-          <TileLayer
-            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          />
-          <Marker position={[39.952584, -75.165222]}>
-            <Popup>
-              This spots got a good vibe
-            </Popup>
-          </Marker>
-      </MapContainer>
+    <div className="leaflet-container-wrapper">
+      <div className="leaflet-container">    
+        <MapContainer center={[39.952584, -75.165222]} zoom={13} scrollWheelZoom={true}>
+            <TileLayer
+              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            <Marker position={[39.952584, -75.165222]}>
+              <Popup>
+                This spots got a good vibe
+              </Popup>
+            </Marker>
+        </MapContainer>
+      </div>
+      <div className="button-container">
+        <Button style={buttonStyle} variant="primary">Near Me</Button>
+        <Button style={buttonStyle} variant="primary">On the Way To</Button>
+        <Button style={buttonStyle} variant="primary">Around Destination</Button>
       </div>
+    </div>
   )
 }