Add support for convex hulls into dev

app.py

@@ -14,14 +14,17 @@
 
 # Create the app
 app = Dash(
-  __name__, 
-  external_stylesheets=external_stylesheets,
-  use_pages=True,
+	external_scripts = [
+    'https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js' # Turf.js for convex hulls
+  ],
+  external_stylesheets = external_stylesheets,
+  name = __name__, 
   # Add meta tags for mobile devices
   # https://community.plotly.com/t/reorder-website-for-mobile-view/33669/5?
   meta_tags = [
     {"name": "viewport", "content": "width=device-width, initial-scale=1"}
   ],
+  use_pages = True,
 )
 
 # Set the page title

assets/dashExtensions_default.js

@@ -0,0 +1,101 @@
+window.dashExtensions = Object.assign({}, window.dashExtensions, {
+    default: {
+        function0: function(feature, latlng, index, context) {
+            // A global reference to the currently displayed polygon
+            if (!context.currentPolygon) {
+                context.currentPolygon = null;
+            }
+
+            // Access all the leaves of the cluster
+            const leaves = index.getLeaves(feature.properties.cluster_id, Infinity); // Retrieve all children
+            const clusterSize = leaves.length;
+
+            // Define a color scale (mimicking Leaflet.markercluster behavior)
+            // Default colors are at https://github.com/Leaflet/Leaflet.markercluster/blob/master/dist/MarkerCluster.Default.css
+            // Because I'm coloring the polygons (instead of using the default blue) most of the default colors look way too faint on the map
+            // So I'm adjusting them here           
+            const getColor = function(size) {
+                if (size < 50) return 'rgba(110, 204, 57, 0.6)'; // Small clusters
+                if (size < 200) return 'yellow'; // Medium clusters
+                if (size < 500) return 'orange'; // Larger clusters
+                return 'red'; // Very large clusters
+            };
+
+            // Get the appropriate color for the cluster size
+            const color = getColor(clusterSize);
+
+            // Collect coordinates for the cluster's children
+            let features = [];
+            for (let i = 0; i < leaves.length; ++i) {
+                const coords = leaves[i].geometry.coordinates;
+                const lng = coords[0];
+                const lat = coords[1];
+                features.push(turf.point([lng, lat]));
+            }
+
+            // Create a Turf.js feature collection
+            const fc = turf.featureCollection(features);
+
+            // Compute the convex hull
+            const convexHull = turf.convex(fc);
+
+            // If the convex hull exists, create it as a polygon
+            let polygonLayer = null;
+            if (convexHull) {
+                polygonLayer = L.geoJSON(convexHull, {
+                    style: {
+                        color: color, // Use the same color as the cluster icon
+                        weight: 2, // Border thickness
+                        fillOpacity: 0.2, // Polygon fill transparency
+                        fillColor: color // Polygon fill color
+                    }
+                });
+            }
+
+            // Create a custom marker for the cluster with Leaflet.markercluster font styling
+            const clusterMarker = L.marker(latlng, {
+                icon: L.divIcon({
+                    html: `
+                <div style="position:relative; width:40px; height:40px; font-family: Arial, sans-serif; font-size: 12px;">
+                    <div style="background-color:${color}; opacity:0.6; 
+                                border-radius:50%; width:40px; height:40px; 
+                                position:absolute; top:0; left:0;"></div>
+                    <div style="background-color:${color}; 
+                                border-radius:50%; width:30px; height:30px; 
+                                position:absolute; top:5px; left:5px; 
+                                display:flex; align-items:center; justify-content:center; 
+                                font-weight:normal; color:black; font-size:12px; font-family: Arial, sans-serif;">
+                        ${feature.properties.point_count_abbreviated}
+                    </div>
+                </div>`,
+                    className: 'marker-cluster', // Optional: add a class for further customization
+                    iconSize: L.point(40, 40) // Adjust the icon size
+                })
+            });
+
+            // Add mouseover behavior to display the convex hull
+            clusterMarker.on('mouseover', function() {
+                // Remove the previously displayed polygon, if any
+                if (context.currentPolygon) {
+                    context.map.removeLayer(context.currentPolygon);
+                }
+
+                // Add the new polygon to the map and update the reference
+                if (polygonLayer) {
+                    polygonLayer.addTo(context.map);
+                    context.currentPolygon = polygonLayer;
+                }
+            });
+
+            // Add behavior to remove the polygon when the mouse leaves the cluster
+            clusterMarker.on('mouseout', function() {
+                if (context.currentPolygon) {
+                    context.map.removeLayer(context.currentPolygon);
+                    context.currentPolygon = null;
+                }
+            });
+
+            return clusterMarker;
+        }
+    }
+});

