OpenLayers : Affichage et listing de fonds de carte

Ce post est destiné à lister et à afficher de fonds de carte open sources grâce à l’API d’OpenLayers (v4) (voir la démonstration). Cette liste est évolutive et non exhaustive car n’importe quel flux WM(T)S peut être considéré comme un fonds de carte avec une grande variété de couvertures géographiques, de qualités et de vitesses de chargement.

1. Sources des fonds de carte

1.1. Données sources d’OpenLayers

OpenLayers a implémenté directement des sources de données tuilées dans son API : BingMaps, Stamen et OpenStreetMap (OSM).

• OSM

var OSM = new ol.layer.Tile({
	title: 'OSM',
	preload: Infinity,
	source: new ol.source.OSM(),
	visible: false
});

• BingMaps

Un exemple de chargement des différentes tuiles de BingMaps est disponible sur le site d’OpenLayers. Il faut créer une clé pour se servir de l’API. On a donc :

/* Bing Aerial */
var BingAerial = new ol.layer.Tile({
	title: 'Bing Aerial',
	preload: Infinity,
	source: new ol.source.BingMaps({
		key: cleBingMaps,
		imagerySet: 'Aerial'
	}),
	visible: false
});
/* Bing Aerial With Labels*/
var BingAerialWithLabels = new ol.layer.Tile({
	title: 'Bing Aerial With Labels',
	preload: Infinity,
	source: new ol.source.BingMaps({
		key: cleBingMaps,
		imagerySet: 'AerialWithLabels'
	}),
	visible: false
});
/* Bing Roads*/
var BingRoad = new ol.layer.Tile({
	title: 'Bing Road',
	preload: Infinity,
	source: new ol.source.BingMaps({
		key: cleBingMaps,
		imagerySet: 'Road'
	}),
	visible: false
});
/* Bing collinsBart*/
var BingCollinsBart = new ol.layer.Tile({
	title: 'Bing Collins Bart',
	preload: Infinity,
	source: new ol.source.BingMaps({
		key: cleBingMaps,
		imagerySet: 'collinsBart'
	}),
	visible: false
});
/* Bing ordnanceSurvey*/
var BingOrdnanceSurvey = new ol.layer.Tile({
	title: 'Bing Ordnance Survey',
	preload: Infinity,
	source: new ol.source.BingMaps({
		key: cleBingMaps,
		imagerySet: 'ordnanceSurvey'
	}),
	visible: false
});

• Stamen

Stamen a développé plusieurs fonds de carte originaux dont certaines comme Burning Map par exemple ne fonctionnent qu’avec Google Chrome. Ces dernières ne sont pas référencées ici.

/* Stamen Toner */
var StamenToner = new ol.layer.Tile({
	title: 'Stamen Toner',
	preload: Infinity,
	source: new ol.source.Stamen({
		layer: 'toner',
	}),
	visible: false
});
/* Stamen Watercolor */
var StamenWatercolor = new ol.layer.Tile({
	title: 'Stamen Watercolor',
	preload: Infinity,
	source: new ol.source.Stamen({
		layer: 'watercolor',
	}),
	visible: false
});
/* Stamen Terrain */
var StamenTerrain = new ol.layer.Tile({
	title: 'Stamen Terrain',
	preload: Infinity,
	source: new ol.source.Stamen({
		layer: 'terrain',
	}),
	visible: false
});

1.2. Autres sources de fonds de carte

• IGN France (à venir)
• MapBox (à venir)

2. Visibilité des couches SIG

Pour l’affichage des données spatiales, on liste les titres des couches SIG de l’objet Map appelés dans une div HTML. Puis, en fonction du statut de la checkbox associée au titre de la couche SIG, on contrôle la visibilité de cette dernière.

$('input[type=checkbox]').on('change', function() {
	var idCheckbox=$(this).attr('id');
	map.getLayers().forEach(function(objetCouche,idCouche){
		var titreCouche=objetCouche.get('title');
		if(idCheckbox==idCouche){
			objetCouche.setVisible(!objetCouche.getVisible());
		}
	});
});

Enfin, on note que les données tuilées citées ci-dessus ne sont pas visibles pour tous les seuils de Zoom qui sont indiqués par cette simple fonction :

map.on('moveend',function(evt){
	var zoom = map.getView().getZoom();
	$('#zoom').html(zoom);
});

Le script entier est disponible avec le résultat final sur le site : http://www.geomatick.com/demo/6/openlayers-affichage-et-listing-de-fonds-de-carte/ .

En résumé, de nombreux fonds de carte sont construits à des échelles spatiales variées (mappemonde, France, etc) et mis à disposition par différentes structures. On mettra à jour régulièrement cette liste et on compte sur vous pour enrichir les sources de données spatiales.

Notes : Et Google Maps? et Yahoo Maps? Nokia?

En ce qui concerne Google Maps, depuis la version 3, l’API d’OpenLayers n’implémente plus ses couches tuilées (Satellite, Hybrid, etc). Une solution limitée a toutefois été développée pour l’utiliser (https://github.com/mapgears/ol3-google-maps).

Pour Yahoo Maps, à ma connaissance, OpenLayers n’a jamais intégré ses données spatiales. On note d’ailleurs que les services de Yahoo Maps (Géocodage, GeoRSS, etc) sont voués à disparaître (https://developer.yahoo.com/maps/). La société se tourne vers son partenaire Nokia qui développe sa propre API dénommée Here.