homeflowjs 0.7.29 → 0.8.2

package/actions/properties.actions.js

@@ -188,3 +188,8 @@ export const fetchSavedProperties = () => (dispatch) => {
     })
     .catch(() => dispatch(setSavedProperties([])));
 };
+
+export const setSelectedMarker = (payload) => ({
+  type: PropertiesActionTypes.SET_SELECTED_MARKER,
+  payload,
+});

package/actions/properties.types.js

@@ -6,6 +6,7 @@ const PropertiesActionTypes = {
   LOAD_NEXT: 'LOAD_NEXT',
   SET_PAGINATION: 'SET_PAGINATION',
   SET_PROPERTY_LINKS: 'SET_PROPERTY_LINKS',
+  SET_SELECTED_MARKER: 'SET_SELECTED_MARKER',
 };
 
 export default PropertiesActionTypes;

package/branches/branch-map/branch-map.component.jsx

@@ -32,6 +32,8 @@ class BranchMap extends React.Component {
       zoom,
       disableStreetview,
       custom,
+      iconConfig,
+      fullscreenControl,
     } = this.props;
 
     // Should this be added to Redux?
@@ -45,6 +47,8 @@ class BranchMap extends React.Component {
       scrollWheel,
       zoom,
       streetViewControl: !disableStreetview,
+      zoomControl: false,
+      fullscreenControl: false,
     };
 
     if (custom === 'simple_bw') {
@@ -52,9 +56,11 @@ class BranchMap extends React.Component {
     }
 
     const map = new google.maps.Map(document.getElementById('hfjs-branch-map'), options);
-    const marker = new google.maps.Marker({
+
+    new google.maps.Marker({
       position: { lat: branch.lat, lng: branch.lng },
       map,
+      icon: iconConfig.iconUrl,
     });
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.7.29",
+  "version": "0.8.2",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

package/properties/properties-display/properties-display.component.jsx

@@ -0,0 +1,95 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { handleScroll, propertiesByPage } from '../property-utils/property-utils';
+import { uniqueKey } from '../../utils';
+
+const ConditionalWrapper = ({ condition, wrapper, children }) => (
+  condition ? wrapper(children) : children
+);
+
+const PropertiesDisplay = ({
+  properties,
+  Item,
+  displayType,
+  infiniteScroll,
+  inserts,
+  ...other
+}) => {
+  const onScroll = () => {
+    handleScroll(infiniteScroll);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', onScroll);
+
+    return function cleanUp() {
+      window.removeEventListener('scroll', onScroll);
+    };
+  });
+
+  if (!properties.length) {
+    return (
+      <p>There were no properties matching your search.</p>
+    );
+  }
+  const addWrapper = displayType === 'list';
+
+  const items = propertiesByPage(properties).map((page) => (
+    <ConditionalWrapper
+      condition={addWrapper}
+      wrapper={(children) => (
+        <div
+          data-result-page={page[0].resultPage}
+          key={uniqueKey()}
+          className={`clearfix results-page--${displayType}`}
+        >
+          {children}
+        </div>
+      )}
+    >
+      {page.map((property, index) => {
+        /**
+         * TODO: Allow for multiple inserts
+         * This code only allows one insert from the inserts array to be show at a time
+         */
+        if (inserts && (index % inserts[0].frequency) === 0 && index !== 0) {
+          return (
+            <>
+              {inserts[0].component}
+              <Item key={property.property_id} property={property} {...other} />
+            </>
+          );
+        }
+        return (
+          <Item key={property.property_id} property={property} {...other} />
+        );
+      })}
+    </ConditionalWrapper>
+  ));
+
+  return (
+    <div className={`hf-property-results hf-property-results__${displayType}`}>
+      {items}
+    </div>
+  );
+};
+
+PropertiesDisplay.propTypes = {
+  properties: PropTypes.array.isRequired,
+  Item: PropTypes.elementType.isRequired,
+  displayType: PropTypes.string.isRequired,
+  infiniteScroll: PropTypes.bool.isRequired,
+  inserts: PropTypes.array,
+};
+
+PropertiesDisplay.defaultProps = {
+  inserts: null,
+};
+
+const mapStateToProps = (state) => ({
+  properties: state.properties.properties || [],
+});
+
+export default connect(mapStateToProps)(PropertiesDisplay);

package/properties/properties-grid/properties-grid.component.jsx

@@ -1,52 +1,18 @@
-import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import { uniqueKey } from '../../utils';
-import { handleScroll, propertiesByPage } from '../property-utils/property-utils';
+import PropertiesDisplay from '../properties-display/properties-display.component';
 
-const PropertiesGrid = ({ properties, GridItem, infiniteScroll }) => {
-  const onScroll = () => {
-    handleScroll(infiniteScroll);
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', onScroll);
-
-    return function cleanUp() {
-      window.removeEventListener('scroll', onScroll);
-    };
-  });
-
-  if (!properties.length) {
-    return (
-      <p>There were no properties matching your search.</p>
-    );
-  }
-
-  const items = propertiesByPage(properties).map((page) =>
-    page.map((property) => (
-      <GridItem key={property.property_id} property={property} />
-    )
-  )).flat();
-
-  return (
-    <div className="hf-property-results hf-property-results__list">
-      <div className="clearfix results-page--grid">
-        {items}
-      </div>
-    </div>
-  );
-};
+const PropertiesGrid = ({ GridItem, ...other }) => (
+  <PropertiesDisplay
+    Item={GridItem}
+    displayType="grid"
+    {...other}
+  />
+);
 
 PropertiesGrid.propTypes = {
-  properties: PropTypes.array.isRequired,
   GridItem: PropTypes.elementType.isRequired,
-  infiniteScroll: PropTypes.bool.isRequired,
 };
 
-const mapStateToProps = (state) => ({
-  properties: state.properties.properties,
-});
-
-export default connect(mapStateToProps)(PropertiesGrid);
+export default PropertiesGrid;

package/properties/properties-list/properties-list.component.jsx

@@ -1,56 +1,18 @@
-import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import { handleScroll, propertiesByPage } from '../property-utils/property-utils';
-import { uniqueKey } from '../../utils';
+import PropertiesDisplay from '../properties-display/properties-display.component'
 
-const PropertiesList = ({ properties, ListItem, infiniteScroll }) => {
-  const onScroll = () => {
-    handleScroll(infiniteScroll);
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', onScroll);
-
-    return function cleanUp() {
-      window.removeEventListener('scroll', onScroll);
-    };
-  });
-
-  const propertiesToRender = properties || [];
-
-  const items = propertiesByPage(propertiesToRender).map((page) => (
-    <div
-      data-result-page={page[0].resultPage}
-      key={uniqueKey()}
-      className="clearfix results-page--list"
-    >
-      {page.map((property) => (
-        <ListItem key={property.property_id} property={property} />
-      ))}
-    </div>
-  ));
-
-  return (
-    <div className="hf-property-results hf-property-results__list">
-      {items}
-    </div>
-  );
-};
+const PropertiesList = ({ ListItem, ...other}) => (
+  <PropertiesDisplay
+    Item={ListItem}
+    displayType="list"
+    {...other}
+  />
+);
 
 PropertiesList.propTypes = {
-  properties: PropTypes.array,
   ListItem: PropTypes.elementType.isRequired,
-  infiniteScroll: PropTypes.bool.isRequired,
-};
-
-PropertiesList.defaultProps = {
-  properties: [],
 };
 