functions/convex_hull.py

@@ -0,0 +1,99 @@
+from dash_extensions.javascript import assign
+
+generate_convex_hulls = assign("""function(feature, latlng, index, context){
+    // A global reference to the currently displayed polygon
+    if (!context.currentPolygon) {
+        context.currentPolygon = null;
+    }
+
+    // Access all the leaves of the cluster
+    const leaves = index.getLeaves(feature.properties.cluster_id, Infinity); // Retrieve all children
+    const clusterSize = leaves.length;
+
+    // Define a color scale (mimicking Leaflet.markercluster behavior)
+    // Default colors are at https://github.com/Leaflet/Leaflet.markercluster/blob/master/dist/MarkerCluster.Default.css
+    // Because I'm coloring the polygons (instead of using the default blue) most of the default colors look way too faint on the map
+    // So I'm adjusting them here           
+    const getColor = function(size) {
+        if (size < 50) return 'rgba(110, 204, 57, 0.6)';   // Small clusters
+        if (size < 200) return 'yellow';                   // Medium clusters
+        if (size < 500) return 'orange';                   // Larger clusters
+        return 'red';                                      // Very large clusters
+    };         
+
+    // Get the appropriate color for the cluster size
+    const color = getColor(clusterSize);
+
+    // Collect coordinates for the cluster's children
+    let features = [];
+    for (let i = 0; i < leaves.length; ++i) {
+        const coords = leaves[i].geometry.coordinates;
+        const lng = coords[0];
+        const lat = coords[1];
+        features.push(turf.point([lng, lat]));
+    }
+
+    // Create a Turf.js feature collection
+    const fc = turf.featureCollection(features);
+
+    // Compute the convex hull
+    const convexHull = turf.convex(fc);
+
+    // If the convex hull exists, create it as a polygon
+    let polygonLayer = null;
+    if (convexHull) {
+        polygonLayer = L.geoJSON(convexHull, {
+            style: {
+                color: color,     // Use the same color as the cluster icon
+                weight: 2,        // Border thickness
+                fillOpacity: 0.2, // Polygon fill transparency
+                fillColor: color  // Polygon fill color
+            }
+        });
+    }
+
+    // Create a custom marker for the cluster with Leaflet.markercluster font styling
+    const clusterMarker = L.marker(latlng, {
+        icon: L.divIcon({
+            html: `
+                <div style="position:relative; width:40px; height:40px; font-family: Arial, sans-serif; font-size: 12px;">
+                    <div style="background-color:${color}; opacity:0.6; 
+                                border-radius:50%; width:40px; height:40px; 
+                                position:absolute; top:0; left:0;"></div>
+                    <div style="background-color:${color}; 
+                                border-radius:50%; width:30px; height:30px; 
+                                position:absolute; top:5px; left:5px; 
+                                display:flex; align-items:center; justify-content:center; 
+                                font-weight:normal; color:black; font-size:12px; font-family: Arial, sans-serif;">
+                        ${feature.properties.point_count_abbreviated}
+                    </div>
+                </div>`,
+            className: 'marker-cluster', // Optional: add a class for further customization
+            iconSize: L.point(40, 40)    // Adjust the icon size
+        })
+    });
+
+    // Add mouseover behavior to display the convex hull
+    clusterMarker.on('mouseover', function() {
+        // Remove the previously displayed polygon, if any
+        if (context.currentPolygon) {
+            context.map.removeLayer(context.currentPolygon);
+        }
+
+        // Add the new polygon to the map and update the reference
+        if (polygonLayer) {
+            polygonLayer.addTo(context.map);
+            context.currentPolygon = polygonLayer;
+        }
+    });
+
+    // Add behavior to remove the polygon when the mouse leaves the cluster
+    clusterMarker.on('mouseout', function() {
+        if (context.currentPolygon) {
+            context.map.removeLayer(context.currentPolygon);
+            context.currentPolygon = null;
+        }
+    });
+
+    return clusterMarker;
+}""")

