Etat de l'art des API Web Cartographiques
Quick Start
Afin de montrer l'utilisation des deux APIs nous allons chercher à faire une première petite application simple dans laquelle on cherche à afficher le fichier GeoJSON suivant :
{
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [
2.34283447265625,
48.858691710845555
]
},
"type": "Feature",
"properties": {
"title" : "Paris",
"message": "Message à paris"
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
3.072052001953125,
50.63218738569256
]
},
"type": "Feature",
"properties": {
"title" : "Lille",
"message": "Message à Lille"
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
5.36956787109375,
43.29336689604931
]
},
"type": "Feature",
"properties": {
"title" : "Marseille",
"message": "Message à Marseille"
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
4.84771728515625,
45.76049740785007
]
},
"type": "Feature",
"properties": {
"title" : "Lyon",
"message": "Message à Lyon"
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
-0.56854248046875,
44.83598968429028
]
},
"type": "Feature",
"properties": {
"title" : "Bordeaux",
"message": "Message à Bordeaux"
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
-0.37078857421875,
43.29236733501721
]
},
"type": "Feature",
"properties": {
"title" : "Pau",
"message": "Message à Pau"
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
-4.486541748046875,
48.38757020337543
]
},
"type": "Feature",
"properties": {
"title" : "Brest",
"message": "Message à Brest"
}
}
]
}
Dans le code HTML il suffit d'ajouter une div avec comme id map comme ci-dessous:
<div id="map"></div>
Enfin pour que la div soit visible il faut lui définir une hauteur et une largeur en CSS par exemple si on souhaite une carte carrée :
#map {
margin: 0 auto;
height: 500px;
width: 500px;
}
Notre application cherchera à afficher un fond de carte provenant de CloudMade, puis on parsera le fichier GeoJSON, décrit ci-dessus, représentant des points. Suite à quoi on affichera les points sur la carte et on mettra si possible une Pop-up sur le point pour afficher les propriétés du point. On va maintenant comparer le code JavaScript nécessaire pour Leaflet et OpenLayers et également voir le différent rendu des cartes obtenues :
Leaflet |
OpenLayers |
 |
 |
// Création de la carte
var map = L.map('map').setView([47.21, 4,88], 5);
// Ajout de la tile layer cloudmade
L.tileLayer("http://{s}.tile.cloudmade.com/9b3a63d1a38f4df098cb5e373557c713/997/256/{z}/{x}/{y}.png", {
attribution: "Map data © OpenStreetMap " +
"contributors, CC-BY-SA, " +
"Imagery © CloudMade""
}).addTo(map);
// Fonction qui ajoute la popup sur une feature
function onEachFeature(feature, layer) {
var popupContent = "<p><strong>";
if (feature.properties && feature.properties.message && feature.properties.title) {
popupContent += feature.properties.title + "</strong><br/>" + feature.properties.message + "</p>";
}
layer.bindPopup(popupContent);
}
// Ouverture du fichier de GeoJSOn pour le parser
var request = new XMLHttpRequest();
request.open("GET", "./data/messages.geojson", false);
request.send(null);
var data = JSON.parse(request.responseText);
// Parsing du GeoJSON
L.geoJson(data, {
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
}
}).addTo(map);
|
// Définition d'un style pour représenter les points
var style = new ol.style.Style({
symbolizers: [
new ol.style.Icon({
url: "./js/lib/images/marker-icon.png ",
yOffset: -22,
text: "test"
})
]
});
// Définition de la source du fond de plan
var attribution = new ol.Attribution({
html: "Map data © OpenStreetMap contributors, " +
"CC-BY-SA, " +
"Imagery © CloudMade"
});
// Création de la couche vectorielle avec le parsing
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
parser: new ol.parser.GeoJSON(),
url: "./data/messages.geojson"
}),
style: style
});
// Création de la tile layer cloudmade
var cloudMade = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [attribution],
url: "http://tile.cloudmade.com/9b3a63d1a38f4df098cb5e373557c713/" +
"997/256/{z}/{x}/{y}.png"
})
});
// Création de la carte avec la tile layer et la couche vectorielle
var map = new ol.Map({
layers: [cloudMade, vector],
renderer: ol.RendererHint.CANVAS,
target: "map",
view: new ol.View2D({
center: ol.proj.transform([4.88, 47.21], "EPSG:4326", "EPSG:3857"),
zoom: 5
})
});
|
Suite à ce premier essai rapide, on peut dresser un premier bilan.
Le code Leaflet est plus simple à prendre en main et permet la réalisation d'une première application simple plus rapidement qu'OpenLayers.
Il nous faut une trentaine de ligne de code avec Leaflet pour réaliser le contrat défini en haut de cette page, alors qu'avec OpenLayers il faut une quarantaine de ligne de code il n'y a pas de pop-up sur les points. Il est tout à fait possible de rajouter les pop-up sur les points en OpenLayers mais le code est alors uniquement du JavaScript sans lien avec l'API et donc ne présente que peut d'intérêt.