Leaflet Maps in Mura CMS 6.2 - Mura Digital Experience Platform
In Flow: The Mura Blog

Leaflet Maps in Mura CMS 6.2

May 5, 2015 by Michael Evangelista

Another useful addition to the Mura CMS 6.2 feature set is the robust and elegant Leaflet Maps plugin for CKeditor. Replacing the GMap plugin in the Mura 6.2 content editor toolbar, Leaflet creates a customizable map display with an array of visual backgrounds, on any Mura page.

The Leaflet Maps plugin for CKEditor provides instant live map options on any Mura page.

Create and Customize Beautiful Maps in an Instant

The basic integration for Leaflet maps adds a simple button to the CKeditor toolbar. Clicking the button brings up a dialog with a few user-defined settings, including automatic encoding of coordinates based on a city or street address on the "Location" tab. 

Automatic encoding based on city or street address is built in to the Leaflet plugin options.


The "Options" tab of the Leaflet dialog allows for advanced customization including map dimensions and zoom level. Setting the width to 100% provides a truly responsive map which will fill the width of its container, while defining a specific width and height allows for a pixel perfect fit into any fixed width layout. 

Options within the Leaflet Maps dialog include map dimensions and selection of background.

Adding to Leaflet's visual appeal is the long list of background tile options including some very colorful and creatively-rendered map designs. The zoom level can also be set once the map is saved using the "ok" button, by zooming the map inside the CKeditor area before saving the page. The Leaflet Maps markup itself, which can be seen in the CKeditor "source" view, includes specific CSS attributes which can be targeted to further customize the appearance of any map display. 


Once placed on the Mura page, any Leaflet map can be easily edited just like any other content, including adjusting the dimensions, tooltip text, background image or any of the other available settings, allowing for a seamless integration of a map featuring any location into the Mura workflow.

Advanced Mura Maps with MuraLocations

For sites requiring more advanced map display options, the MuraLocations plugin for Mura CMS adds a suite of highly configurable map solutions. MuraLocations maps can be displayed through built-in display objects or directly in CKeditor with the [ mura ] tag, including options for geoencoding a location from the browser, and finding locations nearest the user based on any collection of content with the custom "MuraLocations" subtype.

About Leaflet Maps

Seeing the need for a sophisticated mapping option, Leaflet's creators sought to improve the overall experience of map interaction with a focus on simplicity, performance and usability. Leaflet Maps work across all major desktop and mobile platforms, taking advantage of HTML5 and CSS3 where available while still being usable in older web browsers. Leaflet itself includes a library of available plugins with a well-documented API for those looking to enhance the default functionality.

More About this Feature

Mura CMS v6 Documentation: Embed a Map

Leaflet Maps: Overview and Documentation

Further documentation for Mura CMS developers and content managers is available at docs.getmura.com. Learn more about Mura's powerful features and flexible options at www.getmura.com.