Show only what's visible in the current result set

web/components/Listings.js

@@ -20,7 +20,10 @@ export default class Listings extends React.Component {
       const {images} = l;
 
       rendered.push(
-        <div className="property-list-item" onClick={this.onListingClick.bind(this, l.url)}>
+        <div
+          key={l._id}
+          className="property-list-item"
+          onClick={this.onListingClick.bind(this, l.url)}>
           <div className="pli-image">
             <img src={images[0]} alt=""></img>
           </div>

web/components/Main.js

@@ -21,7 +21,6 @@ class Main extends React.Component {
   }
 
   dispatch ({type, action = {}}) {
-    console.log('DISPATCH', this);
     handleMessage({type, action}, this);
   }
 
@@ -33,10 +32,11 @@ class Main extends React.Component {
       streetViewControl: false,
       mapTypeControl: false
     });
-    const marker = new google.maps.Marker({
-      position: uluru,
-      map: map
-    });
+
+    //const marker = new google.maps.Marker({
+      //position: uluru,
+      //map: map
+    //});
 
     var control = document.createElement('div');
     control.classList.add('filters-btn-toggle');
@@ -81,11 +81,25 @@ class Main extends React.Component {
     map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
     this.map = map;
 
+    map.addListener('zoom_changed', () => {
+      console.log('zoom_changed');
+      this.removeAllMarkers();
+      this.markers = [];
+    });
+
     map.addListener('idle', () => {
+      console.log('idle');
       this.refreshListings();
     });
   }
 
+  removeAllMarkers () {
+    if (this.markers) {
+      console.log('removeAllMarkers');
+      this.markers.forEach((m) => m.marker.setMap(null));
+    }
+  }
+
   onCloseClick(e) {
     if (this.state.mapClicked) {
       setTimeout(() => {
@@ -98,7 +112,11 @@ class Main extends React.Component {
     });
   }
 
+  /*
+   * Refreshes search
+   */
   refreshListings() {
+    console.log('refreshListings');
     const map = this.map;
     const {
       rooms,
@@ -109,8 +127,9 @@ class Main extends React.Component {
       category
     } = this.state.filters;
 
+    const bounds     = map.getBounds();
     const properties = loadProperties({
-      bounds: map.getBounds().toUrlValue(),
+      bounds: bounds.toUrlValue(),
       rooms,
       minSize,
       maxSize,
@@ -119,12 +138,37 @@ class Main extends React.Component {
       category
     });
 
+    const markerExists = (id) => {
+      return (this.markers || []).findIndex(m => m.id === id) !== -1;
+    }
+
     properties.then(p => p.text()).then(p => {
+
       const data = JSON.parse(p);
-      console.log('props', data)
+      console.log('results_received');
+
+      const listingExists = (id) => {
+        return data.findIndex(l => l._id === id) !== -1
+      };
+
+
+      const newMarkers = [];
+
+      if (this.markers) {
+        this.markers.forEach((m) => {
+          if (!listingExists(m.id)) {
+            m.marker.setMap(null);
+          } else {
+            newMarkers.push(m);
+          }
+        });
+        console.log('markers_removed');
+      }
+
       for(const [index, prop] of data.entries()) {
         const myLatLng = {lat: prop.loc[0], lng: prop.loc[1]};
 
+        if (!markerExists(p._id)) {
           const marker = new google.maps.Marker({
             position: myLatLng,
             map: map,
@@ -137,12 +181,19 @@ class Main extends React.Component {
               id: prop.url
             }})
           });
+
+          newMarkers.push({
+            marker,
+            id: prop._id
+          });
+        }
       }
 
       this.dispatch({
         type: 'LISTINGS_LOADED',
         action: {
-          listings: data
+          listings: data,
+          newMarkers
         }
       });
     })

web/lib/handlers.js

@@ -52,7 +52,7 @@ const viewListingDetails = ({ type, action }, component) => {
 };
 
 const listingsLoaded = ({ type, action }, component) => {
-  const currentListings = new Map(); //component.state.listings;
+  const currentListings = new Map();
 
   for (const listing of action.listings) {
     currentListings.set(listing.url, listing);
@@ -60,6 +60,8 @@ const listingsLoaded = ({ type, action }, component) => {
 
   component.setState({
     listings: currentListings
+  }, () => {
+    component.markers = action.newMarkers;
   });
 };