Add menu bar buttons

src/App.tsx

@@ -1,19 +1,13 @@
 import React from 'react'
 import Map from './Map'
+import Taskbar from './Taskbar'
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <Map //eslint-disable-next-line
-          style="mapbox://styles/mapbox/light-v9"
-          containerStyle={{
-            height: '100vh',
-            width: '100vw',
-          }}
-          zoom={[6.5]}
-          center={[-123.35, 48.41]}
-        />
+        <Taskbar />
+        <Map />
       </header>
     </div>
   )

src/Map.tsx

@@ -1,10 +1,30 @@
-// import React from 'react';
+import React from 'react'
 import ReactMapboxGL from 'react-mapbox-gl'
+import { ZoomControl } from 'react-mapbox-gl'
 
-const Map = ReactMapboxGL({
+const ReactMap = ReactMapboxGL({
   // accessToken:
   accessToken:
     'pk.eyJ1Ijoic3RvcmNrcGhvdG9zIiwiYSI6ImNrODNvYmc0czAxazMzbW1yZDdyeWZoNjAifQ.PiAIkQrVS4a5c7dBgcElhQ',
 })
 
+class Map extends React.Component {
+  render() {
+    return (
+      <div>
+        <ZoomControl />
+        <ReactMap
+          style="mapbox://styles/mapbox/light-v9"
+          containerStyle={{
+            height: '100vh',
+            width: '100vw',
+          }}
+          zoom={[6.5]}
+          center={[-123.35, 48.41]}
+        />
+      </div>
+    )
+  }
+}
+
 export default Map

src/Taskbar.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+class Taskbar extends React.Component {
+  clearMarkers() {
+    console.log('clearing markers')
+  }
+  addRaw() {
+    console.log('Adding raw observations')
+  }
+  pull() {
+    console.log('Pulling from google sheets')
+  }
+  refresh() {
+    console.log('Refreshing markers')
+  }
+  openSheet() {
+    console.log('Opening google sheeet')
+  }
+  render() {
+    return (
+      <div className="menubar">
+        <button onClick={this.clearMarkers}>Clear new markers</button>
+        <br />
+        <button onClick={this.addRaw}>Add raw observations</button>
+        <br />
+        <button onClick={this.pull}>Pull from Google sheets</button>
+        <br />
+        <button onClick={this.refresh}>Refresh Markers</button>
+        <br />
+        <button onClick={this.openSheet}>Open Google sheets</button>
+      </div>
+    )
+  }
+}
+
+export default Taskbar

src/index.css

@@ -11,3 +11,19 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.menubar{
+  position: fixed;
+  z-index: 10;
+  top: 10px;
+  left: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  background: rgba(0,0,0,0.6);
+}
+
+.menubar > button{
+  font-size: 14px;
+  padding: 3px;
+  margin-bottom: 5px;
+}