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 pins with custom text labels. This is very helpful when trying to render lots of data and you are trying to tie the map markers to other content on your page such as tables or lists.
| Parameter | Example | Description |
|---|---|---|
You can generate pins with icons as labels. This is very helpful when you render the same object quite often but in different locations as it helps the user recognize it quickly. Plus you can convey meaning easily.
| Parameter | Example | Description |
|---|---|---|
Add a label to any pin to draw attention to it or convey status at a glance. A label is a small
colored circle with text placed in the bottom-right corner of the marker — perfect for
counts, statuses, or short identifiers. Just add the label parameter with the text
you want to show. Labels work on both text pins and icon pins.
| Parameter | Example | Description |
|---|---|---|
| label | 5 | 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. |
Make labels stand out on a busy map by animating them. 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. |