homeflowjs 0.12.24 → 0.13.0

package/actions/properties.actions.js

@@ -243,7 +243,7 @@ export const setSelectedMarker = (payload) => ({
   payload,
 });
 
-export const setBreadcrumbs = (payload) => ({
-  type: PropertiesActionTypes.SET_BREADCRUMBS,
+export const setGeonames = (payload) => ({
+  type: PropertiesActionTypes.SET_GEONAMES,
   payload,
 });

package/actions/properties.types.js

@@ -8,7 +8,7 @@ const PropertiesActionTypes = {
   SET_PAGINATION: 'SET_PAGINATION',
   SET_PROPERTY_LINKS: 'SET_PROPERTY_LINKS',
   SET_SELECTED_MARKER: 'SET_SELECTED_MARKER',
-  SET_BREADCRUMBS: 'SET_BREADCRUMBS',
+  SET_GEONAMES: 'SET_GEONAMES',
 };
 
 export default PropertiesActionTypes;

package/images/replaceImageDimensions.js

@@ -1,4 +1,6 @@
 const replaceImageDimensions = (src, width = '_', height = '_') => {
+  if (!src) return null;
+
   const srcToArray = src.split('/');
   // /files/photos/12345/6789/my-photo.jpg
   const srcPathWithoutSize = !isNaN(srcToArray[srcToArray.length - 2])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.12.24",
+  "version": "0.13.0",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

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

@@ -7,7 +7,6 @@ import { buildQueryString } from '../../search/property-search/property-search';
 import { setPlace, setSearchField } from '../../actions/search.actions';
 import { setProperties, setSelectedMarker, setPagination } from '../../actions/properties.actions';
 import { setLoading } from '../../actions/app.actions';
-import { currentGeonameId } from '../../utils/index';
 
 const element = function (X, Y) {
   this.X = X;
@@ -24,21 +23,23 @@ export default class DraggableMap {
     this.render = this.render.bind(this);
     this.generateMap = this.generateMap.bind(this);
     this.properties = this.getProperties();
-    this.breadcrumbs = null;
-    if (Homeflow.get('select_marker_on_click')) {
-      this.selectedMarker = null;
-      store.subscribe(() => {
-        const newSelectedMarker = store.getState().properties.selectedMarker;
-        const newSelectedPropertyID = this.markerPropertyIdOrGeonameId(newSelectedMarker);
-        const stateSelectedPropertyID = this.markerPropertyIdOrGeonameId(this.selectedMarker);
-
-        if (newSelectedPropertyID !== stateSelectedPropertyID) {
-          this.activateMarker(newSelectedMarker);
-        }
-      })
-    }
+    this.initOnMarkerClick();
+  }
+
+  initOnMarkerClick() {
+    if (!Homeflow.get('select_marker_on_click')) return;
+
+    this.selectedMarker = null;
 
-    if (Homeflow.get('breadcrumbs_map')) store.subscribe(() => this.handleBreadcrumbsInit());
+    store.subscribe(() => {
+      const newSelectedMarker = store.getState().properties.selectedMarker;
+      const newSelectedPropertyID = newSelectedMarker?.property?.property_id;
+      const stateSelectedPropertyID = this.selectedMarker?.property?.property_id;
+
+      if (newSelectedMarker && newSelectedPropertyID && newSelectedPropertyID !== stateSelectedPropertyID) {
+        this.activateMarker(newSelectedMarker);
+      }
+    });
   }
 
   getSearch() {
@@ -58,7 +59,7 @@ export default class DraggableMap {
       this.render();
       this.buildPolygon();
       this.setMarkers();
-      if (this.noLocationfound || Homeflow.get('breadcrumbs_map')) { this.setToMarkeredBounds(); }
+      if (this.noLocationfound) { this.setToMarkeredBounds(); }
       if (Homeflow.get('custom_map_zoom')) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
       }
@@ -69,11 +70,6 @@ export default class DraggableMap {
   }
 
   render() {
-    // let lastSearch;
-    // if (lastSearch = Ctesius.getUserHistoryCollection().last()) {
-    //   Ctesius.storedPlace = lastSearch.get('place');
-    // }
-
     this.generateMap();
     if (!Homeflow.get('free_text_search')) {
       this.map.on('zoomend', () => (this.onMapDrag()));
@@ -92,17 +88,11 @@ export default class DraggableMap {
   }
 
   activateMarker(marker) {
-    if (this.selectedMarker) {
+    if (this.selectedMarker?.property) {
       this.selectedMarker.setIcon(this.generateMarkerIcon(this.selectedMarker.property));
     }
     this.selectedMarker = marker;
     if (this.selectedMarker) this.selectedMarker.setIcon(this.generateMarkerIcon(marker.property));
-
-    if (marker.property.geoname_id && marker.property.viewport) {
-      this.bounds = this.getViewportBounds(marker.property.viewport);
-      this.map.fitBounds(this.bounds, Homeflow.get('custom_map_bounds_padding'));
-      this.onMapDrag({ markerPlaceId: marker.property.geoname_id });
-    }
   }
 
   generateMarkerIcon(property) {
@@ -153,6 +143,7 @@ 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)));
     }
@@ -260,44 +251,29 @@ export default class DraggableMap {
     const radius = Homeflow.get('custom_clustering_radius') || 10;
 
     this.clusteringMarkerLayer = new L.MarkerClusterGroup({ maxClusterRadius: radius, showCoverageOnHover: false });
-    this.marker_layer = new L.MarkerClusterGroup({ maxClusterRadius: radius, showCoverageOnHover: false });
     this.nonClusteringMarkerLayer = L.featureGroup();
+    this.marker_layer = new L.MarkerClusterGroup({ maxClusterRadius: radius, showCoverageOnHover: false });
   }
 
   setMarkers() {
     this.initLayers();
 
-    if (!this.properties && !this.breadcrumbs) { return null }
-
-
-    if (this.isDisplayProperties()) {
-      this.properties?.map(property => this.setPropertyMarker(property));
-    } else {
-      this.breadcrumbs?.map(breadcrumb => this.setBreadcrumbMarker(breadcrumb));
-    }
+    if (!this.properties) { return null }
 
+    this.properties.map(property => this.setPropertyMarker(property));
     this.clusteringMarkerLayer.addTo(this.map);
-    this.nonClusteringMarkerLayer.addTo(this.map);
 
     return this.bounds;
   }
 
   setPropertyMarker(property) {
-    const geonameId = property.geoname_ids?.slice(-1)[0];
     const layer = Homeflow.get('pin_clustering') ? this.clusteringMarkerLayer : this.nonClusteringMarkerLayer;
 
     if (property.property_id === null || property.lat === 0 || property.lng === 0) return;
-    if (geonameId && Homeflow.get('breadcrumbs_map') && geonameId !== currentGeonameId() && !this.isDisplayProperties()) return;
 
     layer.addLayer(this.generateMarker(property));
   }
 
-  setBreadcrumbMarker(breadcrumb) {
-    if (!breadcrumb.lat || !breadcrumb.lng) return;
-
-    this.nonClusteringMarkerLayer.addLayer(this.generateMarker(breadcrumb));
-  }
-
   setToMarkeredBounds() {
     const viewport = store.getState().search.currentSearch.place?.viewport;
 
@@ -323,17 +299,10 @@ export default class DraggableMap {
     if (this.bounds && this.bounds.isValid()) {
       return this.bounds;
     } else {
-      if (Homeflow.get('breadcrumbs_map') && this.viewport) {
-        const viewportBounds = this.getViewportBounds();
-        if (viewportBounds.flat().find(coordinate => coordinate === Infinity)) return null;
-
-        return L.latLngBounds(...viewportBounds.map(bound => L.latLng(...bound)));
-      } else {
-        const bounds = [this.getTopRightMarkerCoordinates(), this.getBottomLeftMarkerCoordinates()];
-        if (bounds.flat().find(coordinate => coordinate === Infinity)) return null;
+      const bounds = [this.getTopRightMarkerCoordinates(), this.getBottomLeftMarkerCoordinates()];
+      if (bounds.flat().find(coordinate => coordinate === Infinity)) return null;
 
-        return L.latLngBounds(...bounds.map(bound => L.latLng(...bound)));
-      }
+      return L.latLngBounds(...bounds.map(bound => L.latLng(...bound)));
     }
   }
 
@@ -344,15 +313,15 @@ export default class DraggableMap {
 
   getTopRightMarkerCoordinates() {
     return [
-      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
-      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
+      Math.max(...this.parseCoordinateArray(this.properties, 'lat')),
+      Math.max(...this.parseCoordinateArray(this.properties, 'lng'))
     ];
   }
 
   getBottomLeftMarkerCoordinates() {
     return [
-      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
-      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
+      Math.min(...this.parseCoordinateArray(this.properties, 'lat')),
+      Math.min(...this.parseCoordinateArray(this.properties, 'lng'))
     ];
   }
 
@@ -362,18 +331,6 @@ export default class DraggableMap {
     return items.filter(item => item).map(item => parseFloat(item[coordinateType])).filter(Number);
   }
 
-  isDisplayProperties() {
-    const { properties: { pagination: { total_count: totalCount } } } = store.getState();
-
-    if (!this.breadcrumbs || this.breadcrumbs?.length === 0 || !Homeflow.get('breadcrumbs_map')) {
-      return true;
-    } else if (this.properties && totalCount <= this.properties.length) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
   buildSubPolygon(polygon, extraPolygon, style = null) {
     let bounds = [];
     const points = [];
@@ -494,32 +451,25 @@ export default class DraggableMap {
     Homeflow.kickEvent('before_draggable_map_updated');
     url = url + '&zoom_level=' + this.map.getZoom();
 
-    if (markerPlaceId) {
-      url = url + `&marker_place_id=${markerPlaceId}`;
-    }
-
     return fetch(url)
             .then((response) => response.json())
             .then(json => {
               Homeflow.kickEvent('draggable_map_updated', json);
-              store.dispatch(setProperties(json.properties))
               this._running_update = false;
-
-              if (json.breadcrumbs) {
-                this.breadcrumbs = this.concatenateDistinctObjects('geoname_id', this.breadcrumbs, json.breadcrumbs);
-                this.properties = [];
-              } else if (json.properties) {
-                this.properties = this.concatenateDistinctObjects('property_id', this.properties, json.properties);
-                this.breadcrumbs = [];
-              }
-              // TODO: figure out what 'tile view' is
-              // if (this.tile_view != null) {
-              //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
-              // }
-              return this.setMarkers();
+              this.setSearchResponse(json);
             });
   }
 
+  setSearchResponse(json) {
+    store.dispatch(setProperties(json.properties));
+
+    if (json.properties) {
+      this.properties = json.properties;
+    }
+
+    this.setMarkers();
+  }
+
   // this method was copied directly from transpiled ES5 from the browser as it's the only
   // way I could get it to work.
   buildDrawnPolygon(layer) {
@@ -654,49 +604,20 @@ export default class DraggableMap {
 
     Homeflow.kickEvent('before_draggable_map_updated'); //use to show some loading?
 
-    // if (Homeflow.get('get_geo_features')) {
-    //   $.get(geo_url, (res, status, xhr) => {
-    //     this._running_update = false;
-    //     if (this.geo_marker_layer != null) { this.map.removeLayer(this.geo_marker_layer); }
-    //     return this.addGeoMarkers(res);
-    //   });
-    // }
-
-    // TODO: Rewrite this to use fetch() and update redux store
     fetch(url)
       .then((response) => response.json())
       .then((json) => {
-          store.dispatch(setProperties(json.properties));
           store.dispatch(setPagination(json.pagination))
           // TODO: implement user history
           // Ctesius.getUserHistoryCollection().addSearch(s);
           Homeflow.kickEvent('clear_search_box');
           Homeflow.kickEvent('draggable_map_updated', json);
           this._running_update = false;
-          this.properties = json.properties;
 
-          // if (this.tile_view != null) {
-          //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
-          // }
-
-          return this.setMarkers();
+          if (json.properties) {
+            setSearchResponse(json);
+          }
       })
-    // return $.get(url, (res, status, xhr) => {
-    //   s.set('performed_data', res);
-    //   Ctesius.getUserHistoryCollection().addSearch(s);
-    //   Homeflow.kickEvent('clear_search_box');
-    //   Homeflow.kickEvent('draggable_map_updated', res);
-    //   this._running_update = false;
-    //   if (this.marker_layer != null) { this.map.removeLayer(this.marker_layer); }
-    //   this.collection = new Ctesius.Collections.Properties(res.properties);
-    //   Ctesius.getPropertiesCollection().add(res.properties);
-    //   if (this.tile_view != null) {
-    //     this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
-    //   }
-    //   else { }
-    //   //@tile_view.collection(@collection)
-    //   return this.setMarkers();
-    // });
   }
 
 
@@ -729,30 +650,4 @@ export default class DraggableMap {
 
     return new L.LatLng(y, x);
   }
-
-  handleBreadcrumbsInit() {
-    if (this.breadcrumbsInitialized) return;
-
-    const { properties: { breadcrumbs } } = store.getState();
-
-    if (breadcrumbs && this.breadcrumbs !== breadcrumbs) {
-      this.breadcrumbs = breadcrumbs;
-      this.setMarkers();
-      this.setToMarkeredBounds();
-    }
-
-    this.breadcrumbsInitialized = true;
-  }
-
-  concatenateDistinctObjects(key, array, otherArray) {
-    return [...new Map((array || []).concat(otherArray || []).map((object) => [object[key], object])).values()];
-  }
-
-  markerPropertyIdOrGeonameId(marker) {
-    if (!marker) return null;
-    if (marker?.property?.property_id) return marker.property.property_id;
-    if (marker?.property?.geoname_id) return marker.property.geoname_id;
-
-    return null;
-  }
 }

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

@@ -22,9 +22,7 @@ export default class DrawableMap extends DraggableMap {
     this.repositionDrawControls();
     // note: I'm not 100% sure this is will ever be required if super.init() is called
     // something to review in homeflow_next
-    if (!Homeflow.get('breadcrumbs_map')) {
-      return this.onMapDrag();
-    }
+    this.onMapDrag();
   }
 
   onMapDrag({ markerPlaceId } = { markerPlaceId: null }) {

package/properties/properties-map/geonames-map.js

@@ -0,0 +1,415 @@
+/* eslint-disable */
+import DraggableMap from './draggable-map';
+import store from '../../store';
+import { currentGeonameId } from '../../utils/index';
+import { setProperties, setGeonames, setSelectedMarker } from '../../actions/properties.actions';
+import { setInitialSearch, setPlace, setSearchField } from '../../actions/search.actions';
+import { buildQueryString } from '../../search/property-search/property-search';
+import mapLoader from './map-loader';
+import './geonames.css';
+
+export default class GeonamesMap extends DraggableMap {
+  constructor() {
+    super();
+
+    if (!Homeflow.get('custom_map_zoom_location')) Homeflow.set('custom_map_zoom_location', 'topright');
+
+    this.geonameMarkerLayers = [];
+    this.geonameMarkerHoverLayers = [];
+  }
+
+  initOnMarkerClick() {
+    super.initOnMarkerClick();
+
+    store.subscribe(() => {
+      const newSelectedMarker = store.getState().properties.selectedMarker;
+      const newSelectedGeonameID = newSelectedMarker?.geoname?.geoname_id;
+      const stateSelectedGeonameID = this.selectedMarker?.geoname?.geoname_id;
+
+      if (newSelectedGeonameID && newSelectedGeonameID !== stateSelectedGeonameID) {
+        this.activateGeonameMarker(newSelectedMarker);
+      }
+    });
+  }
+
+  init() {
+    this.element = Homeflow.get('draggable_map_view');
+    this.renderLoader();
+    this.showLoader();
+    this.render();
+    this.geonamesInit();
+
+    /**
+     * The map tries to render once before the geonames exist in Redux
+     * We must wait for these to be populated before initializing the
+     * geonames again, then unsubscribe.
+     */
+    const prevGeonames = store.getState().properties.geonames;
+    const prevProperties = store.getState().properties.properties;
+
+    this.unsubscribeFromGeonamesChanges = store.subscribe(() => {
+      const { geonames, properties } = store.getState().properties
+
+      if (properties?.length) this.geonamesInit();
+
+      if (prevGeonames === undefined && geonames !== undefined) {
+        this.geonamesInit();
+        this.unsubscribeFromGeonamesChanges();
+      }
+    });
+
+    this.map.on('zoomend', () => {
+      this.setMarkerTypeforZoomLevel()
+
+      this.setMarkers();
+    });
+
+    /**
+     * when the user drags the map, we need to clear the place ID so subsequent
+     * searches are not restricted to that place ID. We also clear the query so
+     * it's clear to the user this is no longer a search for that location.
+     */
+    this.map.on('dragend', () => {
+      store.dispatch(setPlace(null))
+      store.dispatch(setSearchField({ q: '' }));
+    });
+
+    /**
+     * If for some reason the markers have not rendered after a few seconds
+     * render them so we don't have an empty map
+     */
+    setTimeout(() => {
+      if (!this.markersInitialized) {
+        this.setMarkerTypeforZoomLevel();
+        this.setMarkers();
+        this.setToMarkeredBounds();
+      }
+    }, 5000);
+  }
+
+  setMarkerTypeforZoomLevel() {
+    let zoomLevel = this.map.getZoom();
+
+    if (!zoomLevel) zoomLevel = window.lastZoomLevel;
+
+    if (zoomLevel > 9) {
+      window.markerType = 'properties';
+    } else {
+      window.markerType = 'geonames';
+    }
+
+    window.lastZoomLevel = zoomLevel
+  }
+
+  renderLoader() {
+    const loader = document.getElementById('geonames-map-loader');
+    if (loader) return loader.remove();
+
+    document.querySelector('.js-geo-map-wrapper')?.insertAdjacentHTML('beforeend', mapLoader);
+  }
+
+  showLoader() {
+    const loader = document.getElementById('geonames-map-loader');
+    loader?.classList.remove('hidden');
+  }
+
+  hideLoader() {
+    const loader = document.getElementById('geonames-map-loader');
+    loader?.classList.add('hidden');
+  }
+
+  setToMarkeredBounds() {
+    return super.setToMarkeredBounds();
+  }
+
+  getViewportBounds(viewport) {
+    return super.getViewportBounds(viewport);
+  }
+
+  generateMarkerIcon(propertyOrGeoname) {
+    return super.generateMarkerIcon(propertyOrGeoname);
+  }
+
+  initLayers() {
+    const maxClusterRadius = Homeflow.get('custom_clustering_radius') || 10;
+
+    if (this.propertiesLayer) this.map.removeLayer(this.propertiesLayer);
+    if (this.geonamesLayer) this.map.removeLayer(this.geonamesLayer);
+
+    this.propertiesLayer = new L.MarkerClusterGroup({ maxClusterRadius, showCoverageOnHover: false });
+    this.geonamesLayer = new L.FeatureGroup();
+  }
+
+  hideSuggestedDestinations() {
+    const el = document.querySelector('.suggested-destinations');
+
+    if (el) el.style.display = 'none';
+  }
+
+  showSuggestedDestinations() {
+    const el = document.querySelector('.suggested-destinations');
+
+    if (el) el.style.display = 'block';
+  }
+
+  geonamesInit() {
+    if (!this.map || this.geonamesInitialized) return;
+
+    const { geonames } = store.getState().properties;
+
+    if (geonames && !this.geonames) {
+      this.geonamesInitialized = true;
+      this.geonames = geonames;
+    }
+
+    this.setMarkers();
+    this.setToMarkeredBounds();
+
+    const zoomLevel = this.map.getZoom();
+
+    // If we don't have any geonames we need to show property markers
+    if (!geonames && zoomLevel > 9) window.markerType = 'properties';
+
+    /**
+     * If we don't have any geonames we need to run onMapDrag
+     * as it doesn't run for open searches otherwise and we need
+     * it to load geonames
+     */
+    if (!geonames && zoomLevel < 10) {
+      this.onMapDrag();
+      window.markerType = 'geonames';
+    }
+  }
+
+  getMarkerBounds() {
+    if (this.viewport) {
+      const viewportBounds = this.getViewportBounds();
+      if (viewportBounds.flat().find(coordinate => coordinate === Infinity)) return null;
+
+      return L.latLngBounds(...viewportBounds.map(bound => L.latLng(...bound)));
+    } else {
+      return super.getMarkerBounds();
+    }
+  }
+
+  getTopRightMarkerCoordinates() {
+    return [
+      Math.max(...this.parseCoordinateArray([this.properties, this.geonames].flat(), 'lat')),
+      Math.max(...this.parseCoordinateArray([this.properties, this.geonames].flat(), 'lng'))
+    ];
+  }
+
+  getBottomLeftMarkerCoordinates() {
+    return [
+      Math.min(...this.parseCoordinateArray([this.properties, this.geonames].flat(), 'lat')),
+      Math.min(...this.parseCoordinateArray([this.properties, this.geonames].flat(), 'lng'))
+    ];
+  }
+
+  setSearchResponse(json) {
+    if (!json) return;
+
+    if (json.geonames) {
+      this.geonames = this.concatenateDistinctObjects('geoname_id', this.geonames, json.geonames);
+      window.markerType = 'geonames';
+      store.dispatch(setGeonames(json.geonames));
+    } else if (json.properties) {
+      this.properties = this.concatenateDistinctObjects('property_id', this.properties, json.properties);
+      window.markerType = 'properties';
+      store.dispatch(setProperties(json.properties));
+    }
+
+    if (json.location) {
+      store.dispatch(setPlace(json.location));
+      store.dispatch(setInitialSearch({ q: json.location.name }));
+    }
+
+    this.setMarkers();
+  }
+
+  setMarkers() {
+    this.initLayers();
+
+    if (window.markerType === 'properties' && this.properties?.length) {
+      this.properties.forEach(property => this.setPropertyMarker(property));
+      this.hideSuggestedDestinations();
+      this.markersInitialized = true;
+    } else if (window.markerType === 'geonames' && this.geonames?.length) {
+      this.geonames.forEach(geoname => this.setGeonameMarker(geoname));
+      this.showSuggestedDestinations();
+      this.markersInitialized = true;
+    }
+
+    this.geonamesLayer.addTo(this.map);
+    this.propertiesLayer.addTo(this.map);
+  }
+
+  generateMarker(propertyOrGeoname) {
+    const marker = L.marker(
+      [propertyOrGeoname.lat, propertyOrGeoname.lng],
+      { title: propertyOrGeoname.name, icon: this.generateMarkerIcon(propertyOrGeoname) }
+    );
+
+    marker.on('click', () => {
+      if (marker.geoname) {
+        this.geonameMarkerClick(marker);
+        store.dispatch(setSelectedMarker(marker));
+      } else if (marker.property) {
+        this.propertyMarkerClick(marker);
+        store.dispatch(setSelectedMarker(marker));
+      }
+    });
+
+    if (Homeflow.get('show_geoname_polygon_on_mouseover') && propertyOrGeoname.polygon?.length) {
+      marker.on('mouseover', () => this.geonameMarkerMouseOver(marker));
+      marker.on('mouseout', () => this.geonameMarkerMouseOut(marker));
+    }
+
+    if (propertyOrGeoname.geoname_id) {
+      marker.geoname = propertyOrGeoname;
+    } else {
+      marker.property = propertyOrGeoname;
+    }
+
+    return marker;
+  }
+
+  geonameMarkerMouseOver(marker) {
+    const selectedGeonameId = this.selectedMarker?.geoname?.geoname_id;
+
+    if (selectedGeonameId && selectedGeonameId === marker.geoname.geoname_id) return;
+
+    this.showGeonameMarkerPolygon(
+      { polygon: marker.geoname.polygon, layers: this.geonameMarkerHoverLayers }
+    );
+  };
+
+  geonameMarkerMouseOut(marker) {
+    this.hideGeonameMarkerPolygon({ layers: this.geonameMarkerHoverLayers });
+  }
+
+  setPropertyMarker(property) {
+    this.propertiesLayer.addLayer(this.generateMarker(property));
+  }
+
+  setGeonameMarker(geoname) {
+    if (!geoname.lat || !geoname.lng) return;
+
+    this.geonamesLayer.addLayer(this.generateMarker(geoname));
+  }
+
+  activateGeonameMarker(marker) {
+    this.selectedMarker = marker;
+    this.bounds = this.getViewportBounds(marker.geoname.viewport);
+    this.map.fitBounds(this.bounds, Homeflow.get('custom_map_bounds_padding'));
+
+    this.onMapDrag({ markerPlaceId: marker.geoname.geoname_id });
+  }
+
+  propertyMarkerClick(marker) {
+    const { properties } = store.getState().properties;
+
+    // Ensure active property is included in list view before trying to select it.
+    store.dispatch(
+      setProperties(this.concatenateDistinctObjects('property_id', properties, [marker.property]))
+    );
+  }
+
+  geonameMarkerClick(marker) {
+    this.showLoader();
+    if (!marker.geoname) return;
+
+    if (marker.geoname.polygon?.length) {
+      this.hideGeonameMarkerPolygon({ layers: this.geonameMarkerHoverLayers });
+      this.hideGeonameMarkerPolygon({ layers: this.geonameMarkerLayers });
+      this.showGeonameMarkerPolygon({ polygon: marker.geoname.polygon, layers: this.geonameMarkerLayers });
+    }
+
+    // If a location marker is clicked, allow updating search results count.
+    Homeflow.set('location_property_count', marker.geoname.properties_count);
+
+    // If user clicks a marker and no more markers are visible, they may expect something to
+    // hapen if they click the marker again. Zoom in one step to give a sense of feedback.
+    if (this.lastClickedGeonameId === marker.geoname.geoname_id) {
+      const center = new L.LatLng(marker.geoname.lat, marker.geoname.lng);
+      this.map.setView(center, this.map.getZoom() + 1);
+    } else {
+      this.lastClickedGeonameId = marker.geoname.geoname_id;
+    }
+  }
+
+  onMapDrag({ markerPlaceId } = { markerPlaceId: null }) {
+    this.showLoader();
+
+    this.mostRecentRequestId = crypto.randomUUID();
+
+    const bounds = this.getSearchableBounds();
+    const zoomLevel = this.map.getZoom();
+    const params = [
+      `${buildQueryString(this.getSearch())}/view-${bounds.toBBoxString()}`,
+      '&count=50',
+      `&zoom_level=${zoomLevel}`,
+      `&request_id=${this.mostRecentRequestId}`,
+    ];
+
+    if (markerPlaceId) {
+      params.push(`&marker_place_id=${markerPlaceId}`);
+    }
+
+    const url = `/search.ljson?${params.join('')}`;
+
+    /**
+     * If the map has already loaded with a location we don't want it to
+     * make another request for the viewport as it will load properties
+     * outside the polygon so just remove the loader and return
+     */
+    if (!this.mapRenderedOnce) {
+      this.hideLoader();
+      return this.mapRenderedOnce = true;
+    }
+
+    fetch(url)
+      .then((response) => this.processResponse(response))
+      .then((json) => this.setSearchResponse(json))
+      .finally(() => this.hideLoader())
+      .catch((err) => console.error(err));
+  }
+
+  processResponse(response) {
+    if (response.headers.get('X-Homeflow-Request-Id') === this.mostRecentRequestId) {
+      return response.json();
+    } else {
+      return Promise.resolve(null);
+    }
+  }
+
+  hideGeonameMarkerPolygon({ layers }) {
+    if (!layers?.length) return;
+
+    layers.forEach((layer) => this.map.removeLayer(layer));
+    layers.length = 0;
+  }
+
+  showGeonameMarkerPolygon({ polygon, layers }) {
+    const shapeStyle = {
+      clickable: false,
+      fill: true,
+      color: Homeflow.get('polygon_color', '#3388ff'),
+      fillColor: Homeflow.get('polygon_fill_color', null),
+      fillOpacity: .2,
+      opacity: .5,
+      stroke: true,
+      weight: 4,
+    };
+
+    polygon.forEach((coordinates) => {
+      layers.push(new L.Polygon(coordinates.map(longLat => longLat.toReversed()), shapeStyle));
+    });
+
+    layers.forEach((layer) => this.map.addLayer(layer));
+  }
+
+  concatenateDistinctObjects (key, array, otherArray) {
+    return [...new Map((array || []).concat(otherArray || []).map((object) => [object[key], object])).values()];
+  }
+}

package/properties/properties-map/geonames.css

@@ -0,0 +1,40 @@
+.geonames-map__loader-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 51px;
+  z-index: 200;
+  pointer-events: none;
+}
+
+.geonames-map__loader-inner {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+  font-weight: bold;
+  font-size: 2rem;
+}
+
+.geonames-map__loader.hidden {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .geonames-map__loader-background {
+    top: 240px;
+    left: 43px;
+    width: 59%;
+  }
+}
+
+@media (min-width: 1400px) {
+  .geonames-map__loader-background {
+    left: 10%;
+  }
+}
+
+.map-cluster-marker, .map-cluster-marker svg, .map-cluster-marker path, .map-cluster-marker__count {
+  pointer-events: none;
+}

package/properties/properties-map/map-loader.js

@@ -0,0 +1,23 @@
+export default `
+<div id="geonames-map-loader" class="js-geonames-map-loader geonames-map__loader-background">
+  <div class="geonames-map__loader-inner">
+    <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+      <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+          <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+          <path d="M36 18c0-9.94-8.06-18-18-18">
+            <animateTransform
+              attributeName="transform"
+              type="rotate"
+              from="0 18 18"
+              to="360 18 18"
+              dur="1s"
+              repeatCount="indefinite"
+            />
+          </path>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;

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

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 // TODO: Possibly lazy-load these
 import DraggableMap from './draggable-map';
 import DrawableMap from './drawable-map';
+import GeonamesMap from './geonames-map';
 
 import './leaflet.css';
 import './leaflet.draw.css';
@@ -16,7 +17,10 @@ import './marker_cluster.default.css';
 
 // global callback to run when maps scripts are loaded
 window.initLegacyMap = () => {
-  if (Homeflow.get('enable_draw_a_map') && !!window.CanvasRenderingContext2D && !!history.pushState) {
+  if (Homeflow.get('geonames_map')) {
+    const map = new GeonamesMap();
+    map.init();
+  } else if (Homeflow.get('enable_draw_a_map') && !!window.CanvasRenderingContext2D && !!history.pushState) {
     const map = new DrawableMap();
     map.init();
   } else {

package/reducers/properties.reducer.js

@@ -2,6 +2,7 @@ import PropertiesActionTypes from '../actions/properties.types';
 
 const INITIAL_STATE = {
   properties: [],
+  geonames: undefined,
   savedProperties: [],
   pagination: {},
   selectedMarker: null,
@@ -83,10 +84,10 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
         ...state,
         selectedMarker: action.payload,
       };
-    case 'SET_BREADCRUMBS': {
+    case 'SET_GEONAMES': {
       return {
         ...state,
-        breadcrumbs: action.payload,
+        geonames: action.payload,
       }
     };
     default:

package/reducers/properties.reducer.test.js

@@ -60,11 +60,11 @@ describe('propertiesReducer', () => {
     expect(reducedState).toMatchObject(state);
   });
 
-  it('Sets breadcrumbs when it receives the SET_BREADCRUMBS action', () => {
-    const breadcrumbs = [{ geoname_id: '12345' }, { geoname_id: '45678' }];
+  it('Sets geonames when it receives the SET_GEONAMES action', () => {
+    const geonames = [{ geoname_id: '12345' }, { geoname_id: '45678' }];
     const state = { properties: [] };
-    const reducedState = propertiesReducer(state, { type: 'SET_BREADCRUMBS', payload: breadcrumbs });
+    const reducedState = propertiesReducer(state, { type: 'SET_GEONAMES', payload: geonames });
 
-    expect(reducedState.breadcrumbs).toEqual([{ geoname_id: '12345' }, { geoname_id: '45678' }]);
+    expect(reducedState.geonames).toEqual([{ geoname_id: '12345' }, { geoname_id: '45678' }]);
   });
 });

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

@@ -50,6 +50,11 @@ export const buildQueryString = (search) => {
     }
   });
 
+  // If we're on a map, redirect back to it
+  if (window.location.hash === '#/map') {
+    queryParams.push('hashbang=map');
+  }
+
   let queryString = queryParams.join('&');
   queryString += `&fragment=${fragmentParams.join('/')}`;
   return queryString;

package/shared/oval.svg

@@ -0,0 +1,16 @@
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>
+</svg>