diff --git a/map.html b/map.html index 444cc9b..0b2cc10 100644 --- a/map.html +++ b/map.html @@ -29,6 +29,9 @@ text-shadow: 0 0 6px white, 0 0 6px white, 0 0 6px white, 0 0 6px white, 0 0 6px white, 0 0 6px white; transform: translate(-50%, -50%); } + .label-hidden { + opacity: 0; + } .leaflet-popup-content-wrapper { height: min(800px, 60vh); overflow-y: auto; @@ -211,6 +214,44 @@ ], }).addTo(map); + const platLabelEntries = []; // Cache label markers paired with their plat polygons + + function updatePlatLabelVisibility() { + for (const entry of platLabelEntries) { + const { marker, layer } = entry; + const labelEl = marker.getElement(); + if (!labelEl) { + continue; + } + const textEl = labelEl.querySelector('div'); + if (!textEl) { + continue; + } + const bounds = layer.getBounds(); + if (!bounds.isValid()) { + labelEl.classList.add('label-hidden'); + continue; + } + labelEl.classList.remove('label-hidden'); + // Compare rendered label size in pixels against the plat's projected bounding box + const sw = map.latLngToLayerPoint(bounds.getSouthWest()); + const ne = map.latLngToLayerPoint(bounds.getNorthEast()); + const platWidth = Math.abs(ne.x - sw.x); + const platHeight = Math.abs(ne.y - sw.y); + const labelWidth = textEl.offsetWidth; + const labelHeight = textEl.offsetHeight; + const fits = labelWidth <= platWidth && labelHeight <= platHeight; + if (fits) { + labelEl.classList.remove('label-hidden'); + } else { + labelEl.classList.add('label-hidden'); + } + } + } + + map.on('zoomend', updatePlatLabelVisibility); + map.on('moveend', updatePlatLabelVisibility); + map.on('resize', updatePlatLabelVisibility); // Make these requests in parallel const track_req_promise = fetch('data/track.geojson'); @@ -274,6 +315,9 @@ html: "