Only show plat labels when they fit
This commit was generated using Copilot, with GPT-5-Codex (Preview), using this prompt: > Some of the labels don't fit in their boxes at lower zoom. Remove > labels as soon as they don't fit in their boxes. I made no changes to Copilot's suggestions.
This commit is contained in:
parent
a9d7404f85
commit
f4139723e5
1 changed files with 46 additions and 0 deletions
46
map.html
46
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;
|
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%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
.label-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
.leaflet-popup-content-wrapper {
|
.leaflet-popup-content-wrapper {
|
||||||
height: min(800px, 60vh);
|
height: min(800px, 60vh);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
@ -211,6 +214,44 @@
|
||||||
],
|
],
|
||||||
}).addTo(map);
|
}).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
|
// Make these requests in parallel
|
||||||
const track_req_promise = fetch('data/track.geojson');
|
const track_req_promise = fetch('data/track.geojson');
|
||||||
|
|
@ -274,6 +315,9 @@
|
||||||
html: "<div>" + feature.properties.TAO_NAME + "</div>",
|
html: "<div>" + feature.properties.TAO_NAME + "</div>",
|
||||||
}),
|
}),
|
||||||
interactive: false,
|
interactive: false,
|
||||||
|
}).once('add', function() {
|
||||||
|
platLabelEntries.push({ marker: this, layer });
|
||||||
|
updatePlatLabelVisibility();
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
},
|
},
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
@ -327,6 +371,8 @@
|
||||||
[47.4865,-93.4068],
|
[47.4865,-93.4068],
|
||||||
[47.4992,-93.3746],
|
[47.4992,-93.3746],
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
map.whenReady(updatePlatLabelVisibility);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue