Map Element

Show a location or directions to it.


The Map Element uses Open Street Map and Leaflet to display a nice map centered on any coordinates you like. You may need to provide an API Key for, if you use your website outside of Mame's hosting.

Usage Examples

  • Directions to a location.
  • Showing where to find your store or office.
  • ..

Map Properties

  1. Mapbox API Key: We use providing the map (tiles) data. They offer a generous free tier and signup without credit card. If you host your website outside of mame you need to get your own API key.
  2. Map Position Latitude: The latitude on which position of the world the map should center. There are various free online services geocoding an address to coordinates.
  3. Map Position Longitude: The longitude where the map should center. 
  4. Map Height: Height of the map container in px.
  5. Default Zoom: The default zoom level of the map.
Everything else is configured with the common general properties. 

See it in action

Interactions and Accessibility

Users can zoom the map with the mouse wheel or the buttons and recenter it. See leaflet js documentation for more details

Generated HTML

<div class="mame-element mame-map">
   <div class="map-root" ...>

Style / CSS Selectors

.mame-map {
  /* All map Element */


Maps need the Mame JavaScript to work properly. The map additionally loads Leaflet JavaScript and CSS from the official CDN.

References / Useful information

Was this article helpful?