Display a map with the Leaflet Plugin

---

Presentation

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

<dependency>
    <groupId>fr.paris.lutece.plugins</groupId>
    <artifactId>plugin-leaflet</artifactId>
    <version>1.0.1-SNAPSHOT</version>
    <type>lutece-plugin</type>
</dependency>

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.

Implementation

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

import fr.paris.lutece.plugins.leaflet.rest.service.IPopupContentProvider;

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();
    }
}

Déclaration

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="fr.paris.lutece.plugins.myluteceplugin.leaflet.service.mylutecepluginPopupContentProvider" />

The java code of the page displaying the card can then call fr.paris.lutece.plugins.leaflet.service.IconService.getIcon( "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 = L.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} .tile.openstreetmap.org / {z} / {x} / {y} .png';
var osmAttrib = 'Map data © < a href = " http: //openstreetmap.org " > 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}
});

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

marker.bindPopup("Chargement...");
marker.on('click', function(e) {
	var popup = e.target.getPopup();
	$.get(popupUrl).done(function(data) {
		popup.setContent(data);
		popup.update();
	});		 
});

map.fitBounds(markers_layer.getBounds());

Example:

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).