Map Image ✅
Present a map based on an equirectangular map projection, with overlaid lat-lon Pins
SITE / LIBRARY COMPONENT Completed as a lib component.
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
Future
Non-equirectangular projections
Alternative coordinate systems, to support simpler maps that don't benefit from lat / lon pin positioning
CMS-sourced icons
May be able to do this now, with an Img based icon component- CMS bound
Labels
Text wrapping
Pop-ups
Map Properties
Image
Required. Use any equirectangular map projection, oriented north.
Map 1 latitude
Top-left image corner
Required.
Map 1 longitude
Top-left image corner
Required.
Map 2 latitude
Bottom-right image corner
Required.
Map 2 longitude
Bottom-right image corner
Required.
Content
Slot for pins ( only )
Only place Map Pin components there
Map Pin Properties
Place pins in the Map component's pin slot.
Text
Label text
Latitude
Pin latitude
Required.
Longitude
Pin longitude
Required.
Variant
Label position
Top ( default )
Left
Right
Bottom
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.
e.g. color: red; Use this to color inline SVG icons through currentColor.
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.
e.g. background-color: blue; Use this to control font family, size, style, border, and other aspects of the label.
Advanced Styling
CMS-Driven Label Positioning
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.
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.
Place this style block in an Embed in the page.
<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
Last updated