allow open in new tab when cmd+clicking markers
Hunter
Monday, July 6th, 2026 at 1:40 PM
87 var d = fmt.parseLocal(m.start);
88 return L.divIcon({
89 className: "",
- html: "<div class=\"event-pin\" style=\"background:" + m.color + "\">" +
90 + html: "<a class=\"event-pin\" href=\"" + fmt.eventUrl(m) + "\" style=\"background:" + m.color + "\">" +
91 "<span class=\"pin-month\">" + fmt.MONTH_ABBR[d.getMonth()] + "</span>" +
92 "<span class=\"pin-day\">" + d.getDate() + "</span>" +
- "</div>",
93 + "</a>",
94 iconSize: [48, 48],
95 iconAnchor: [24, 24]
96 });
116 }
117
118 events.forEach(function (m, i) {
- var marker = L.marker([m.latitude, m.longitude], { icon: makeIcon(m) }).addTo(map);
119 + // keyboard:false so Leaflet doesn't add its own tabIndex/role to the icon root.
120 + // the inner <a> is the focusable, Enter-activatable element (no double tab stop)
121 + var marker = L.marker([m.latitude, m.longitude], { icon: makeIcon(m), keyboard: false }).addTo(map);
122 marker.setZIndexOffset((events.length - i) * Z_STEP);
123 m._marker = marker; // so selectEvent can reach this pin's DOM
- marker.on("click", function () { selectMarker(m, true); });
- // Leaflet gives focused markers tabIndex + role=button but only wires Enter for
- // popups, so activate the pin ourselves (13 = Enter, matching Leaflet's own idiom)
- marker.on("keypress", function (e) {
- if (e.originalEvent.keyCode === 13) { selectMarker(m, true); }
124 + marker.on("click", function (e) {
125 + // modified clicks (new tab/window) fall through to the anchor's native nav;
126 + // plain clicks + keyboard Enter select in-page instead of navigating
127 + var oe = e.originalEvent;
128 + if (oe.metaKey || oe.ctrlKey || oe.shiftKey || oe.altKey) { return; }
129 + oe.preventDefault();
130 + selectMarker(m, true);
131 });
132 });
133
385 justify-content: center;
386 font-family: -apple-system, Arial, Helvetica, sans-serif;
387 line-height: 1.1;
- color: black;
388 + text-decoration: none;
389 text-align: center;
390 box-shadow: 0 1px 3px #00000040;
391 cursor: pointer;
392 border-radius: 0;
393 transition: border-radius 150ms ease-in-out;
394 }
395 +.event-pin:link, .event-pin:visited {
396 + color: black;
397 +}
398 .event-pin.active {
399 border-radius: 50%;
400 }