Map Element

Show a location or directions to it.

Overview

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 mapbox.com, 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 mapbox.com 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

Leaflet | Map data © OpenStreetMap contributors, Imagery © Mapbox

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" ...>
      ...
    </div>
</div>

Style / CSS Selectors


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

JavaScript

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?

Newsletter

You can unsubscribe at any time. For information about our privacy practices, please check the privacy policy.
Made with ❤ and Mame in the European Union.
Copyright (C) 2019 - 2021 mame.app. All Rights reserved.