Blog

One script, two maps !

mercredi 04 Mars 2015 webmapping openlayers leaflet


OpenLayers and Leaflet

Some may prefer Leaflet for design, plugins or lightweight. Some others may rather use OpenLayers for specific features or simple historical reasons. No matter the preferences, they are the best two open source javascript libraries for webmapping nowadays.

At GeoLabs we love and use both. As probably many, we would select one technology or the other according to our needs, according to projects or existing code. Of course we've been hacking OpenLayers for a while now (as it is the default library used in our MapMint platform), but we've also been increasingly using Leaflet for a few projects lately.

After using both APIs for some time, we thought that they aren't so different for creating simple web maps, like the one everybody needs with only few layers, basic navigation and simple controls. For such purpose, we found out that switching from one library to the other (and so playing with both APIs all the time) was kind of a waste of time and somehow just useless. We then started to think about how to wrap both, and how to forget about API differences, so we can focus on the map content and styles rather than on coding concerns.

Such an idea was recently implemented in the PublicaMundi Mapping API, and we'd like to show you a simple example here. The latter basically demonstrates how one can create an Openlayers map or a Leaflet map using the exact same javascript source code.


view example


Using publicamundi.js, we would first setup the map and declare its options using a rather common syntax:

// Map initialization options
var options = {
 target: 'map',
 center: [537962.7377, 5741709.1586],
 zoom: 13,
 minZoom: 2,
 maxZoom: 18,
 layers: [
  {
   title: 'CartoDB Positron',
   type: PublicaMundi.LayerType.TILE,
   url: 'http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png'
  }
 ]
};

We can then initialize the map with the provided options in a quiet straightforward way, as follow :

var map;

PublicaMundi.ready(function () {
 //Initialize map with provided options
 map = PublicaMundi.map(options);

});

In our example, we then add two more layers to the PublicaMundi map, the first one as WMS and the second one as KML.

 // Add WMS layer 
 arrondts = map.createLayer({
  title: 'Arrondissements',
  name: 'arrondts',
  type: PublicaMundi.LayerType.WMS,
  url: 'https://download.data.grandlyon.com/wms/grandlyon',
  params: { 'layers' : 'adr_voie_lieu.adrarrond'}
 });
     
 // Add KML layer
 fountains = map.createLayer({
  title: 'Fontaines',
  name: 'fountains',
  click: onFeatureClick,
  type: PublicaMundi.LayerType.KML,
  url: 'data/kml/fontaines.kml'});
 });

Basics map controls such as LayerSwitcher and Popup can finally be added using the same simple syntax. Note that the Popups are created as Overlays, rendered as Bootstrap popovers in both case.

//Initialize optional layer switcher
 map.setLayerControl();
        
 //Initialize popup handler
 popup = map.addOverlay(document.getElementById('popup'));
       
 $(document.getElementById('map')).click(function() { 
   $(document.getElementById('popup')).popover('destroy');
 });

Once we are happy with the map, it is finally extremely easy to make the magic happen, as we just have to call publicamundi.js with the desired library as a data-library attribute of the script tag.

<script src="lib/PublicaMundi/build/publicamundi.js" data-library="ol"></script>

This example shows basic functionalities but additional features will soon be added to the PublicaMundi Mapping API such as the WFS LayerType or more advanced controls such as clustering or editing. View demo and check out PublicaMundi to learn more.

This work was supported by a grant from the European Union's 7th Framework Programme (2007-2013) provided for the project PublicaMundi (GA no. 609608).