Mar 8, 2018 2:50:58 PM seb leridon avatar   143

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
  • Icon 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.

Prerequisites

The process consists in creating a plugin or module lutece including the plugin-leaflet and bringing the implementations java interfaces in the code server. These implementations will then be used in the pages.

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>

Implementation of a 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.

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

Example:

import en.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 [quot ;;

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

    public String getPopup (Request HttpServletRequest, String strIdEntity, String strCode)
    {
// add your code here to the 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 ();
    }
}
2- reference this Provider in the webapp / WEB-INF / conf / plugins file / < myLutecePlugin > _context.xml

<bean id="leaflet-icon-provider-myluteceplugin" class="fr.paris.lutece.plugins.myluteceplugin.leaflet.service.mylutecepluginPopupContentProvider" />

The identifier of the bean " leaflet-icon-provider-XXX " determines the provider's id to pass as a parameter of the getIcon () method. The java code of the page displaying the card can then be called fr.paris.lutece.plugins.leaflet.service.IconService.getIcon (" XXX [quot ;, strIconKey);

Add a leaflet map to a Lutece page

Leaflet library documentation, open source javascript library: http://leafletjs.com/

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:

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