OpenLayers and Leaflet wrapped in the PublicaMundi mapping API

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, and they are both used inside the PublicaMundi platform.

After investigating both APIs for some time, we thought that they are not so different for creating simple web maps, like the one used for previewing data sources inside an open geospatial data catalogue, 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 javascript APIs all the time) was kind of a waste of time. 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.

PublicaMundi Mapping API 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: [2548716, 4743375],
zoom: 6,
minZoom: 2,
maxZoom: 18,
layers: [
{
title: 'Open Street Maps',
type: PublicaMundi.LayerType.TILE,
url: 'http://{s}.tile.openstreetmap.org/{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 multiple layers to the PublicaMundi map from WMS, WFS and KLM data sources. Note that the WMS and WFS layers parameters point to some PublicaMundi unique IDs which are referring to data sources referenced by CKAN and published by GeoServer.

// WMS Railway Layer
railway = map.createLayer({
title: 'Railway Network',
name: 'railway',
type: PublicaMundi.LayerType.WMS,
url: 'http://labs.geodata.gov.gr/geoserver/wms',
params: { 'layers' : 'publicamundi:c0b70f0a-515d-4a0a-a894-abc412d5239e',
}
});

// WFS Blue flag beaches Layer (initially hidden)
beaches = map.createLayer({
title: 'Blue Flag Beaches',
name: 'beaches',
type: PublicaMundi.LayerType.WFS,
click: onFeatureClick,
visible: false,
url: 'http://labs.geodata.gov.gr/geoserver/wfs',
params: {'layers' : 'publicamundi:ad815665-ec88-4e81-a27a-8d72cffa7dd2' }
});

// KML Ancient theaters Layer
theaters = map.createLayer({
title: 'Ancient Theaters',
name: 'theaters',
type: PublicaMundi.LayerType.KML,
click: onFeatureClick,
url: 'data/kml/archaia_theatra.kml',
});

});

Basics map controls such as LayerSwitcher and Popups 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 switch from OpenLayers to Leaflet, as we just have to call publicamundi.js with the desired library as the data-library attribute on the script tag.

This example shows basic functionalities but additional features and more advanced controls will soon be added to the PublicaMundi Mapping API. ​View example and check out ​PublicaMundi to learn more.