Handle marker icons

web/components/Listings.js

@@ -11,6 +11,15 @@ export default class Listings extends React.Component {
     });
   }
 
+  onMouseEnter (id) {
+    this.props.dispatch({
+      type: 'ON_LISTING_MOUSE_OVER',
+      action: {
+        id
+      }
+    });
+  }
+
   renderListings () {
     const {listings = (new Map())} = this.props;
 
@@ -22,8 +31,9 @@ export default class Listings extends React.Component {
       rendered.push(
         <div
           key={l._id}
+          onMouseEnter={this.onMouseEnter.bind(this, l._id)}
           className="property-list-item"
-          onClick={this.onListingClick.bind(this, l.url)}>
+          onClick={this.onListingClick.bind(this, l._id)}>
           <div className="pli-image">
             <img src={images[0]} alt=""></img>
           </div>

web/components/Main.js

@@ -112,6 +112,15 @@ class Main extends React.Component {
     });
   }
 
+  findMarker (id) {
+    if (!this.markers) {
+      return null;
+    }
+
+    const index = this.markers.findIndex(m => m.id === id);
+    return this.markers[index];
+  }
+
   /*
    * Refreshes search
    */
@@ -138,8 +147,9 @@ class Main extends React.Component {
       category
     });
 
+
     const markerExists = (id) => {
-      return (this.markers || []).findIndex(m => m.id === id) !== -1;
+      return this.findMarker(id) != null;
     }
 
     properties.then(p => p.text()).then(p => {
@@ -168,18 +178,42 @@ class Main extends React.Component {
       for(const [index, prop] of data.entries()) {
         const myLatLng = {lat: prop.loc[0], lng: prop.loc[1]};
 
-        if (!markerExists(p._id)) {
+        if (!markerExists(prop._id)) {
+
           const marker = new google.maps.Marker({
-            position: myLatLng,
-            map: map,
-            title: prop.title
+            position : myLatLng,
+            map      : map,
+            title    : prop.title,
+            icon     : this.defaultMarkerIcon(),
+            id       : prop._id
+          });
+
+          marker.addListener('mouseover', () => {
+            if (marker.id !== this.state.listingId) {
+              marker.setIcon(this.hoveredMarkerIcon());
+            }
+          });
+
+          marker.addListener('mouseout', () => {
+            if (marker.id !== this.state.listingId) {
+              marker.setIcon(this.defaultMarkerIcon());
+            }
           });
 
           marker.addListener('click', () => {
-            console.log('clicking...')
+            console.log('clicking...', prop._id);
+            if (this.state.listingId) {
+              const prevSelected = this.findMarker(this.state.listingId);
+              if (prevSelected) {
+                console.log('prevselected', prevSelected);
+                prevSelected.marker.setIcon(this.defaultMarkerIcon());
+              }
+            }
+
+            marker.setIcon(this.selectedMarkerIcon());
             this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
-              id: prop.url
-            }})
+              id: prop._id
+            }});
           });
 
           newMarkers.push({
@@ -211,6 +245,57 @@ class Main extends React.Component {
     })
   }
 
+  /*
+   * Get default marker icon
+   */
+  defaultMarkerIcon () {
+    const sf     = 0.5;
+    const width  = 48;
+    const height = 64;
+    const icon   = {
+      url        : "static/images/pins_sprite.png",
+      size       : new google.maps.Size(width * sf, height * sf),
+      scaledSize : new google.maps.Size(730 * sf, 102 * sf),
+      origin     : new google.maps.Point(0, 36 * sf)
+    }
+
+    return icon;
+  }
+
+  /*
+   * Hovered marker icon
+   */
+  hoveredMarkerIcon () {
+    const sf     = 0.5;
+    const width  = 61;
+    const height = 82;
+    const icon   = {
+      url        : "static/images/pins_sprite.png",
+      size       : new google.maps.Size(width * sf, height * sf),
+      scaledSize : new google.maps.Size(730 * sf, 102 * sf),
+      origin     : new google.maps.Point(303 * sf, 18 * sf)
+    }
+
+    return icon;
+  }
+
+  /*
+   * Selected marker icon
+   */
+  selectedMarkerIcon () {
+    const sf     = 0.5;
+    const width  = 73;
+    const height = 100;
+    const icon   = {
+      url        : "static/images/pins_sprite.png",
+      size       : new google.maps.Size(width * sf, height * sf),
+      scaledSize : new google.maps.Size(730 * sf, 102 * sf),
+      origin     : new google.maps.Point(655 * sf, 1 * sf)
+    }
+
+    return icon;
+  }
+
   renderRightContent() {
 
     const children = [];

web/lib/handlers.js

@@ -55,7 +55,7 @@ const listingsLoaded = ({ type, action }, component) => {
   const currentListings = new Map();
 
   for (const listing of action.listings) {
-    currentListings.set(listing.url, listing);
+    currentListings.set(listing._id, listing);
   }
 
   component.setState({
@@ -151,7 +151,20 @@ const setCategory = ({type, action}, component) => {
       component.refreshListings();
     }
   );
-}
+};
+
+const onListingMouseOver = ({type, action}, component) => {
+  const marker = component.findMarker(action.id);
+  if (marker) {
+    marker.marker.setIcon(component.hoveredMarkerIcon());
+    marker.marker.setAnimation(google.maps.Animation.BOUNCE);
+    setTimeout(() => {
+      marker.marker.setAnimation(null);
+      marker.marker.setIcon(component.defaultMarkerIcon());
+    } , 710);
+  }
+
+};
 
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
@@ -167,7 +180,8 @@ const handlers = {
   SET_ROOMS: setRooms,
   VIEW_LISTING_DETAILS: viewListingDetails,
   UPDATE_SEARCH: updateSearch,
-  SET_CATEGORY: setCategory
+  SET_CATEGORY: setCategory,
+  ON_LISTING_MOUSE_OVER: onListingMouseOver
 };
 
 export const handleMessage = ({ type, action }, component) => {