commit 8768dee6b649108ffe1d5803e6ef77ebb2a349a0
parent f898ac6c2e94025e0390071ab9dd6c979fb5c5d5
Author: Hunter
Date: Sun, 30 Aug 2026 22:04:17 -0400
attribution icon tweaks
Diffstat:
2 files changed, 59 insertions(+), 5 deletions(-)
diff --git a/resources/map.js b/resources/map.js
@@ -74,8 +74,8 @@
map.getCanvas().setAttribute("tabindex", "-1");
- map.addControl(new maplibregl.AttributionControl({ compact: true }), "bottom-left");
- collapseAttribution();
+ map.addControl(new maplibregl.AttributionControl({ compact: true }), "top-right");
+ initAttribution();
var endWheelGesture = initSmoothWheel();
@@ -238,12 +238,43 @@
return settle;
}
- function collapseAttribution() {
+ // Collapses the compact attribution once the style names its sources, then takes
+ // the button over from maplibre so a tap anywhere else can dismiss it.
+ function initAttribution() {
var el = map.getContainer().querySelector(".maplibregl-ctrl-attrib");
if (!el) { return; }
+ var button = el.querySelector(".maplibregl-ctrl-attrib-button");
+
+ function shown() { return el.classList.contains("maplibregl-compact-show"); }
+
+ // maplibre's own handler pre-flips `open` so the native <details> toggle lands
+ // on the right value; we suppress both, so `open` just tracks the panel
+ function setShown(show) {
+ el.classList.toggle("maplibregl-compact-show", show);
+ if (show) { el.setAttribute("open", ""); } else { el.removeAttribute("open"); }
+ }
+
+ if (button) {
+ // capture on the container beats maplibre's own listener on the button;
+ // preventDefault also keeps the native <details> from double-toggling
+ el.addEventListener("click", function (e) {
+ if (!button.contains(e.target)) { return; }
+ e.preventDefault();
+ e.stopPropagation();
+ setShown(!shown());
+ }, true);
+ }
+
+ // anything else on the page dismisses it; capture on the document so a
+ // stopPropagation further in (the event pins do it) can't swallow the tap
+ document.addEventListener("click", function (e) {
+ if (button && button.contains(e.target)) { return; }
+ if (shown()) { setShown(false); }
+ }, true);
+
function collapse() {
if (!el.classList.contains("maplibregl-compact")) { return; } // no text yet
- el.classList.remove("maplibregl-compact-show");
+ setShown(false);
map.off("sourcedata", collapse);
map.off("styledata", collapse);
}
diff --git a/resources/styles.css b/resources/styles.css
@@ -254,6 +254,10 @@ html, body {
inset: 0;
}
+.maplibregl-canvas-container {
+ isolation: isolate;
+}
+
.maplibregl-ctrl-attrib.maplibregl-compact {
margin: 12px;
background: rgba(255, 255, 255, 0.7);
@@ -262,9 +266,15 @@ html, body {
box-shadow: 0 1px 3px #00000040;
-webkit-tap-highlight-color: transparent;
}
+/* the standalone status-bar tint band is the real top edge; sit below it */
+@media (display-mode: standalone) {
+ .maplibregl-ctrl-attrib.maplibregl-compact {
+ margin-top: calc(12px + var(--status-tint-h));
+ }
+}
.maplibregl-ctrl-attrib-button {
background-color: transparent;
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%237a7f85' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%237a7f85' fill-opacity='0.8' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");
}
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button,
@@ -280,6 +290,19 @@ html, body {
box-shadow: 0 0 2px 2px #0096ff;
}
+/* mirrors the compass: pad the tap target out to the map corner */
+@media (pointer: coarse) {
+ .maplibregl-ctrl-attrib-button::after {
+ content: "";
+ position: absolute;
+ top: -12px;
+ right: -12px;
+ bottom: 0;
+ left: 0;
+ border-radius: 0 0 0 12px;
+ }
+}
+
#compass {
display: none;
position: absolute;