-const mapStateToProps = state => ({
-  properties: state.properties.properties,
-});
-
-export default connect(mapStateToProps)(PropertiesList);
+export default PropertiesList;

package/properties/properties-map/draggable-map.js

@@ -5,7 +5,7 @@ import base64 from '../../utils/base64';
 import store from '../../store';
 import { buildQueryString } from '../../search/property-search/property-search';
 import { setPlace, setSearchField } from '../../actions/search.actions';
-import { setProperties } from '../../actions/properties.actions';
+import { setProperties, setSelectedMarker } from '../../actions/properties.actions';
 import { setLoading } from '../../actions/app.actions';
 
 const element = function (X, Y) {
@@ -23,6 +23,18 @@ export default class DraggableMap {
     this.render = this.render.bind(this);
     this.generateMap = this.generateMap.bind(this);
     this.properties = this.getProperties();
+    if (Homeflow.get('select_marker_on_click')) {
+      this.selectedMarker = null;
+      store.subscribe(() => {
+        const newSelectedMarker = store.getState().properties.selectedMarker;
+        const newSelectedPropertyID = newSelectedMarker ? newSelectedMarker.property.property_id : null;
+        const stateSelectedPropertyID = this.selectedMarker ? this.selectedMarker.property.property_id : null;
+
+        if (newSelectedPropertyID !== stateSelectedPropertyID) {
+          this.activateMarker(newSelectedMarker);
+        }
+      })
+    }
   }
 
   getSearch() {
@@ -42,7 +54,9 @@ export default class DraggableMap {
       this.render();
       this.buildPolygon();
       const properties = this.properties;
-      if (properties != null) { this.addMarkersFor(properties); }
+      if (properties != null) {
+        this.setMarkersFor(properties);
+      }
       if (this.noLocationfound) { this.setToMarkeredBounds(); }
       if (Homeflow.get('custom_map_zoom')) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
@@ -58,10 +72,12 @@ export default class DraggableMap {
     // if (lastSearch = Ctesius.getUserHistoryCollection().last()) {
     //   Ctesius.storedPlace = lastSearch.get('place');
     // }
+
     this.generateMap();
     if (!Homeflow.get('free_text_search')) { this.map.on('zoomend', () => (this.onMapDrag())); }
     this.map.on('dragend', () => (this.onMapDrag()));
     const _this = this;
+
     return this.map.on('popupopen', function (e) {
       Homeflow.kickEvent('map_marker_opened', e);
       const px = _this.map.project(e.popup._latlng);
@@ -72,28 +88,39 @@ export default class DraggableMap {
     });
   }
 
-  generateMarker(property) {
-    let markerIcon;
-    // TODO: Re-add custom pins
+  activateMarker(marker) {
+    if (this.selectedMarker) {
+      this.selectedMarker.setIcon(this.generateMarkerIcon(this.selectedMarker.property));
+    }
+    this.selectedMarker = marker;
+    if (this.selectedMarker) this.selectedMarker.setIcon(this.generateMarkerIcon(marker.property));
+  }
+
+  generateMarkerIcon(property) {
     if (Homeflow.get('custom_property_pin') != null) {
-      markerIcon = Homeflow.get('custom_property_pin')(property);
+      return Homeflow.get('custom_property_pin')(property);
     } else {
-      let left, left1, left2, left3, left4;
+      let left, left1, left2, left3, left4, left5;
       const markerIconImage = (left = Homeflow.get('custom_map_icon')) != null ? left : '/assets/leaflet/marker-icon.png';
       const markerIconSize = (left1 = Homeflow.get('custom_map_icon_size')) != null ? left1 : [25, 41];
       const markerShadowUrl = (left2 = Homeflow.get('custom_map_shadow')) != null ? left2 : '/assets/leaflet/marker-shadow.png';
       const markerShadowSize = (left3 = Homeflow.get('custom_map_shadow_icon_size')) != null ? left3 : [41, 41];
       const pinAnchor = (left4 = Homeflow.get('custom_map_icon_offset')) != null ? left4 : [12, 41];
-      markerIcon = new L.Icon.Default({
+      const shadowAnchor = (left5 = Homeflow.get('custom_map_shadow_anchor')) != null ? left5 : [12, 41];
+
+      return new L.Icon.Default({
         iconUrl: markerIconImage,
         iconSize: markerIconSize,
+        iconAnchor: pinAnchor,
         shadowUrl: markerShadowUrl,
         shadowSize: markerShadowSize,
-        iconAnchor: pinAnchor
+        shadowAnchor: shadowAnchor,
       });
     }
+  }
 
-    const marker = L.marker([property.lat, property.lng], { icon: markerIcon });
+  generateMarker(property) {
+    const marker = L.marker([property.lat, property.lng], { icon: this.generateMarkerIcon(property) });
 
     // add the property to marker attributes so they can be accessed on click
     marker.property = property;
@@ -115,11 +142,12 @@ export default class DraggableMap {
     }
 
     marker.on('click', e => Homeflow.kickEvent('map_marker_clicked', e.target));
-
+    if (Homeflow.get('select_marker_on_click')) {
+      marker.on('click', e => store.dispatch(setSelectedMarker(e.target)));
+    }
     return window['map_marker_' + property.property_id] = marker;
   }
 
-
   generateGeoFeature(geo_feature) {
     let left, left1, left2, left3;
     const markerIconImage = (left = Homeflow.get('custom_map_icon')) != null ? left : (Homeflow.get('root_url') + 'assets/leaflet/marker-icon.png');
@@ -164,8 +192,11 @@ export default class DraggableMap {
 
   generateMap(map_options) {
     const zoomMax = Homeflow.get('custom_max_zoom') ? Homeflow.get('custom_max_zoom') : 16;
+    const zoomPosition = Homeflow.get('custom_map_zoom_location') ? Homeflow.get('custom_map_zoom_location') : '';
+
     if (map_options == null) {
       map_options = {
+        ...(zoomPosition !== '') && {zoomControl: false},
         minZoom: 6,
         maxZoom: zoomMax,
         scrollWheelZoom: Homeflow.get('enable_scroll_wheel_zoom'),
@@ -174,6 +205,7 @@ export default class DraggableMap {
     }
 
     this.map = new L.Map(this.element, map_options);
+    if (zoomPosition !== '') new L.Control.Zoom({ position: zoomPosition }).addTo(this.map);
 
     const tileLayer = Homeflow.get('leaflet_layer');
     let layer;
@@ -205,8 +237,10 @@ export default class DraggableMap {
     }
   }
 
-  addMarkersFor(properties) {
+  setMarkersFor(properties) {
     let bounds;
+    if (this.marker_layer != null) { this.map.removeLayer(this.marker_layer); }
+    if (!properties) { return null }
 
     if (Homeflow.get('pin_clustering')) {
       let radius = Homeflow.get('custom_clustering_radius');
@@ -247,23 +281,69 @@ export default class DraggableMap {
     }
   }
 
+  buildSubPolygon(polygon, extraPolygon, style = null) {
+    let bounds = [];
+    const points = [];
+    polygon.forEach(ar => {
+      const a = new L.LatLng(ar[1], ar[0]);
+      bounds.push(a);
+      return points.push(a);
+    });
+    polygon = new L.Polygon(points,
+      { weight: 10, fill: true }
+    );
+    // @drawnItems.addLayer polygon
+    this.map.fire("draw:created", {
+      layer: polygon,
+      layerType: polygon.type,
+      i: 0,
+      placePoly: true,  //Build subPolygon(s) is only used to draw place polygon or extended radius polygons so no need to update the search state with poly
+      additionalDrawing: extraPolygon,
+      polyStyle: style,
+    });
+    return new L.LatLngBounds(bounds);
+  }
+  buildSubPolygons(polygons) {
+    //TODO: Clear existing polygons
+    let bounds = null;
+    let extraPolygon = false;
+    polygons.forEach(polygon => {
+      const extraBounds = this.buildSubPolygon(polygon, extraPolygon);
+      extraPolygon = true;
+      if (bounds === null) {
+        bounds = extraBounds;
+      } else {
+        bounds.extend(extraBounds)
+      }
+    });
+    return bounds;
+  }
 
   buildPolygon() {
-    let bounds, polygon;
-    if (Homeflow.get('enable_draw_a_map') && (this.getSearch().poly != null)) {
-      bounds = [];
-      polygon = new L.Polygon.fromEncoded(this.getSearch().poly);
-      bounds = polygon.getBounds();
+    const search = this.getSearch();
+    if (Homeflow.get('enable_draw_a_map') && (search.poly != null)) {
+      const polygon = new L.Polygon.fromEncoded(search.poly);
+      const polygonBounds = polygon.getBounds();
+
       this.map.fire("draw:created", {
         layer: polygon,
-        layerType: polygon.type
-      }
-      );
-      return this.map.fitBounds(bounds);
+        layerType: polygon.type,
+        placePoly: false.valueOf,
+      });
+      return this.map.fitBounds(polygonBounds);
+
     } else if (Homeflow.get('place') != null) {
       let center;
       const place = Homeflow.get('place');
-      if ((place.radius != null) && (place.radius !== '')) {
+      if (search.expandedPolygon && Homeflow.get('enable_polygon_radius_search')) {
+        const expandedStyle = { weight: 2,  dashArray: "8 8", color: '#000' }
+        if (place.polygon.length === 1) this.buildSubPolygons(place.polygon);
+
+        const bounds = this.buildSubPolygon(search.expandedPolygon, true, expandedStyle);
+
+        return this.map.fitBounds(bounds);
+
+      } else if ((place.radius != null) && (place.radius !== '')) {
         this.circle = new L.circle([place.lat, place.lng], place.radius * 1000, {
           fill: false,
           weight: 0
@@ -271,33 +351,16 @@ export default class DraggableMap {
         this.map.addLayer(this.circle);
         center = new L.LatLng(place.lat, place.lng);
         return this.map.fitBounds(this.circle.getBounds());
+
       } else if ((place.polygon != null) && (place.polygon.length > 0)) {
-        bounds = [];
-        place.polygon.forEach(polygon => {
-          const points = [];
-          polygon.forEach(ar => {
-            const a = new L.LatLng(ar[1], ar[0]);
-            bounds.push(a);
-            return points.push(a);
-          });
-          polygon = new L.Polygon(points,
-            { weight: 10, fill: true }
-          );
-          // @drawnItems.addLayer polygon
-          return this.map.fire("draw:created", {
-            layer: polygon,
-            layerType: polygon.type,
-            i: 0
-          }
-          );
-        });
-        return this.map.fitBounds(new L.LatLngBounds(bounds));
+        const placeBounds = this.buildSubPolygons(place.polygon)
+        return this.map.fitBounds(placeBounds);
+
       } else {
         center = new L.LatLng(place.lat, place.lng);
         return this.map.setView(center, 12);
       }
     } else {
-      //@map.setView([51.505, -0.09], 12)
       return this.noLocationfound = true;
     }
   }
@@ -307,7 +370,8 @@ export default class DraggableMap {
     if (!Homeflow.get('disable_draggable_map')) {
       let url;
       const bounds = this.getSearchableBounds();
-      if (this.mapLoadedTimes === 1) {
+      const has_expanded = this.getSearch().expandedPolygon;
+      if (this.mapLoadedTimes === 1 || has_expanded ) {
         url = `/search.ljson?${buildQueryString(this.getSearch())}/view-${bounds.toBBoxString()}&count=50`;
       } else {
         // unset place
@@ -327,20 +391,19 @@ export default class DraggableMap {
       if (Homeflow.get('map_branch_id') != null) {
         url = url + "&branch_id=" + Homeflow.get('map_branch_id');
       }
-      Homeflow.kickEvent('before_draggable_map_updated'); //use to show some loading?
+      Homeflow.kickEvent('before_draggable_map_updated');
       return fetch(url)
               .then((response) => response.json())
               .then(json => {
                 Homeflow.kickEvent('draggable_map_updated', json);
                 this._running_update = false;
-                if (this.marker_layer != null) { this.map.removeLayer(this.marker_layer); }
+
                 this.properties = json.properties;
                 // TODO: figure out what 'tile view' is
                 // if (this.tile_view != null) {
                 //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
                 // }
-
-                return this.addMarkersFor(this.properties);
+                return this.setMarkersFor(this.properties);
               });
     }
   }
@@ -449,30 +512,22 @@ export default class DraggableMap {
     return params.join("/");
   }
 
-
   updateURL() {
     let new_location = window.location.pathname.replace(/(.*\/sales|lettings).*/, '$1');
     new_location = new_location + '/' + this.searchToHomeflowUrlParams(true) + window.location.hash;
     return window.history.replaceState("NaN", document.title, new_location);
   }
 
-
-
   onPolygonDrawn(layer, with_update) {
     let geo_url, url;
     if (with_update == null) { with_update = true; }
     const s = this.getSearch();
-
-    if (with_update && ((this.first != null) && (this.first === false))) {
+    if (with_update) {
       const encodedPoly = L.PolylineUtil.encode(this.buildDrawnPolygon(layer));
       store.dispatch(setSearchField({ poly: encodedPoly }));
       s.poly = encodedPoly;
-      // store.dispatch(setSearchField({ poly: L.PolylineUtil.encode(this.buildDrawnPolygon(layer)) }));
-      // s.poly = L.PolylineUtil.encode(this.buildDrawnPolygon(layer));
     }
 
-    // debugger;
-
     if (s.poly) {
       url = `/search.ljson?${buildQueryString(s)}&count=50`;
       geo_url = `geo_features.ljson?${buildQueryString(s)}&count=50`;
@@ -494,7 +549,6 @@ export default class DraggableMap {
     //     return this.addGeoMarkers(res);
     //   });
     // }
-    this.addMarkersFor(this.properties);
 
     // TODO: Rewrite this to use fetch() and update redux store
     fetch(url)
@@ -506,14 +560,13 @@ export default class DraggableMap {
           Homeflow.kickEvent('clear_search_box');
           Homeflow.kickEvent('draggable_map_updated', json);
           this._running_update = false;
-          if (this.marker_layer != null) { this.map.removeLayer(this.marker_layer); }
           this.properties = json.properties;
 
           // if (this.tile_view != null) {
           //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
           // }
 
-          return this.addMarkersFor(json.properties);
+          return this.setMarkersFor(json.properties);
       })
     // return $.get(url, (res, status, xhr) => {
     //   s.set('performed_data', res);
@@ -529,7 +582,7 @@ export default class DraggableMap {
     //   }
     //   else { }
     //   //@tile_view.collection(@collection)
-    //   return this.addMarkersFor(this.collection.models);
+    //   return this.setMarkersFor(this.collection.models);
     // });
   }
 

package/properties/properties-map/drawable-map.js

@@ -27,12 +27,12 @@ export default class DrawableMap extends DraggableMap {
     if (this.drawnItems.getLayers().length === 0) {
       return super.onMapDrag();
     } else {
-      return this.onPolygonDrawn(this.drawnItems.getLayers()[0], true);
+      return this.onPolygonDrawn(this.drawnItems.getLayers()[0], false);
     }
   }
 
   repositionDrawControls() {
-    let newControlsContainer = Ctesius.getConfig('draw_controls_container');
+    let newControlsContainer = Homeflow.get('draw_controls_container');
     if (newControlsContainer) {
       const oldControlsContainer = this.drawControl.getContainer().parentNode;
       newControlsContainer = document.getElementById(newControlsContainer);
@@ -47,65 +47,81 @@ export default class DrawableMap extends DraggableMap {
   }
 
   generateMap(map_options) {
-    const zoomMax = Ctesius.getConfig('custom_max_zoom') ? Ctesius.getConfig('custom_max_zoom') : 16;
+    const zoomMax = Homeflow.get('custom_max_zoom') ? Homeflow.get('custom_max_zoom') : 16;
+    const drawLocation = Homeflow.get('custom_map_draw_location') ? Homeflow.get('custom_map_draw_location') : 'bottomleft';
+
     map_options = {
       minZoom: 6,
       maxZoom: zoomMax,
-      scrollWheelZoom: Ctesius.getConfig('enable_scroll_wheel_zoom'),
+      scrollWheelZoom: Homeflow.get('enable_scroll_wheel_zoom'),
       'zoomControl': false,
-      dragging: !Ctesius.getConfig('disable_drag_for_drawable_map')
+      dragging: !Homeflow.get('disable_drag_for_drawable_map')
     };
+    if (!Homeflow.get('custom_map_zoom_location')) Homeflow.set('custom_map_zoom_location', 'topright');
+
     super.generateMap(map_options);
     this.drawnItems = new L.FeatureGroup();
     this.map.addLayer(this.drawnItems);
-    this.titleControl = new L.Control.Title();
-    this.map.addControl(this.titleControl);
-    new L.Control.Zoom({ position: "topright" }).addTo(this.map);
-
-
-    this.drawControl = new L.Control.Draw({
-      position: 'topleft',
-      edit: {
-        featureGroup: this.drawnItems,
-        remove: true,
-      },
-      draw: {
-        freehand: {
+    if (!Homeflow.get('disable_draw_a_search')) {
+      this.titleControl = new L.Control.Title({position: drawLocation});
+      this.map.addControl(this.titleControl);
+
+      this.drawControl = new L.Control.Draw({
+        position: drawLocation,
+        edit: {
           featureGroup: this.drawnItems,
-          simplifyFunction: Hull.parseVertices
+          remove: true,
+        },
+        draw: {
+          freehand: {
+            featureGroup: this.drawnItems,
+            simplifyFunction: Hull.parseVertices
+          }
         }
-      }
-    });
+      });
 
-    this.map.addControl(this.drawControl);
+      this.map.addControl(this.drawControl);
+    }
 
     this.map.on("draw:created", e => {
-      this.drawnItems.clearLayers();
-      if (this.marker_layer) { this.map.removeLayer(this.marker_layer); }
-      if (this.geo_marker_layer != null) { this.map.removeLayer(this.geo_marker_layer); }
-      if (this.circle != null) { this.map.removeLayer(this.circle); }
+      const { additionalDrawing, layer, polyStyle } = e
+      if (!additionalDrawing) {
+        this.drawnItems.clearLayers();
+        if (this.marker_layer) { this.map.removeLayer(this.marker_layer); }
+        if (this.geo_marker_layer != null) { this.map.removeLayer(this.geo_marker_layer); }
+        if (this.circle != null) { this.map.removeLayer(this.circle); }
+      }
       // TODO: where does `poly` come from?
       // const poly_updater = map => Ctesius.getSearch().set('poly', decodeURIComponent(poly));
-      const poly_updater = map => store.dispatch(setSearchField({ poly: base64.encode(poly) }));
+      if (!e.placePoly) {
+        const poly_updater = map => store.dispatch(setSearchField({ poly: base64.encode(poly) }));
+        Homeflow.registerEvent('properties_map_toggle_view_displayed', poly_updater, 1);
+      }
+      if (polyStyle) {
+        if (polyStyle.color) layer.options.color = polyStyle.color;
+        if (polyStyle.weight) layer.options.weight = polyStyle.weight;
+        if (polyStyle.dashArray) layer.options.dashArray = polyStyle.dashArray;
+        if (polyStyle.fillColor) layer.options.fillColor = polyStyle.fillColor;
+        else layer.options.fill = false;
+        if (polyStyle.fillOpacity) layer.options.fillOpacity = polyStyle.fillOpacity;
 
-      Ctesius.registerEvent('properties_map_toggle_view_displayed', poly_updater, 1);
-      const type = e.layerType;
-      const {
-        layer
-      } = e;
-      layer.options.color = Ctesius.getConfig('polygon_color');
-      layer.options.fillColor = Ctesius.getConfig('polygon_fill_color');
-      layer.options.fillOpacity = 0.1;
-      if (Ctesius.getConfig('polygon_stroke_weight')) {
-        layer.options.weight = Ctesius.getConfig('polygon_stroke_weight');
+      } else {
+        layer.options.color = Homeflow.get('polygon_color');
+        layer.options.fillColor = Homeflow.get('polygon_fill_color');
+        layer.options.fillOpacity = 0.1;
+        if (Homeflow.get('polygon_stroke_weight')) {
+          layer.options.weight = Homeflow.get('polygon_stroke_weight');
+        }
       }
 
       var poly = layer.encodePath();
       poly = encodeURIComponent(poly);
       this.drawnItems.addLayer(layer);
-      this.onPolygonDrawn(layer);
-      if (!this.first) {
+
+      this.onPolygonDrawn(layer, !e.placePoly);
+      if (!this.first  && !e.placePoly) {
         this.updateURL();
+        if (this.first) { this.first = false; }
 
         // TODO: why do we need to make this request that doesn't do anything?
         // $.get(window.location);
@@ -118,8 +134,6 @@ export default class DrawableMap extends DraggableMap {
       }
 
       Homeflow.kickEvent('poly_url_refresh');
-
-      if (this.first) { this.first = false; }
     });
 
 
@@ -141,7 +155,7 @@ export default class DrawableMap extends DraggableMap {
     });
 
     this.map.on("draw:drawstop", e => {
-      if (Ctesius.getConfig('fit_bounds_after_draw')) {
+      if (Homeflow.get('fit_bounds_after_draw')) {
         setTimeout((() => {
           if (this.marker_layer.getLayers().length > 0) {
             const bounds = [this.drawnItems.getBounds()];
@@ -176,12 +190,13 @@ export default class DrawableMap extends DraggableMap {
           theMap.removeLayer(layer);
         }
       });
-      this.onMapDrag();
+      this.onPolygonDrawn(this.drawnItems.getLayers()[0], true);
+
       return Homeflow.kickEvent('editbannertoggled');
     });
 
     this.map.on("draw:deletestart", e => {
-      if (Ctesius.getConfig('instant_delete_polygon')) {
+      if (Homeflow.get('instant_delete_polygon')) {
         this.drawnItems.clearLayers();
         if (this.marker_layer) { this.map.removeLayer(this.marker_layer); }
         if (this.geo_marker_layer != null) { return this.map.removeLayer(this.geo_marker_layer); }
@@ -197,7 +212,8 @@ export default class DrawableMap extends DraggableMap {
       let countOfEditedLayers = 0;
       layers.eachLayer(layer => {
         const poly = encodeURIComponent(layer.encodePath());
-        this.onPolygonDrawn(layer);
+
+        this.onPolygonDrawn(layer, true);
         this.updateURL();
         window.location.hash = "map/" + poly;
         countOfEditedLayers++;

package/properties/properties-map/properties-map.component.jsx

@@ -48,9 +48,10 @@ window.$ = () => ({
 // )
 // end
 
-const PropertiesMap = ({ leaflet, gmapKey }) => {
+const PropertiesMap = ({ leaflet, gmapKey, googleLayer }) => {
   const addLegacyMaps = () => {
-    if (!leaflet && !document.getElementById('hfjs-gmaps') && gmapKey) {
+    const needsGoogle = !leaflet || googleLayer;
+    if (needsGoogle && !document.getElementById('hfjs-gmaps') && gmapKey) {
       const gmapScript = document.createElement('script');
       gmapScript.setAttribute('src', `https://maps.google.com/maps/api/js?key=${gmapKey}`);
       gmapScript.setAttribute('id', 'hfjs-gmaps');
@@ -63,6 +64,8 @@ const PropertiesMap = ({ leaflet, gmapKey }) => {
       script.setAttribute('id', 'hfjs-legacy-maps');
       script.setAttribute('onload', 'window.initLegacyMap()');
       document.head.appendChild(script);
+    } else {
+      window.initLegacyMap();
     }
   };
 
@@ -81,11 +84,13 @@ const PropertiesMap = ({ leaflet, gmapKey }) => {
 PropertiesMap.propTypes = {
   gmapKey: PropTypes.string,
   leaflet: PropTypes.bool,
+  googleLayer: PropTypes.bool,
 };
 
 PropertiesMap.defaultProps = {
   gmapKey: null,
   leaflet: false,
+  googleLayer: false,
 };
 
 const mapStateToProps = (state) => ({

package/properties/property-results/property-results.component.jsx

@@ -6,8 +6,7 @@ import {
 } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import PropertiesList from '../properties-list/properties-list.component';
-import PropertiesGrid from '../properties-grid/properties-grid.component';
+import PropertiesDisplay from '../properties-display/properties-display.component';
 
 import './property-results.styles.scss';
 
@@ -22,34 +21,68 @@ const LazyPropertiesMap = (props) => (
 const PropertyResults = ({
   GridItem,
   ListItem,
+  MapItem,
   defaultView,
   infiniteScroll,
   noMap,
+  inserts,
+  ...other
 }) => (
   <Router>
     <Switch>
       <Route path="/list">
-        <PropertiesList ListItem={ListItem} infiniteScroll={infiniteScroll} />
+        <PropertiesDisplay
+          Item={ListItem}
+          displayType="list"
+          infiniteScroll={infiniteScroll}
+          inserts={inserts}
+          {...other}
+        />
       </Route>
 
       <Route path="/grid">
-        <PropertiesGrid GridItem={GridItem} infiniteScroll={infiniteScroll} />
+        <PropertiesDisplay
+          Item={GridItem}
+          displayType="grid"
+          infiniteScroll={infiniteScroll}
+          inserts={inserts}
+          {...other}
+        />
       </Route>
 
-
-      {!noMap && (
-        <Route path="/map">
+      <Route path="/map">
+        {noMap ? (
+          <PropertiesDisplay
+            Item={MapItem}
+            displayType="map"
+            infiniteScroll={infiniteScroll}
+            inserts={inserts}
+            {...other}
+          />
+        ) : (
           <LazyPropertiesMap />
-        </Route>
-      )}
+        )}
+      </Route>
 
       {defaultView === 'grid' ? (
         <Route>
-          <PropertiesGrid GridItem={GridItem} infiniteScroll={infiniteScroll} />
+          <PropertiesDisplay
+            Item={GridItem}
+            displayType="grid"
+            infiniteScroll={infiniteScroll}
+            inserts={inserts}
+            {...other}
+          />
         </Route>
       ) : (
         <Route>
-          <PropertiesList ListItem={ListItem} infiniteScroll={infiniteScroll} />
+          <PropertiesDisplay
+            Item={ListItem}
+            displayType="list"
+            infiniteScroll={infiniteScroll}
+            inserts={inserts}
+            {...other}
+          />
         </Route>
       )}
     </Switch>
@@ -59,17 +92,21 @@ const PropertyResults = ({
 PropertyResults.propTypes = {
   GridItem: PropTypes.elementType,
   ListItem: PropTypes.elementType,
+  MapItem: PropTypes.elementType,
   defaultView: PropTypes.string,
   infiniteScroll: PropTypes.bool,
   noMap: PropTypes.bool,
+  inserts: PropTypes.array,
 };
 
 PropertyResults.defaultProps = {
   GridItem: null,
   ListItem: null,
+  MapItem: null,
   defaultView: 'list',
   infiniteScroll: false,
   noMap: false,
+  inserts: null,
 };
 
 export default PropertyResults;

package/reducers/properties.reducer.js

@@ -4,6 +4,7 @@ const INITIAL_STATE = {
   properties: [],
   savedProperties: [],
   pagination: {},
+  selectedMarker: null,
   propertyLinks: {
     next: '',
     previous: '',
@@ -37,11 +38,11 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
         ...state,
         propertyLinks: action.payload,
       };
-    case PropertiesActionTypes.TOGGLE_SAVED_PROPERTY:
+    case PropertiesActionTypes.TOGGLE_SAVED_PROPERTY: {
       const propertyId = parseInt(action.payload.propertyId, 10);
       const newSavedProperties = [...state.savedProperties];
 
-      const index = newSavedProperties.findIndex(({ property_id }) => property_id === propertyId);
+      const index = newSavedProperties.findIndex(({ property_id: searchId }) => searchId === propertyId);
 
       if (index > -1) {
         newSavedProperties.splice(index, 1);
@@ -53,22 +54,28 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
         return {
           ...state,
           savedProperties: newSavedProperties,
-        }
-      } else {
-        // need to find the property from the propertiesReducer and add it here
-        const property = state.properties.find(({ property_id }) => property_id === propertyId);
+        };
+      }
 
-        newSavedProperties.push(property || state.property);
+      // need to find the property from the propertiesReducer and add it here
+      const property = state.properties.find(({ property_id: searchId }) => searchId === propertyId);
 
-        if (!action.payload.userLoggedIn) {
-          localStorage.setItem('savedProperties', JSON.stringify(newSavedProperties));
-        }
+      newSavedProperties.push(property || state.property);
 
-        return {
-          ...state,
-          savedProperties: newSavedProperties,
-        }
+      if (!action.payload.userLoggedIn) {
+        localStorage.setItem('savedProperties', JSON.stringify(newSavedProperties));
       }
+
+      return {
+        ...state,
+        savedProperties: newSavedProperties,
+      };
+    }
+    case PropertiesActionTypes.SET_SELECTED_MARKER:
+      return {
+        ...state,
+        selectedMarker: action.payload,
+      };
     default:
       return state;
   }

package/reducers/properties.reducer.test.js

@@ -15,6 +15,14 @@ describe('propertiesReducer', () => {
     expect(reducedState.pagination).toEqual({ page: 2 });
   });
 
+  it('Sets the selected propertymarker when it receives the SET_SELECTED_MARKER action', () => {
+    const state = {};
+    const leafletMaker = { lat: 1, lng: 2 };
+    const reducedState = propertiesReducer(state, { type: 'SET_SELECTED_MARKER', payload: leafletMaker });
+
+    expect(reducedState.selectedMarker).toEqual(leafletMaker);
+  });
+
   it('Sets the saved properties when it receives the SET_SAVED_PROPERTIES action', () => {
     const state = { savedProperties: [] };
     const reducedState = propertiesReducer(state, { type: 'SET_SAVED_PROPERTIES', payload: [1, 2, 3, 4, 5] });

package/search/bedrooms-select/bedrooms-select.component.jsx

@@ -17,6 +17,7 @@ const NormalSelect = ({
   optionClass,
   minBeds,
   maxBeds,
+  placeholder,
   ...otherProps
 }) => (
   <select
@@ -32,7 +33,7 @@ const NormalSelect = ({
       title={`${type} beds`}
       className={optionClass}
     >
-      {capitalizeFirstLetter(type)}. bedrooms
+      {placeholder || `${capitalizeFirstLetter(type)}. bedrooms`}
     </option>
     {bedValues.map((_, i) => (
       <option
@@ -55,6 +56,7 @@ const ReactSelect = (props) => {
     className,
     styles,
     value,
+    placeholder,
   } = props;
 
   const bedOptions = bedValues.map(bedValue => (
@@ -69,7 +71,7 @@ const ReactSelect = (props) => {
       className={className}
       options={bedOptions}
       styles={styles}
-      placeholder={`${capitalizeFirstLetter(type)} bedrooms`}
+      placeholder={placeholder || `${capitalizeFirstLetter(type)} bedrooms`}
       value={bedOptions.find(option => option.value === value)}
       setValue={() => value}
       isSearchable={false}
@@ -118,12 +120,14 @@ BedroomsSelect.propTypes = {
   maxBeds: PropTypes.number,
   setSearchField: PropTypes.func.isRequired,
   optionClass: PropTypes.string,
+  placeholder: PropTypes.string,
 };
 
 BedroomsSelect.defaultProps = {
   bedValues: defaultBedrooms,
   optionClass: '',
-}
+  placeholder: null,
+};
 
 const mapStateToProps = ({ search: { currentSearch } }) => ({
   minBeds: currentSearch.minBeds,

package/search/property-search/property-search.js

@@ -27,7 +27,9 @@ export const buildQueryString = (search) => {
     if (Array.isArray(value) && !value.length) continue;
     // only include either q or place ID
     if (key === 'q' && !search.isQuerySearch
-        || key === 'placeId' && search.isQuerySearch) continue;
+        || key === 'placeId' && search.isQuerySearch
+        || key === 'place' && search.isQuerySearch
+        || key === 'poly' && search.isQuerySearch) continue;
 
     // Don't include branch_id if a search term has been entered
     if (key === 'branch_id' && search.isQuerySearch) continue;

package/search/search-form/search-form.component.jsx

@@ -45,6 +45,11 @@ class SearchForm extends Component {
         q: place.name + (place.county_name ? `, ${place.county_name}` : ''),
       });
     }
+    const expandedPolygon = Homeflow.get('expanded_polygon');
+    if (expandedPolygon) {
+      setSearchField({ expandedPolygon });
+      setInitialSearch({ expandedPolygon });
+    }
 
     if (defaultChannel) setSearchField({ channel: defaultChannel });
 
@@ -55,7 +60,6 @@ class SearchForm extends Component {
 
   handleSubmit(e) {
     const { search, submitCallback } = this.props;
-
     e.preventDefault();
 
     if (submitCallback) submitCallback();