merge

ui/public/index.html

@@ -8,6 +8,10 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css"
     />
+    <link
+      href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

ui/src/components/App.js

@@ -21,14 +21,23 @@ class App extends React.Component {
   };
   render() {
     return (
-      <div
-        className="ui container"
-        style={{ marginTop: '10px', marginBottom: '40px' }}
-      >
-        <SearchBar onSubmit={this.onSearchSubmit} />
-        <ImageList images={this.state.images} />
-        <Uploader />
-        <Map images={this.state.images} />
+      <div>
+        <div className="mapWrapper">
+          <Map images={this.state.images} />
+          <SearchBar onSubmit={this.onSearchSubmit} />
+        </div>
+        <div
+          className="ui container"
+          style={{
+            marginBottom: '40px',
+            overflowY: 'auto',
+            position: 'relative',
+            top: '230px'
+          }}
+        >
+          <ImageList images={this.state.images} />
+          <Uploader />
+        </div>
       </div>
     );
   }

ui/src/components/ImageList.css

@@ -3,10 +3,12 @@
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   grid-gap: 0 10px;
   grid-auto-rows: 10px;
+  max-height: 500px;
+  overflow-y: auto;
 }
 
 .image-list img {
-  width: 250px;
+  width: 100px;
 }
 
 .image-list .status {

ui/src/components/Map.css

@@ -1,8 +1,9 @@
+.mapWrapper {
+}
 .mapContainer {
-  height: 300px;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
-  bottom: 0;
+  height: 300px;
 }

ui/src/components/Map.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import mapboxgl from 'mapbox-gl';
+import './Map.css';
 
 class Map extends React.Component {
   state = { images: [] };
@@ -13,14 +14,26 @@ class Map extends React.Component {
 
   createMarkers = images => {
     console.log('making markers', images);
-    const markers = images.map(image => {
+    this.clearMarkers();
+    let coordinates = [];
+    this.markers = images.map(image => {
+      coordinates.push(image.coordinates);
       return new mapboxgl.Marker()
         .setLngLat(image.coordinates)
         .addTo(this.theMap);
     });
+    if (coordinates.length) {
+      this.contentBounds = new mapboxgl.LngLatBounds(coordinates);
+      this.theMap.fitBounds(this.contentBounds, { padding: 75 });
+    }
   };
 
   clearMarkers = markers => {
+    if (this.markers) {
+      this.markers.forEach(marker => {
+        marker.remove();
+      });
+    }
     // clear them
   };
   render() {

ui/src/components/SearchBar.js

@@ -14,14 +14,18 @@ class SearchBar extends React.Component {
 
   render() {
     return (
-      <div className="ui segment two column stackable grid">
-        <div className="ui ten wide column">
+      <div
+        className="ui segment"
+        style={{ width: '240px', margin: '1rem', padding: '0.5rem' }}
+      >
+        <div className="ui">
           <form className="ui form" onSubmit={this.onFormSubmit}>
             <div className="field">
-              <label htmlFor="imageSearch">Image Search: </label>
+              {/* <label htmlFor="imageSearch">Image Search: </label> */}
               <input
                 type="text"
                 id="imageSearch"
+                placeholder="Search"
                 onChange={e => {
                   this.setState({ term: e.target.value });
                 }}