@fusion.dev/helix-docs 0.147.0 → 0.148.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/content/maps.mdx +32 -1
- package/content/metrics.mdx +224 -224
- package/dist/sources.generated.js +256 -225
- package/package.json +9 -9
package/content/maps.mdx
CHANGED
|
@@ -580,6 +580,35 @@ group, and shows or hides every layer in it. Keep labels short, such as
|
|
|
580
580
|
"Walking route", and put the rest in `description`, which screen readers read
|
|
581
581
|
after the label.
|
|
582
582
|
|
|
583
|
+
## Use your own icons in the controls
|
|
584
|
+
|
|
585
|
+
Each control's glyph is a slot, so the controls can use the same icon set as
|
|
586
|
+
the rest of your page. An icon you slot in is sized like the glyph it replaces:
|
|
587
|
+
|
|
588
|
+
```html
|
|
589
|
+
<helix-map
|
|
590
|
+
controls="layers zoom compass fullscreen"
|
|
591
|
+
label="Our stores"
|
|
592
|
+
>
|
|
593
|
+
<div id="map"></div>
|
|
594
|
+
<svg
|
|
595
|
+
slot="zoom-in-icon"
|
|
596
|
+
viewBox="0 0 16 16"
|
|
597
|
+
><path d="M7 2h2v5h5v2H9v5H7V9H2V7h5Z"/></svg>
|
|
598
|
+
<svg
|
|
599
|
+
slot="zoom-out-icon"
|
|
600
|
+
viewBox="0 0 16 16"
|
|
601
|
+
><path d="M2 7h12v2H2Z"/></svg>
|
|
602
|
+
</helix-map>
|
|
603
|
+
```
|
|
604
|
+
|
|
605
|
+
The slots are `fullscreen-icon`, `layers-icon`, `tilt-icon`, `zoom-in-icon`,
|
|
606
|
+
`zoom-out-icon`, `rotate-left-icon`, `rotate-right-icon`, `pan-up-icon`,
|
|
607
|
+
`pan-down-icon`, `pan-start-icon`, `pan-end-icon`, and `face-north-icon`. The
|
|
608
|
+
compass sets `--map-needle-turn` to the angle that points north, so an icon in
|
|
609
|
+
`face-north-icon` turns with the map when its style is
|
|
610
|
+
`rotate: var(--map-needle-turn)`.
|
|
611
|
+
|
|
583
612
|
## Keyboard and screen readers
|
|
584
613
|
|
|
585
614
|
- The frame is one tab stop. Arrow keys pan the map, and the plus and minus keys
|
|
@@ -588,7 +617,9 @@ after the label.
|
|
|
588
617
|
Keys with Control, Command, or Alt are left to the browser, so page zoom and
|
|
589
618
|
Back still work with focus on the map.
|
|
590
619
|
- The markers are one tab stop. Arrow keys move between them in the order you
|
|
591
|
-
wrote them. The map pans to show a marker that is off screen.
|
|
620
|
+
wrote them. The map pans to show a marker that is off screen. If your page
|
|
621
|
+
removes the marker that has focus, focus moves to the next marker, or to the
|
|
622
|
+
one before when it was the last.
|
|
592
623
|
- A points layer is one tab stop over the points and counts in view. Arrow keys
|
|
593
624
|
move top to bottom and along each line. Enter on a count zooms in to it.
|
|
594
625
|
- Screen readers find the map's shown layers in a list inside the frame, named
|