Map

When to use it

Add the Map component (.c-map) on an image with a source to a static map to create a full width, fixed height container with its content always centered.

TIP

To override the default border radius, set --media-radius to a different value.

What it looks like

Code examples

<img class="c-map" loading="lazy" src="https://maps.tickster.com/maps/api/staticmap?center=59.3183,18.0743&zoom=13&format=png&maptype=roadmap&markers=color:green%7C59.3183,18.0743&style=feature:landscape.man_made%7Ccolor:0xfaf5ed%7Clightness:0%7Cgamma:1&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0xbae5a6&style=feature:road%7Csaturation:0%7Cgamma:1.8%7Cweight:1.00&style=feature:road%7Celement:geometry.fill%7Chue:0xffb200&style=feature:road.arterial%7Celement:geometry.fill%7Clightness:0%7Cgamma:1&style=feature:transit.station.airport%7Chue:0xb000ff%7Csaturation:23%7Clightness:-4%7Cgamma:0.80&style=feature:water%7Ccolor:0xa0daf2&size=640x300&scale=2" />

Accessibility notes

When using static maps (map images) in HTML, ensure to provide alternative text (alt attribute) that describes the map's content and purpose. This helps users who rely on screen readers to understand the information conveyed by the map.