add navbar

package.json

@@ -11,6 +11,7 @@
     "@types/openlayers": "^4.6.17",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
+    "bootstrap": "^4.6.0",
     "chokidar": "^3.5.1",
     "dotenv": "^8.2.0",
     "google-spreadsheet": "^3.1.15",

src/App.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
 import MapContainer from './components/MapContainer/MapContainer'
+import NavBar from './components/MapContainer/NavBar'
 
 const App: React.FC = () => {
   return (
-    <div className="App">
-      <h1 style={{ textAlign: 'center' }}> (test OL) Orca Map</h1>
-      <MapContainer />
-    </div>
+    <React.Fragment>
+      <NavBar />
+      <div className="App">
+        <MapContainer />
+      </div>
+    </React.Fragment>
   )
 }
 

src/components/MapContainer/Map/Map.css

@@ -1,9 +1,8 @@
 .ol-map {
-  min-width: 600px;
-  min-height: 500px;
-  margin: 50px;
+  min-width: 90%;
+  min-height: 70%;
+  margin: 50px auto;
   height: 500px;
-  width: '100%';
 }
 
 .ol-control {

src/components/MapContainer/MapContainer.tsx

@@ -25,15 +25,20 @@ const MapContainer: React.FC = () => {
   }, [])
 
   return (
-    <>
-      <div id="cetacean_checkbox" style={{ margin: '0 40vw' }}>
+    <div className="container">
+      <div
+        id="cetacean_checkbox"
+        className="d-flex justify-content-center mt-3"
+      >
         <img
+          className="mr-2"
           src={orca}
           width="25px"
           height="25px"
           alt="possible orca pin"
-        ></img>
+        />
         <input
+          className="m-1"
           type="checkbox"
           checked={showLayer}
           onChange={(event) => setShowLayer(event.target.checked)}
@@ -51,7 +56,7 @@ const MapContainer: React.FC = () => {
           <FullScreenControl />
         </Controls>
       </Map>
-    </>
+    </div>
   )
 }
 

src/components/MapContainer/NavBar.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const NavBar = () => {
+  return (
+    <nav className="navbar navbar-dark bg-primary">
+      <div className="container-fluid">
+        <span className="navbar-brand mb-0 h1">Orca Map (test OL)</span>
+      </div>
+    </nav>
+  )
+}
+
+export default NavBar

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
+import 'bootstrap/dist/css/bootstrap.css'
 
 ReactDOM.render(
   <React.StrictMode>