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
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.
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.
Map Position Longitude: The longitude where the map should center.
Map Height: Height of the map container in px.
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" ...>
...
</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.
