diff --git a/src/index.html b/src/index.html
index b4b76d2..cfd831e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -983,22 +983,26 @@ function incQs() {
return p.toString();
}
-// Draw a teardrop map-pin (head circle + point) at 2x for crispness; returns
-// ImageData added to the map style. Recoloured per SLA state / closed.
+// Ticket-stub map marker: an admission-ticket silhouette (perforation notches on the
+// sides + a dashed tear line) tapering to a bottom point that anchors on the location.
+// Drawn at 4x for crispness (paired with pixelRatio 4 in addImage). The `fill` param
+// lets the same shape back every pin — vivid SLA colours for open, pastel for closed.
+const _PIN_BODY = 'M5 2h18a2 2 0 0 1 2 2v3a2.4 2.4 0 0 0 0 4.8V15a2 2 0 0 1-2 2H15.3'
+ + 'L14 20.5 12.7 17H5a2 2 0 0 1-2-2v-3.2a2.4 2.4 0 0 0 0-4.8V4a2 2 0 0 1 2-2Z';
function pinImageData(fill) {
- const r = 22, sw = 4, cx = r + sw, cy = r + sw, tip = cy + r * 2.55;
- const w = 2 * (r + sw), h = Math.ceil(tip + sw);
- const cv = document.createElement('canvas'); cv.width = w; cv.height = h;
+ const S = 4, vbW = 28, vbH = 21.5; // viewBox units; tip at (14, 20.5)
+ const cv = document.createElement('canvas');
+ cv.width = vbW * S; cv.height = Math.ceil(vbH * S);
const ctx = cv.getContext('2d');
- ctx.beginPath();
- ctx.arc(cx, cy, r, Math.PI * 0.75, Math.PI * 0.25, false); // top ~270° of the head
- ctx.lineTo(cx, tip); // taper to the tip
- ctx.closePath();
- ctx.fillStyle = fill; ctx.fill();
- ctx.lineWidth = sw; ctx.strokeStyle = 'rgba(255,255,255,.95)'; ctx.lineJoin = 'round'; ctx.stroke();
- ctx.beginPath(); ctx.arc(cx, cy, r * 0.4, 0, 2 * Math.PI); // inner white hole
- ctx.fillStyle = 'rgba(255,255,255,.95)'; ctx.fill();
- return ctx.getImageData(0, 0, w, h);
+ ctx.scale(S, S);
+ const body = new Path2D(_PIN_BODY);
+ ctx.fillStyle = fill; ctx.fill(body);
+ ctx.lineJoin = 'round'; ctx.lineWidth = 1.5; ctx.strokeStyle = 'rgba(255,255,255,.95)';
+ ctx.stroke(body);
+ ctx.setLineDash([1.6, 1.8]); ctx.lineWidth = 1.4; // perforation tear line down the middle
+ ctx.beginPath(); ctx.moveTo(14, 4.5); ctx.lineTo(14, 14.5); ctx.stroke();
+ ctx.setLineDash([]);
+ return ctx.getImageData(0, 0, cv.width, cv.height);
}
function addPinImages() {
const pins = {
@@ -1010,7 +1014,7 @@ function addPinImages() {
'pin-closed-unknown': pastel(CLOSED_COLOR),
};
for (const [id, fill] of Object.entries(pins))
- if (!tkMap.hasImage(id)) tkMap.addImage(id, pinImageData(fill), { pixelRatio: 2 });
+ if (!tkMap.hasImage(id)) tkMap.addImage(id, pinImageData(fill), { pixelRatio: 4 });
}
// Co-located declutter ("fan-out"). Cluster-centroid tickets share an EXACT coordinate,
@@ -1086,7 +1090,7 @@ function initIncMap() {
tkPopup = new maplibregl.Popup({ closeButton: false, closeOnClick: false, offset: 14 });
tkMap.on('load', () => {
- addPinImages(); // teardrop pin icons (open by SLA; closed = faded same SLA colour)
+ addPinImages(); // ticket-stub pin icons (open by SLA; closed = faded same SLA colour)
// Closed overlay (windowed) — drawn UNDER the live open layer. Each closed ticket
// uses a faded ('light') version of its SLA colour (Breached→light red, Compliant→
// light green), slightly smaller, so it reads as the same status but inactive.