Dec 10, 2019 9:31:30 PM Thomas Dumont avatar

Display a map with the Leaflet Plugin


The Leaflet Plugin provides a basic base for displaying maps within a Lutece application :

  • leaflet library (core JavaScript and CSS library)
  • assorted icons to display markers
  • REST interface for popup display
  • icons supply interface for markers

These two last interfaces are to be implemented in the server code of your plugin to return a specific content (icons and popup HTML). In its current version, the leaflet plugin does not propose a template including HTML/JavaScript code for displaying the maps themselves. It is up to the integrator to include the necessary code in a page according to the needs in cartographic functions.

Source code of this plugin can be found here .

Inclusion of the plugin

Include the plugin-leaflet in the pom.xml plugin or module specifying the latest version updated


Popup provider

Popups are windows displaying contextual content when clicking on an object on the map. The leaflet plugin provides a rest webservice interface for returning the contents of a popup.


Create the Provider class implementing the IPopupContentProvider interface and its getPopup() method.


public class MyLutecePluginPopupContentProvider implements IPopupContentProvider
    // Templates
    private static final String TEMPLATE_MYLUTECEPLUGIN_POPUP = "/skin/plugins/myluteceplugin/leaflet/popup.html";

    // Markers
    private static final String MARK_MYLUTECEPLUGIN_ENTITY = "entity";

    public String getPopup( HttpServletRequest request, String strIdEntity, String strCode )
        //add your code here to build the HTML content of the popup
        int nId = Integer.parseInt( strIdEntity );
        MyLutecPluginEntity entity = MyLutecePluginService.LoadEntity(nId);
        Map<String, Object> model = new HashMap<String, Object>();
        model.put( MARK_MYLUTECEPLUGIN_ENTITY, entity );
        HtmlTemplate t = AppTemplateService.getTemplate( TEMPLATE_MYLUTECEPLUGIN_POPUP, request.getLocale(), model );
        return t.getHtml();


Add the following lines in the WEB-INF/conf/plugins/<myLutecePlugin>_context.xml file to reference the Provider :

<bean id="leaflet-icon-provider-myluteceplugin" class="" />

The java code of the page displaying the card can then call "leaflet-icon-provider-myluteceplugin[quot ;, strIconKey ).

Add a leaflet map to a Lutece page

Simple example of adding a leaflet map to a page. Here the default projection is used (EPSG: 3857 in long lat).

  • Import the library :
<link rel="stylesheet" type="text/css" href="js/plugins/leaflet/leaflet/leaflet.css">
<script type="text/javascript" src="js/plugins/leaflet/leaflet/leaflet.js"></script>
  • Create a map, view, and layer for markers :
var map = ('map_address'). setView ([48.85632, 2.33272], 12);
var markers_layer = L.featureGroup (). addTo (map);
// create the tile layer with correct attribution
var osmUrl = 'http: // {s} / {z} / {x} / {y} .png';
var osmAttrib = 'Map data © < a href = " http: // " > OpenStreetMap [</a > contributors';
var osm = new L.TileLayer (osmUrl, {minZoom: 8, maxZoom: 16, attribution: osmAttrib}). addTo (map);
  • Add the marker, specify its icon and add the ajax call to the popup service when clicking on this marker :
//Base rest Url for plugin-leaflet popup provider
var popupProviderUrl = "rest/leaflet/popup/";
// Custom provider name that implements  plugin-leaflet popup provider interface
var popupProviderName = "myluteceplugin";
// Id parameter to retrieve an object
var formId = ${appointmentform.idForm};
// code parameter ( not used with this adpater, let's set a dummy value)
var code = "code";
//Full popup url
var popupUrl = popupProviderUrl+popupProviderName+"/"+formId+"/"+code;

//creating the icon from the provided path
var myIcon = L.icon({
	iconUrl: ${MyPluginIcon}

var marker = L.marker([poi.y, poi.x], {icon:  myIcon}).addTo(markers_layer);

marker.on('click', function(e) {
	var popup =;
	$.get(popupUrl).done(function(data) {



screenshot leaflet

To go further

Online leaflet documentation allows you to go further in terms of geographical features :

  • Other sources and formats for the background layers and business layers of the map
  • View multiple geolocated objects from a Geojson source
  • Use the properties of the map data to modify the markers (setting icons, colors...) according to the values
  • Use the properties of the map data to modify the popups (pass in parameter a value to modify the response of the popup provider service)
  • ...

The proj4js library also provided with the leaflet plugin facilitates conversion calculations between geographic coordinate repositories (conversion from one projection to another).