diff --git a/assets/js/propagation_map_hook.js b/assets/js/propagation_map_hook.js index 03003ccb..c794b549 100644 --- a/assets/js/propagation_map_hook.js +++ b/assets/js/propagation_map_hook.js @@ -278,36 +278,45 @@ export const PropagationMap = { else if (score >= 33) rangeKm = Math.round(detail.typical_range_km * 0.6) else rangeKm = Math.round(detail.typical_range_km * 0.3) - // Outer circle — max estimated range (faded) + const typicalKm = detail.typical_range_km + + // Outer circle — max estimated range L.circle(center, { radius: rangeKm * 1000, color: tier.color, weight: 2, - opacity: 0.6, - fillColor: tier.color, - fillOpacity: 0.06, - dashArray: "6,4" - }).addTo(this.rangeCircles) - - // Inner circle — typical range (more visible) - const innerKm = Math.round(rangeKm * 0.6) - L.circle(center, { - radius: innerKm * 1000, - color: tier.color, - weight: 2, opacity: 0.8, fillColor: tier.color, - fillOpacity: 0.1 - }).addTo(this.rangeCircles) + fillOpacity: 0.08, + dashArray: "8,6" + }).bindTooltip(`${rangeKm} km (max)`, { permanent: false, direction: "top" }) + .addTo(this.rangeCircles) + + // Inner circle — typical range + if (typicalKm < rangeKm) { + L.circle(center, { + radius: typicalKm * 1000, + color: tier.color, + weight: 2, + opacity: 0.9, + fillColor: tier.color, + fillOpacity: 0.12 + }).bindTooltip(`${typicalKm} km (typical)`, { permanent: false, direction: "top" }) + .addTo(this.rangeCircles) + } // Center marker L.circleMarker(center, { - radius: 5, + radius: 6, color: "#fff", weight: 2, fillColor: tier.color, fillOpacity: 1 }).addTo(this.rangeCircles) + + // Fit map to show the outer circle + const bounds = L.latLng(center).toBounds(rangeKm * 2 * 1000) + this.map.fitBounds(bounds, { padding: [50, 50], maxZoom: this.map.getZoom() }) }, sendBounds() {