Support MapMarker.io!
You can now support the server cost and future development of MapMarker.io. We will remain free for everyone at any traffic volume.
You can generate complex icons to convey important attributes when rendering lots of data on a map. This will help improve your users understanding of what is going on when lots of things are moving.
| Parameter | Example | Description |
|---|---|---|
You can also render text on top of the icon stack to label markers (e.g. zone codes, counts, or identifiers). Combine two circles to create a border effect and position text in the center.
| Parameter | Example | Description |
|---|---|---|
Just like icons and pins, icon stacks support labels — a small colored circle with text in
the bottom-right corner of the marker. This is great for showing a count, status, or short code
alongside a stacked marker. Add the label parameter with the text you want to show.
Note that this is separate from the text parameter, which renders centered on top of
the stack.
| Parameter | Example | Description |
|---|---|---|
| label | 3 | The text shown inside the label circle. Keep it short (1–3 characters) so it fits. |
| lc | D9534F | The fill color of the label circle (hex, without the leading #). |
| lfc | FFF | The color of the label text (hex, without the leading #). |
| lf | Arial | The font family used for the label text. |
Animate the label to make an icon stack stand out on a busy map. Add the
labelAnimation parameter with one of blink, ping, or
pulse, and optionally tune the speed with labelAnimationDuration
(e.g. 1s). The animation is embedded directly in the SVG, so it plays automatically
wherever the image is rendered.
| Parameter | Example | Description |
|---|---|---|
| labelAnimation | pulse | The animation applied to the label. One of blink, ping, or pulse. |
| labelAnimationDuration | 1s | How long one animation cycle takes, as a CSS duration (e.g. 1s, 500ms). Defaults to 1s. |