Replace heatmap with density dots for all zoom levels
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:
@@ -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'; ?>,
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -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: '© <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
|
||||
|
||||
Reference in New Issue
Block a user