brianhansonxyz/homeproz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace heatmap with density dots for all zoom levels

Browse Source 
Remove Leaflet.heat in favor of consistent density dot visualization:
- Zoom 1-5: Density dots with 40% more density (24px spacing)
- Zoom 6-11: Density dots with normal spacing (40px)
- Zoom 12-15: Numbered cluster circles
- Zoom 16+: Individual property markers

Density dots provide clearer visualization than heatmap blobs for
high-density property data.

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
2025-12-16 00:58:59 -06:00
parent 93d5b01111
commit 7c3c322449
4 changed files with 19 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-content/plugins/mls-by-hansonxyz/includes/class-mls-cluster.php
+16 -9
View File
@@ -28,6 +28,11 @@ class MLS_Cluster {
*/
const DENSITY_DOT_SPACING = 40;
/**
* Denser spacing for very zoomed out views (40% more dense = 60% of normal)
*/
const DENSITY_DOT_SPACING_DENSE = 24;
/**
* Maximum properties to return as individual markers
* Above this threshold, return clusters
@@ -37,8 +42,8 @@ class MLS_Cluster {
/**
* Zoom thresholds for visualization modes
*/
const ZOOM_HEATMAP_MAX = 7; // 3-7: heatmap only
const ZOOM_DENSITY_MAX = 11; // 8-11: density dots
const ZOOM_DENSE_MAX = 5; // 1-5: density dots (40% more dense)
const ZOOM_DENSITY_MAX = 11; // 6-11: density dots (normal)
const ZOOM_CLUSTER_MAX = 15; // 12-15: numbered clusters
// 16+: individual markers
@@ -274,14 +279,14 @@ class MLS_Cluster {
$zoom = (int) $args['zoom'];
// Determine visualization mode based on zoom level
// Zoom 3-7: Heatmap (just return points for client-side heatmap)
if ($zoom <= self::ZOOM_HEATMAP_MAX) {
return $this->get_heatmap_data($where_sql, $values, $total);
// Zoom 1-5: Density dots (40% more dense)
if ($zoom <= self::ZOOM_DENSE_MAX) {
return $this->get_density_data($where_sql, $values, $zoom, $center_lat, $total, self::DENSITY_DOT_SPACING_DENSE);
}
// Zoom 8-11: Density dots (small colored circles without numbers)
// Zoom 6-11: Density dots (normal spacing)
if ($zoom <= self::ZOOM_DENSITY_MAX) {
return $this->get_density_data($where_sql, $values, $zoom, $center_lat, $total);
return $this->get_density_data($where_sql, $values, $zoom, $center_lat, $total, self::DENSITY_DOT_SPACING);
}
// Zoom 12-15: Numbered clusters (or individual if low count)
@@ -347,15 +352,17 @@ class MLS_Cluster {
* @param int $zoom Map zoom level
* @param float $center_lat Center latitude for Mercator adjustment
* @param int $total Total count
* @param int $pixel_spacing Pixel spacing for grid cells
* @return array
*/
private function get_density_data($where_sql, $values, $zoom, $center_lat, $total) {
private function get_density_data($where_sql, $values, $zoom, $center_lat, $total, $pixel_spacing = null) {
global $wpdb;
$table = $this->db->properties_table();
$pixel_spacing = $pixel_spacing ?: self::DENSITY_DOT_SPACING;
// Use smaller grid cells for density dots
list($lat_step, $lng_step) = $this->get_grid_step_for_zoom($zoom, $center_lat, self::DENSITY_DOT_SPACING);
list($lat_step, $lng_step) = $this->get_grid_step_for_zoom($zoom, $center_lat, $pixel_spacing);
$sql = "SELECT
FLOOR(latitude / %f) as lat_cell,
wp-content/themes/homeproz/archive-property.php
-2
View File
@@ -131,8 +131,6 @@ if (function_exists('mls_get_property_count')) {
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- Leaflet MarkerCluster JS -->
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js" crossorigin=""></script>
<!-- Leaflet Heat JS -->
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js" crossorigin=""></script>
<script>
var homeprozMapData = {
isMapView: <?php echo $show_map ? 'true' : 'false'; ?>,
wp-content/themes/homeproz/dist/assets/main.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-content/themes/homeproz/template-parts/property/property-filters.js
+2 -30
View File
@@ -16,8 +16,7 @@
var PropertyMap = {
map: null,
markers: {}, // Object keyed by property ID
heatLayer: null, // Leaflet.heat layer for zoom 3-7
densityLayer: null, // Layer group for density dots (zoom 8-11)
densityLayer: null, // Layer group for density dots (zoom 1-11)
clusterLayer: null, // Layer group for server clusters (zoom 12-15)
markerCluster: null, // MarkerClusterGroup for individual markers (zoom 16+)
selectedPropertyId: null,
@@ -48,22 +47,7 @@
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(this.map);
// Create heatmap layer (zoom 3-7)
this.heatLayer = L.heatLayer([], {
radius: 25,
blur: 15,
maxZoom: 10,
max: 1.0,
gradient: {
0.2: '#22c55e', // green
0.4: '#eab308', // yellow
0.6: '#f97316', // orange
0.8: '#ef4444', // red
1.0: '#dc2626' // dark red
}
}).addTo(this.map);
// Create layer for density dots (zoom 8-11)
// Create layer for density dots (zoom 1-11)
this.densityLayer = L.layerGroup().addTo(this.map);
// Create layer for server-side clusters (zoom 12-15)
@@ -160,9 +144,6 @@
self.currentMode = data.type;
switch (data.type) {
case 'heatmap':
self.renderHeatmap(data.points);
break;
case 'density':
self.renderDensity(data.dots);
break;
@@ -185,21 +166,12 @@
* Clear all visualization layers
*/
clearAllLayers: function() {
this.heatLayer.setLatLngs([]);
this.densityLayer.clearLayers();
this.clusterLayer.clearLayers();
this.markerCluster.clearLayers();
this.markers = {};
},
/**
* Render heatmap (zoom 3-7)
*/
renderHeatmap: function(points) {
this.clearAllLayers();
this.heatLayer.setLatLngs(points);
},
/**
* Render density dots (zoom 8-11)
* Small colored circles based on property count