homeflowjs 0.11.7 → 0.11.9

package/package.json

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

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

@@ -7,6 +7,7 @@ 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;
@@ -56,7 +57,7 @@ export default class DraggableMap {
       this.mapLoadedTimes = 1;
       this.render();
       this.buildPolygon();
-      this.setMarkersFor(this.propertiesOrBreadcrumbs());
+      this.setMarkers();
       if (this.noLocationfound) { this.setToMarkeredBounds(); }
       if (Homeflow.get('custom_map_zoom') !== null) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
@@ -244,32 +245,46 @@ export default class DraggableMap {
     }
   }
 
-  setMarkersFor(propertiesOrBreadcrumbs) {
-    let bounds;
-    if (this.marker_layer != null) { this.map.removeLayer(this.marker_layer); }
-    if (!propertiesOrBreadcrumbs) { return null }
+  initLayers() {
+    if (this.clusteringMarkerLayer) this.map.removeLayer(this.clusteringMarkerLayer);
+    if (this.nonClusteringMarkerLayer) this.map.removeLayer(this.nonClusteringMarkerLayer);
 
-    if (Homeflow.get('pin_clustering') && !this.breadcrumbs?.length) {
-      let radius = Homeflow.get('custom_clustering_radius');
-      if (!radius) {
-        radius = 10;
-      }
-      this.marker_layer = new L.MarkerClusterGroup({ maxClusterRadius: radius, showCoverageOnHover: false });
-    } else {
-      this.marker_layer = L.featureGroup();
-    }
-    const markers = propertiesOrBreadcrumbs.map((propertyOrBreadcrumb) => {
-      if (propertyOrBreadcrumb.property_id != null || Homeflow.get('breadcrumbs_map')) {
-        if (propertyOrBreadcrumb.lat !== 0 && propertyOrBreadcrumb.lng !== 0) {
-          const m = this.generateMarker(propertyOrBreadcrumb);
-          this.marker_layer.addLayer(m);
-          return m;
-        }
-      }
-    });
-    this.marker_layer.addTo(this.map);
-    this.bounds = this.marker_layer.getBounds();
-    return bounds = [this.marker_layer.getBounds()];
+    const radius = Homeflow.get('custom_clustering_radius') || 10;
+
+    this.clusteringMarkerLayer = new L.MarkerClusterGroup({ maxClusterRadius: radius, showCoverageOnHover: false });
+    this.nonClusteringMarkerLayer = L.featureGroup();
+  }
+
+  setMarkers() {
+    this.initLayers();
+
+    if (!this.properties && !this.breadcrumbs) { return null }
+
+    this.properties?.map(property => this.setPropertyMarker(property));
+    this.breadcrumbs?.map(breadcrumb => this.setBreadcrumbMarker(breadcrumb));
+    this.clusteringMarkerLayer.addTo(this.map);
+    this.nonClusteringMarkerLayer.addTo(this.map);
+
+    // TODO: Combine bounds.
+    this.bounds = this.clusteringMarkerLayer.getBounds() || this.nonClusteringMarkerLayer.getBounds();
+
+    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()) return;
+
+    layer.addLayer(this.generateMarker(property));
+  }
+
+  setBreadcrumbMarker(breadcrumb) {
+    if (!breadcrumb.lat || !breadcrumb.lng) return;
+
+    this.nonClusteringMarkerLayer.addLayer(this.generateMarker(breadcrumb));
   }
 
   setToMarkeredBounds() {
@@ -411,7 +426,7 @@ export default class DraggableMap {
                 // if (this.tile_view != null) {
                 //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
                 // }
-                return this.setMarkersFor(this.propertiesOrBreadcrumbs());
+                return this.setMarkers();
               });
     }
   }
@@ -575,7 +590,7 @@ export default class DraggableMap {
           //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
           // }
 
-          return this.setMarkersFor(this.propertiesOrBreadcrumbs());
+          return this.setMarkers();
       })
     // return $.get(url, (res, status, xhr) => {
     //   s.set('performed_data', res);
@@ -591,7 +606,7 @@ export default class DraggableMap {
     //   }
     //   else { }
     //   //@tile_view.collection(@collection)
-    //   return this.setMarkersFor(this.collection.models);
+    //   return this.setMarkers();
     // });
   }
 
@@ -645,7 +660,7 @@ export default class DraggableMap {
 
     if (breadcrumbs && this.breadcrumbs !== breadcrumbs) {
       this.breadcrumbs = breadcrumbs;
-      this.setMarkersFor(breadcrumbs);
+      this.setMarkers();
     }
   }
 }

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

@@ -6,11 +6,13 @@ import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 const PropertyLeafletMap = ({ CustomPopup }) => {
   const property = Homeflow.get('property');
   const customIcon = Homeflow.get('custom_map_icon');
+  const customIconAnchor = Homeflow.get('custom_map_icon_anchor');
 
   const defaultIcon = L.icon({
     iconRetinaUrl: '/assets/marker-icon.png',
     iconUrl: customIcon || '/assets/marker-icon.png',
     shadowUrl: '/assets/marker-shadow.png',
+    iconAnchor: customIconAnchor || [12, 41]
   });
 
   return (

package/utils/index.js

@@ -80,4 +80,10 @@ export const compact = (array) => array.filter((item) => typeof item !== 'undefi
 
 export const sanitizeText = (string) => new Option(string).innerHTML;
 
+export const currentGeonameId = (path) => {
+  const pathname = path || window.location.pathname;
+  const segment = pathname.split('/').reverse().find(item => item.startsWith('gid-'))?.replace(/^gid-/, '')
+  return parseInt(segment, 10) || null;
+};
+
 export const DEBOUNCE_DELAY = 200;

package/utils/index.test.js

@@ -19,3 +19,13 @@ describe('sanitizeText', () => {
     expect(utils.sanitizeText('<hello>')).toEqual('&lt;hello&gt;');
   });
 });
+
+describe('currentGeonameId', () => {
+  it('returns Geoname ID from path', () => {
+    expect(utils.currentGeonameId('/foo/bar/baz/gid-12345/qux')).toEqual(12345);
+  });
+
+  it('returns `null` when no Geoname ID detected', () => {
+    expect(utils.currentGeonameId('/foo/bar/baz/qux')).toEqual(null);
+  });
+});