> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-maps/map-image.md).

# Map Image

{% hint style="success" %}
**SITE / LIBRARY COMPONENT** \
Completed as a lib component.  
{% endhint %}

## Goals 

* Support any equirectangular map
  * Global, or cropped 
* Support accurate pin placement, using lat & lon 
* CMS support for the pins 
* Icon styling variations
* Labels
  * Label positioning ( top, left, bottom, right ) 
  * Label styling 

<figure><img src="/files/3oeKndHtUMELTzj7IzfP" alt=""><figcaption></figcaption></figure>

## Future&#x20;

* Non-equirectangular projections
* Alternative coordinate systems, to support simpler maps that don't benefit from lat / lon pin positioning&#x20;
* CMS-sourced icons&#x20;
  * May be able to do this now, with an Img based icon component- CMS bound&#x20;
* Labels
  * Text wrapping&#x20;
* Pop-ups&#x20;

## Map Properties

<table><thead><tr><th width="197">Property</th><th width="253.6666259765625">Usage</th><th>Notes</th></tr></thead><tbody><tr><td>Image</td><td></td><td>Required. Use any equirectangular map projection, oriented north.</td></tr><tr><td>Map 1 latitude</td><td>Top-left image corner</td><td>Required.</td></tr><tr><td>Map 1 longitude</td><td>Top-left image corner</td><td>Required.</td></tr><tr><td>Map 2 latitude</td><td>Bottom-right image corner</td><td>Required.</td></tr><tr><td>Map 2 longitude</td><td>Bottom-right image corner </td><td>Required.</td></tr><tr><td>Content</td><td>Slot for pins ( only )</td><td>Only place Map Pin components there</td></tr></tbody></table>

## Map Pin Properties&#x20;

{% hint style="success" %}
Place pins in the Map component's pin slot.&#x20;
{% endhint %}

| Property    | Usage                                                     | Notes                                                                                                                         |
| ----------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| Text        | Label text                                                |                                                                                                                               |
| Latitude    | Pin latitude                                              | Required.                                                                                                                     |
| Longitude   | Pin longitude                                             | Required.                                                                                                                     |
| Variant     | Label position                                            | <ul><li>Top ( default )</li><li>Left</li><li>Right</li><li>Bottom </li></ul>                                                  |
| Content     | Icon                                                      | Currently designed to slot an inline SVG embed as a component.  Use icons.relume.com for a great source.                      |
| Link        |                                                           | Optional.                                                                                                                     |
| Pin Class   | Classes to apply to the pin.                              | Optional.                                                                                                                     |
| Pin Style   | A CSS style string applied directly to the pin icon slot. | <p>e.g. color: red;<br>Use this to color inline SVG icons through currentColor.</p>                                           |
| Label Class | Classes to apply to the label.                            | Optional. Can be used to position the label when variation is needed for CMS-sourced pin date. See Advanced.                  |
| Label Style | CSS styling applied directly to the label.                | <p>e.g. background-color: blue;<br>Use this to control font family, size, style, border, and other aspects of the label. </p> |
|             |                                                           |                                                                                                                               |

## Advanced Styling&#x20;

### CMS-Driven Label Positioning&#x20;

{% hint style="warning" %}
Since Variants cannot be bound to CMS fields yet, it's not possible to change the label position per-pin by simply binding the variant to a select field.  However you can achieve this using the class feature.&#x20;
{% endhint %}

To do this, use special classes to override, and store the class name in a CMS text field. Leave it blank for the default top position.&#x20;

Place this style block in an Embed in the page.&#x20;

```html
<style>
.map-pin-label-bottom {
    left: 50%;
    bottom: auto;
    top: calc(100% + 1rem);
    transform: translateX(-50%);
}

/* Left positioning */
.map-pin-label-left {
    right: calc(100% + 1rem);
    left: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Right positioning */
.map-pin-label-right {
    left: calc(100% + 1rem);
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}
</style>
```

## Development Notes

Designer- <https://mexico-map-db83a3.design.webflow.com/?workflow=canvas>

Code - <https://codepen.io/memetican/pen/jEbXKwg/ca3f976fe84e896f212151d6dfe6f20f>