pages/buy_page.py

@@ -4,6 +4,7 @@
 from dash_extensions.javascript import Namespace
 from dash.dependencies import Input, Output, State
 from flask import request
+from functions.convex_hull import generate_convex_hulls
 from loguru import logger
 from user_agents import parse
 import dash
@@ -12,9 +13,8 @@
 import dash_leaflet.express as dlx
 import pandas as pd
 import sys
-import uuid
-from loguru import logger
 import time
+import uuid
 
 dash.register_page(
   __name__,
@@ -274,12 +274,13 @@ def update_map(
     id=str(uuid.uuid4()),
     data=geojson,
     cluster=True,
+    clusterToLayer=generate_convex_hulls,
+    onEachFeature=ns("on_each_feature"),
     zoomToBoundsOnClick=True,
     superClusterOptions={ # https://github.com/mapbox/supercluster#options
       'radius': 160,
       'minZoom': 3,
     },
-    options=dict(onEachFeature=ns("on_each_feature"))
   )
 
 # Callback to toggle the visibility of dynamic components

pages/components.py

@@ -234,7 +234,7 @@ def create_subtype_checklist(self):
                     id='subtype_checklist',
                     data=data,
                     value=initial_values,
-                    searchable=True,
+                    searchable=False,
                     nothingFoundMessage="No options found",
                     clearable=True,
                     style={"margin-bottom": "10px"},
@@ -245,7 +245,8 @@ def create_subtype_checklist(self):
             style={
                 "overflow-y": "scroll",
                 "overflow-x": 'hidden',
-                "height": '120px'
+                "maxHeight": '120px',
+                #"height": '120px'
             })
         ])
         return subtype_checklist
@@ -1103,7 +1104,8 @@ def create_map_card(self):
             body = True,
             # Make the graph stay in view as the page is scrolled down
             # https://getbootstrap.com/docs/4.0/utilities/position/
-            className = 'sticky-top'
+            # Apply sticky-top class only on non-mobile devices
+            className='d-block d-md-block sticky-top'
         )
 
         return map_card

pages/lease_page.py

@@ -4,6 +4,7 @@
 from dash_extensions.javascript import Namespace
 from dash.dependencies import Input, Output, State
 from flask import request
+from functions.convex_hull import generate_convex_hulls
 from loguru import logger
 from user_agents import parse
 import dash
@@ -238,15 +239,15 @@ def update_map(subtypes_chosen, pets_chosen, terms_chosen, garage_spaces, rental
   # Generate the map
   return dl.GeoJSON(
     id=str(uuid.uuid4()),
-    #children=[dl.Popup(id='2popup')],
     data=geojson,
     cluster=True,
+    clusterToLayer=generate_convex_hulls,
+    onEachFeature=ns("on_each_feature"),
     zoomToBoundsOnClick=True,
     superClusterOptions={ # https://github.com/mapbox/supercluster#options
       'radius': 160,
       'minZoom': 3,
     },
-    options=dict(onEachFeature=ns("on_each_feature"))
   )
 
 # Create a callback to manage the collapsing behavior