A-One Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<div class="tw:p-6 tw:max-w-5xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>PATTERN:</strong> Map Canvas (consumer-only)<br>
      <strong>COMPOSES:</strong> map-pin (pin markers), caller-supplied SVG canvas
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Wrapper for the providers Map view. Provides absolute-positioned controls (Map/Satellite toggle top-left,
      zoom +/- bottom-right), a pin overlay layer, optional selected-school popover, and attribution footer.
      Height is controlled by the caller — add <code>style="height: Npx"</code> or a size utility to the root element.
      Absolute pin positions in the preview use inline <code>style="left/top"</code> percentages — this is unavoidable
      for data-driven map overlays.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">1. Default canvas — Map/Satellite toggle + zoom controls</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Anatomy:</strong> map-canvas (root) wraps an SVG terrain canvas, a
        map-canvas-toggle strip (top-left), and map-canvas-zoom buttons (bottom-right).
      </p>
    </div>
    <div class="map-canvas" style="height: 400px;">
      <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="400" fill="#F3F4F0"/>
        <path d="M0,100 Q100,70 200,100 T400,90 T600,110 L600,150 Q500,120 380,135 T180,135 T0,150 Z" fill="#D9EAD0"/>
        <path d="M0,270 Q120,245 240,270 T480,270 T600,285 L600,315 Q500,290 360,305 T160,305 T0,315 Z" fill="#D9EAD0"/>
        <path d="M-20,185 Q120,160 280,185 T560,210 L620,225 L620,250 L580,235 Q460,210 280,235 T-20,220 Z" fill="#B9D8E8"/>
        <path d="M-20,140 Q200,125 380,160 T620,170" stroke="#FFD55C" stroke-width="6" fill="none" opacity="0.9"/>
        <path d="M-20,240 Q160,225 360,255 T620,265" stroke="#FFFFFF" stroke-width="4" fill="none"/>
        <path d="M120,-20 Q140,100 200,220 T280,420" stroke="#FFFFFF" stroke-width="4" fill="none"/>
        <path d="M460,-20 Q440,90 420,195 T380,420" stroke="#FFFFFF" stroke-width="3" fill="none"/>
      </svg>
      <div class="map-canvas-toggle" role="group" aria-label="Map type">
        <span class="map-canvas-toggle-item active" role="button" tabindex="0">Map</span>
        <span class="map-canvas-toggle-item" role="button" tabindex="0">Satellite</span>
      </div>
      <div class="map-canvas-zoom" role="group" aria-label="Zoom controls">
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom in">
          <i class="fa-regular fa-plus tw:text-xs" aria-hidden="true"></i>
        </button>
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom out">
          <i class="fa-regular fa-minus tw:text-xs" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="map-canvas" style="height: 400px;"> … </div></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">2. Canvas with pin markers (all 4 tones)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Pins:</strong> map-canvas-pins overlay layer (pointer-events:none) with child map-pin spans.
        Pin positions use inline <code>style="left/top"</code> percentages — justified because pin coordinates
        are data-driven (server-rendered lat/lng → percentage offsets).
      </p>
    </div>
    <div class="map-canvas" style="height: 400px;">
      <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="400" fill="#F3F4F0"/>
        <path d="M0,100 Q100,70 200,100 T400,90 T600,110 L600,150 Q500,120 380,135 T180,135 T0,150 Z" fill="#D9EAD0"/>
        <path d="M0,270 Q120,245 240,270 T480,270 T600,285 L600,315 Q500,290 360,305 T160,305 T0,315 Z" fill="#D9EAD0"/>
        <path d="M-20,185 Q120,160 280,185 T560,210 L620,225 L620,250 L580,235 Q460,210 280,235 T-20,220 Z" fill="#B9D8E8"/>
        <path d="M-20,140 Q200,125 380,160 T620,170" stroke="#FFD55C" stroke-width="6" fill="none" opacity="0.9"/>
        <path d="M120,-20 Q140,100 200,220 T280,420" stroke="#FFFFFF" stroke-width="4" fill="none"/>
      </svg>
      <div class="map-canvas-toggle" role="group" aria-label="Map type">
        <span class="map-canvas-toggle-item active" role="button" tabindex="0">Map</span>
        <span class="map-canvas-toggle-item" role="button" tabindex="0">Satellite</span>
      </div>
      <div class="map-canvas-zoom" role="group" aria-label="Zoom controls">
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom in">
          <i class="fa-regular fa-plus tw:text-xs" aria-hidden="true"></i>
        </button>
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom out">
          <i class="fa-regular fa-minus tw:text-xs" aria-hidden="true"></i>
        </button>
      </div>
      <div class="map-canvas-pins" aria-label="School markers">
        <span class="map-pin map-pin-accepting tw:absolute" style="left: 30%; top: 35%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Greenford High School — Accepting applications">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-accepting tw:absolute" style="left: 45%; top: 50%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Cedar Grove Secondary — Accepting applications">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-soon tw:absolute" style="left: 55%; top: 42%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="St Thomas Academy — Opening soon">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-closed tw:absolute" style="left: 62%; top: 58%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Northfield College — Closed">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-neutral tw:absolute" style="left: 38%; top: 65%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Westfield Sixth Form — Status unknown">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-soon tw:absolute" style="left: 70%; top: 35%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Hillcrest Academy — Opening soon">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
      </div>
      <div class="map-canvas-attribution">Map data ©2025 · Terms of Use</div>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">3. With selected-school popover</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Popover:</strong> map-canvas-popover (white card with shadow) + map-canvas-popover-arrow (downward triangle).
        The <code>top/left</code> inline styles are data-driven (which pin is selected), not presentational.
      </p>
    </div>
    <div class="map-canvas" style="height: 420px;">
      <svg viewBox="0 0 600 420" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="420" fill="#F3F4F0"/>
        <path d="M0,120 Q100,90 200,120 T400,110 T600,130 L600,170 Q500,140 380,155 T180,155 T0,170 Z" fill="#D9EAD0"/>
        <path d="M-20,200 Q120,175 280,200 T560,225 L620,240 L620,265 L580,250 Q460,225 280,250 T-20,235 Z" fill="#B9D8E8"/>
        <path d="M-20,160 Q200,145 380,180 T620,190" stroke="#FFD55C" stroke-width="6" fill="none" opacity="0.9"/>
        <path d="M120,-20 Q140,110 200,240 T280,440" stroke="#FFFFFF" stroke-width="4" fill="none"/>
      </svg>
      <div class="map-canvas-toggle" role="group" aria-label="Map type">
        <span class="map-canvas-toggle-item active" role="button" tabindex="0">Map</span>
        <span class="map-canvas-toggle-item" role="button" tabindex="0">Satellite</span>
      </div>
      <div class="map-canvas-zoom" role="group" aria-label="Zoom controls">
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom in">
          <i class="fa-regular fa-plus tw:text-xs" aria-hidden="true"></i>
        </button>
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom out">
          <i class="fa-regular fa-minus tw:text-xs" aria-hidden="true"></i>
        </button>
      </div>
      <div class="map-canvas-pins" aria-label="School markers">
        <span class="map-pin map-pin-accepting tw:absolute" style="left: 35%; top: 55%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Greenford High School — selected">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
      </div>
      <div class="map-canvas-popover" style="top: 8%; left: 8%;" role="dialog" aria-label="Greenford High School details">
        <div class="tw:flex tw:items-start tw:gap-3">
          <div class="tw:w-[42px] tw:h-[42px] tw:rounded-[6px] tw:shrink-0 tw:flex tw:items-center tw:justify-center tw:bg-surface-tint">
            <i class="fa-regular fa-school tw:text-primary tw:text-lg" aria-hidden="true"></i>
          </div>
          <div class="tw:flex-1 tw:min-w-0">
            <div class="tw:flex tw:items-center tw:gap-1.5">
              <span class="tw:text-[16px] tw:font-bold tw:text-neutral-900">Greenford High School</span>
              <i class="fa-solid fa-circle-check tw:text-green-500 tw:text-sm" aria-label="Verified" title="Verified on ApplicaaOne"></i>
            </div>
            <div class="tw:text-[12px] tw:text-neutral-500 tw:mt-1">Lady Margaret Rd, Southall UB1 2GU</div>
            <div class="tw:flex tw:gap-2 tw:mt-2">
              <span class="badge badge-success-subtle">Accepting Now</span>
            </div>
          </div>
        </div>
        <div class="map-canvas-popover-arrow"></div>
      </div>
      <div class="map-canvas-attribution">Map data ©2025 · Terms of Use</div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="map-canvas-popover" style="top: 20%; left: 8%;"> … <div class="map-canvas-popover-arrow"></div></div></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">4. Attribution footer</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Attribution:</strong> map-canvas-attribution — bottom-right, 10px neutral ink, 85% white bg, 2px radius.
        Mimics the Google Maps attribution strip.
      </p>
    </div>
    <div class="map-canvas" style="height: 200px;">
      <svg viewBox="0 0 600 200" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="200" fill="#F3F4F0"/>
        <path d="M0,60 Q100,40 200,60 T400,50 T600,65 L600,90 Q500,70 380,80 T180,80 T0,90 Z" fill="#D9EAD0"/>
        <path d="M-20,105 Q120,90 280,105 T560,115 L620,122 L620,138 L580,130 Q460,118 280,130 T-20,120 Z" fill="#B9D8E8"/>
      </svg>
      <div class="map-canvas-attribution">Map data ©2025 Google · <a href="#" class="tw:underline tw:text-neutral-700">Terms of Use</a> · Report a map error</div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="map-canvas-attribution">Map data ©2025 · Terms of Use</div></code>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<div class="tw:p-6 tw:max-w-5xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>PATTERN:</strong> Map Canvas (consumer-only)<br>
      <strong>COMPOSES:</strong> map-pin (pin markers), caller-supplied SVG canvas
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Wrapper for the providers Map view. Provides absolute-positioned controls (Map/Satellite toggle top-left,
      zoom +/- bottom-right), a pin overlay layer, optional selected-school popover, and attribution footer.
      Height is controlled by the caller — add <code>style="height: Npx"</code> or a size utility to the root element.
      Absolute pin positions in the preview use inline <code>style="left/top"</code> percentages — this is unavoidable
      for data-driven map overlays.
    </p>
  </div>
  <%# ─────────────────────────────────────────────────────────────── %>
  <%# 1. Default canvas — toggle + zoom, no pins, no popover          %>
  <%# ─────────────────────────────────────────────────────────────── %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">1. Default canvas — Map/Satellite toggle + zoom controls</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Anatomy:</strong> map-canvas (root) wraps an SVG terrain canvas, a
        map-canvas-toggle strip (top-left), and map-canvas-zoom buttons (bottom-right).
      </p>
    </div>
    <div class="map-canvas" style="height: 400px;">
      <%# Placeholder terrain SVG %>
      <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="400" fill="#F3F4F0"/>
        <path d="M0,100 Q100,70 200,100 T400,90 T600,110 L600,150 Q500,120 380,135 T180,135 T0,150 Z" fill="#D9EAD0"/>
        <path d="M0,270 Q120,245 240,270 T480,270 T600,285 L600,315 Q500,290 360,305 T160,305 T0,315 Z" fill="#D9EAD0"/>
        <path d="M-20,185 Q120,160 280,185 T560,210 L620,225 L620,250 L580,235 Q460,210 280,235 T-20,220 Z" fill="#B9D8E8"/>
        <path d="M-20,140 Q200,125 380,160 T620,170" stroke="#FFD55C" stroke-width="6" fill="none" opacity="0.9"/>
        <path d="M-20,240 Q160,225 360,255 T620,265" stroke="#FFFFFF" stroke-width="4" fill="none"/>
        <path d="M120,-20 Q140,100 200,220 T280,420" stroke="#FFFFFF" stroke-width="4" fill="none"/>
        <path d="M460,-20 Q440,90 420,195 T380,420" stroke="#FFFFFF" stroke-width="3" fill="none"/>
      </svg>
      <%# Map / Satellite toggle %>
      <div class="map-canvas-toggle" role="group" aria-label="Map type">
        <span class="map-canvas-toggle-item active" role="button" tabindex="0">Map</span>
        <span class="map-canvas-toggle-item" role="button" tabindex="0">Satellite</span>
      </div>
      <%# Zoom controls %>
      <div class="map-canvas-zoom" role="group" aria-label="Zoom controls">
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom in">
          <i class="fa-regular fa-plus tw:text-xs" aria-hidden="true"></i>
        </button>
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom out">
          <i class="fa-regular fa-minus tw:text-xs" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="map-canvas" style="height: 400px;"> … </div></code>
    </div>
  </div>
  <%# ─────────────────────────────────────────────────────────────── %>
  <%# 2. Canvas with pin markers                                       %>
  <%# ─────────────────────────────────────────────────────────────── %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">2. Canvas with pin markers (all 4 tones)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Pins:</strong> map-canvas-pins overlay layer (pointer-events:none) with child map-pin spans.
        Pin positions use inline <code>style="left/top"</code> percentages — justified because pin coordinates
        are data-driven (server-rendered lat/lng → percentage offsets).
      </p>
    </div>
    <div class="map-canvas" style="height: 400px;">
      <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="400" fill="#F3F4F0"/>
        <path d="M0,100 Q100,70 200,100 T400,90 T600,110 L600,150 Q500,120 380,135 T180,135 T0,150 Z" fill="#D9EAD0"/>
        <path d="M0,270 Q120,245 240,270 T480,270 T600,285 L600,315 Q500,290 360,305 T160,305 T0,315 Z" fill="#D9EAD0"/>
        <path d="M-20,185 Q120,160 280,185 T560,210 L620,225 L620,250 L580,235 Q460,210 280,235 T-20,220 Z" fill="#B9D8E8"/>
        <path d="M-20,140 Q200,125 380,160 T620,170" stroke="#FFD55C" stroke-width="6" fill="none" opacity="0.9"/>
        <path d="M120,-20 Q140,100 200,220 T280,420" stroke="#FFFFFF" stroke-width="4" fill="none"/>
      </svg>
      <div class="map-canvas-toggle" role="group" aria-label="Map type">
        <span class="map-canvas-toggle-item active" role="button" tabindex="0">Map</span>
        <span class="map-canvas-toggle-item" role="button" tabindex="0">Satellite</span>
      </div>
      <div class="map-canvas-zoom" role="group" aria-label="Zoom controls">
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom in">
          <i class="fa-regular fa-plus tw:text-xs" aria-hidden="true"></i>
        </button>
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom out">
          <i class="fa-regular fa-minus tw:text-xs" aria-hidden="true"></i>
        </button>
      </div>
      <%# Pin overlay layer — positions are data-driven, inline style is justified %>
      <div class="map-canvas-pins" aria-label="School markers">
        <span class="map-pin map-pin-accepting tw:absolute" style="left: 30%; top: 35%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Greenford High School — Accepting applications">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-accepting tw:absolute" style="left: 45%; top: 50%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Cedar Grove Secondary — Accepting applications">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-soon tw:absolute" style="left: 55%; top: 42%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="St Thomas Academy — Opening soon">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-closed tw:absolute" style="left: 62%; top: 58%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Northfield College — Closed">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-neutral tw:absolute" style="left: 38%; top: 65%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Westfield Sixth Form — Status unknown">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="map-pin map-pin-soon tw:absolute" style="left: 70%; top: 35%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Hillcrest Academy — Opening soon">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
      </div>
      <%# Attribution %>
      <div class="map-canvas-attribution">Map data ©2025 · Terms of Use</div>
    </div>
  </div>
  <%# ─────────────────────────────────────────────────────────────── %>
  <%# 3. Canvas with selected-school popover open                      %>
  <%# ─────────────────────────────────────────────────────────────── %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">3. With selected-school popover</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Popover:</strong> map-canvas-popover (white card with shadow) + map-canvas-popover-arrow (downward triangle).
        The <code>top/left</code> inline styles are data-driven (which pin is selected), not presentational.
      </p>
    </div>
    <div class="map-canvas" style="height: 420px;">
      <svg viewBox="0 0 600 420" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="420" fill="#F3F4F0"/>
        <path d="M0,120 Q100,90 200,120 T400,110 T600,130 L600,170 Q500,140 380,155 T180,155 T0,170 Z" fill="#D9EAD0"/>
        <path d="M-20,200 Q120,175 280,200 T560,225 L620,240 L620,265 L580,250 Q460,225 280,250 T-20,235 Z" fill="#B9D8E8"/>
        <path d="M-20,160 Q200,145 380,180 T620,190" stroke="#FFD55C" stroke-width="6" fill="none" opacity="0.9"/>
        <path d="M120,-20 Q140,110 200,240 T280,440" stroke="#FFFFFF" stroke-width="4" fill="none"/>
      </svg>
      <div class="map-canvas-toggle" role="group" aria-label="Map type">
        <span class="map-canvas-toggle-item active" role="button" tabindex="0">Map</span>
        <span class="map-canvas-toggle-item" role="button" tabindex="0">Satellite</span>
      </div>
      <div class="map-canvas-zoom" role="group" aria-label="Zoom controls">
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom in">
          <i class="fa-regular fa-plus tw:text-xs" aria-hidden="true"></i>
        </button>
        <button class="map-canvas-zoom-btn" type="button" aria-label="Zoom out">
          <i class="fa-regular fa-minus tw:text-xs" aria-hidden="true"></i>
        </button>
      </div>
      <div class="map-canvas-pins" aria-label="School markers">
        <span class="map-pin map-pin-accepting tw:absolute" style="left: 35%; top: 55%; transform: translate(-50%, -100%);"
              role="button" tabindex="0" aria-label="Greenford High School — selected">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
      </div>
      <%# Popover — top/left inline style is data-driven (selected pin position), not presentational %>
      <div class="map-canvas-popover" style="top: 8%; left: 8%;" role="dialog" aria-label="Greenford High School details">
        <div class="tw:flex tw:items-start tw:gap-3">
          <div class="tw:w-[42px] tw:h-[42px] tw:rounded-[6px] tw:shrink-0 tw:flex tw:items-center tw:justify-center tw:bg-surface-tint">
            <i class="fa-regular fa-school tw:text-primary tw:text-lg" aria-hidden="true"></i>
          </div>
          <div class="tw:flex-1 tw:min-w-0">
            <div class="tw:flex tw:items-center tw:gap-1.5">
              <span class="tw:text-[16px] tw:font-bold tw:text-neutral-900">Greenford High School</span>
              <i class="fa-solid fa-circle-check tw:text-green-500 tw:text-sm" aria-label="Verified" title="Verified on ApplicaaOne"></i>
            </div>
            <div class="tw:text-[12px] tw:text-neutral-500 tw:mt-1">Lady Margaret Rd, Southall UB1 2GU</div>
            <div class="tw:flex tw:gap-2 tw:mt-2">
              <span class="badge badge-success-subtle">Accepting Now</span>
            </div>
          </div>
        </div>
        <div class="map-canvas-popover-arrow"></div>
      </div>
      <div class="map-canvas-attribution">Map data ©2025 · Terms of Use</div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="map-canvas-popover" style="top: 20%; left: 8%;"> … <div class="map-canvas-popover-arrow"></div></div></code>
    </div>
  </div>
  <%# ─────────────────────────────────────────────────────────────── %>
  <%# 4. Canvas with attribution footer                                %>
  <%# ─────────────────────────────────────────────────────────────── %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">4. Attribution footer</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Attribution:</strong> map-canvas-attribution — bottom-right, 10px neutral ink, 85% white bg, 2px radius.
        Mimics the Google Maps attribution strip.
      </p>
    </div>
    <div class="map-canvas" style="height: 200px;">
      <svg viewBox="0 0 600 200" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="200" fill="#F3F4F0"/>
        <path d="M0,60 Q100,40 200,60 T400,50 T600,65 L600,90 Q500,70 380,80 T180,80 T0,90 Z" fill="#D9EAD0"/>
        <path d="M-20,105 Q120,90 280,105 T560,115 L620,122 L620,138 L580,130 Q460,118 280,130 T-20,120 Z" fill="#B9D8E8"/>
      </svg>
      <div class="map-canvas-attribution">Map data ©2025 Google · <a href="#" class="tw:underline tw:text-neutral-700">Terms of Use</a> · Report a map error</div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="map-canvas-attribution">Map data ©2025 · Terms of Use</div></code>
    </div>
  </div>
</div>

No notes provided.

No params configured.