homeflowjs 0.11.9 → 0.11.10

package/package.json

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

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

@@ -58,7 +58,7 @@ export default class DraggableMap {
       this.render();
       this.buildPolygon();
       this.setMarkers();
-      if (this.noLocationfound) { this.setToMarkeredBounds(); }
+      if (this.noLocationfound || Homeflow.get('breadcrumbs_map')) { this.setToMarkeredBounds(); }
       if (Homeflow.get('custom_map_zoom') !== null) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
       }
@@ -123,7 +123,10 @@ export default class DraggableMap {
   }
 
   generateMarker(property) {
-    const marker = L.marker([property.lat, property.lng], { icon: Homeflow.get('custom_property_pin')(property) });
+    const marker = L.marker(
+      [property.lat, property.lng],
+      { title: property.name, icon: Homeflow.get('custom_property_pin')(property) }
+    );
 
     // add the property to marker attributes so they can be accessed on click
     marker.property = property;
@@ -139,7 +142,6 @@ export default class DraggableMap {
 
       if (Homeflow.get('pop_up_on_mouseover')) {
         marker.on("mouseover", e => marker.openPopup());
-
         marker.on("mouseout", e => setTimeout((() => marker.closePopup()), 4000));
       }
     }
@@ -260,14 +262,16 @@ export default class DraggableMap {
 
     if (!this.properties && !this.breadcrumbs) { return null }
 
-    this.properties?.map(property => this.setPropertyMarker(property));
-    this.breadcrumbs?.map(breadcrumb => this.setBreadcrumbMarker(breadcrumb));
+
+    if (this.isDisplayProperties()) {
+      this.properties?.map(property => this.setPropertyMarker(property));
+    } else {
+      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;
   }
 
@@ -288,18 +292,60 @@ export default class DraggableMap {
   }
 
   setToMarkeredBounds() {
-    if (this.bounds != null) {
-      if (Homeflow.get('custom_map_bounds_padding')) {
-        this.map.fitBounds(this.bounds, Homeflow.get('custom_map_bounds_padding'));
-      } else {
-        this.map.fitBounds(this.bounds);
-      }
+    const options = Homeflow.get('custom_map_bounds_padding');
+    const bounds = this.getMarkerBounds();
 
-      if (Homeflow.get('custom_map_centre_lat') && Homeflow.get('custom_map_centre_lng')) {
-        this.map.setView([Homeflow.get('custom_map_centre_lat'), Homeflow.get('custom_map_centre_lng')], 7);
-      }
+    if (!bounds || !bounds.isValid()) return;
+
+    this.map.fitBounds(bounds, options);
+
+    if (Homeflow.get('custom_map_centre_lat') && Homeflow.get('custom_map_centre_lng')) {
+      this.map.setView([Homeflow.get('custom_map_centre_lat'), Homeflow.get('custom_map_centre_lng')], 7);
+    }
+
+    Homeflow.kickEvent('non_standard_zoom', this.map, 4);
+  }
 
-      return Homeflow.kickEvent('non_standard_zoom', this.map, 4);
+  getMarkerBounds() {
+    if (this.bounds && this.bounds.isValid()) {
+      return this.bounds;
+    } else {
+      const bounds = [this.getTopLeftMarkerCoordinates(), this.getBottomRightMarkerCoordinates()];
+      if (bounds.flat().find(coordinate => coordinate === Infinity)) return null;
+
+      return L.latLngBounds(...bounds.map(bound => L.latLng(...bound)));
+    }
+  }
+
+  getTopLeftMarkerCoordinates() {
+    return [
+      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
+      Math.min(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
+    ];
+  }
+
+  getBottomRightMarkerCoordinates() {
+    return [
+      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lat')),
+      Math.max(...this.parseCoordinateArray([this.properties, this.breadcrumbs].flat(), 'lng'))
+    ];
+  }
+
+  parseCoordinateArray(items, coordinateType) {
+    if (!items) return [];
+
+    return items.filter(item => item).map(item => parseFloat(item[coordinateType])).filter(Number);
+  }
+
+  isDisplayProperties() {
+    const { properties: { pagination: { total_count: totalCount } } } = store.getState();
+
+    if (!this.breadcrumbs || !Homeflow.get('breadcrumbs_map')) {
+      return true;
+    } else if (this.properties && totalCount <= this.properties.length) {
+      return true;
+    } else {
+      return false;
     }
   }