L’API d’OpenLayers (v 4.0.1) met à disposition plusieurs fonctionnalités pour mieux utiliser et agrémenter une cartographie dynamique sur internet. Le développeur a ainsi la possibilité d’afficher sept contrôles appelés dans la classe map par la méthode control :

• ol.control.Attribution
• ol.control.FullScreen
• ol.control.MousePosition
• ol.control.OverviewMap
• ol.control.Rotate
• ol.control.ScaleLine
• ol.control.Zoom
• ol.control.ZoomSlider
• ol.control.ZoomToExtent

Chaque méthode possède ses propres options. Par défaut, trois méthodes sont initialisées dans l’objet map : ol.zoom, ol.attribution et ol.rotate si cette dernière est définie dans la vue de la carte (cf. exemple). Pour les faire disparaître, il suffit de déclarer ces méthodes false comme ceci :

var map = new ol.Map({
	controls: ol.control.defaults({
		attribution : false,
		zoom : true,
	}).extend([
	...

L’avantage d’une API open source est de pouvoir styliser ces contrôles à souhait avec le langage CSS et ajouter certaines fonctions JavaScript afin de répondre aux besoins des utilisateurs. Le site d’OpenLayers montre par exemple comment modifier le style CSS (couleur, place des éléments, etc) du ZoomSlider ou encore mettre en forme la position de la souris dans une autre div.

Les classes (option className) et l’id (option target) de chaque élément attribuent respectivement le style CSS et l’emplacement de l’élément.

Les labels (option label) qui figurent sur la carte sont aussi adaptables; l’exemple intitulé Custom Icon d’OpenLayers présente comment insérer un logo dans la méthode Attribution en créant un élément.

Les options Collapsed et Collapsible régissent par définition le déploiement ou non du contrôle à l’affichage de la carte pour l’OverviewMap et l’Attribution (cf. exemple).

Le tutoriel consiste simplement à intégrer l’ensemble des contrôles et à proposer une configuration pour une meilleure utilisation de la carte. En effet, certains éléments comme l’échelle et la vue d’ensemble se chevauchent. On utilise aussi la bibliothèque Font Awesome pour changer des icônes et Bootstrap pour quelques modifications en CSS.

Enfin, il manque un contrôle depuis la version 2 d’OpenLayers : le Switcher qui affiche les couches SIG. Plusieurs développeurs l’ont adapté pour la version 3 et 4, tu trouveras un exemple sur ce lien : https://github.com/walkermatt/ol3-layerswitcher. On intègre le contrôle de couches très utile en webmapping.

Considérons l’ensemble des contrôles avec certaines options.

Les sources (attribution) :

L’attribution peut être considérée comme la source donc on peut la laisser en bas à droite sur la carte mais de manière « pliée » pour un gain de place, on a donc :

var attribution = new ol.control.Attribution({
	collapsible: true,
	collapsed: true,
})

Le mode plein écran (FullScreen) :

Le mode plein écran, affichée en haut à droite par défaut, est relativement pratique notamment si la carte est appelée dans un petit espace sur la page. On maintient son emplacement par contre on peut modifier le label par un autre icône de Font Awesome en créant un élément en JavaScript.

var iconFullScreen = document.createElement("span");
iconFullScreen.className = "fa fa-arrows";
var fscreen = new ol.control.FullScreen({
	label: iconFullScreen,
})

La position de la souris (MousePosition) :

La position de la souris apparaît au survol de la carte au même endroit que le contrôle du plein écran. De plus, les coordonnées géographiques affichées ont une précision décimale importante et elles ne sont pas toujours lisibles sur la carte. On décide alors de replacer les coordonnées en haut à droite de la carte et à gauche du label FullScreen :

.ol-mouse-position {
	right: auto;
	right: 3em;
}

Puis, on créé une fonction pour réduire le nombre de décimaux des latitudes et longitudes :

var mposition = new ol.control.MousePosition({
    undefinedHTML: '<span class="label label-success"><i class="fa fa-map-marker"></i> No data</span>',
	projection: 'EPSG:4326',
	coordinateFormat: function(coordinate) {
	  return ol.coordinate.format(coordinate, '<span class="label label-success"><i class="fa fa-map-marker"></i> {x} ° | {y} °</span>', 4);
	}
})

La vue d’ensemble de la carte (OverviewMap) :

Dans ce panel, les couches SIG peuvent être choisies par le développeur, elles sont appelées de la même manière que dans l’objet Map. L’OverviewMap chevauche l’échelle, on replace donc cet élément puis on choisit de changer les labels avant et après déploiement de la fenêtre :

var iconOverview = document.createElement("span");
iconOverview.className = "fa fa-eye bg-success text-success";
var iconNoOverview = document.createElement("span");
iconNoOverview.className = "fa fa-eye-slash bg-danger text-danger";
var overview = new ol.control.OverviewMap({
	collapsible: true,
	collapsed: true,
	label: iconOverview,
	collapseLabel: iconNoOverview,
	layers: [
	  new ol.layer.Tile({
		source: new ol.source.OSM({})
	  })
	],
})

Ensuite,  pour l’échelle (ScaleLine) et les éléments de zoom (Zoom, ZoomSlider, ZoomToExtent), leurs emplacements ne changent pas. On ajoute simplement un exemple de zone d’étendue (extent) pour ZoomToExtent.

En conclusion, OpenLayers offre la liberté de configurer les contrôles de la cartographie dynamique. Il est également possible d’ajouter d’autres éléments très utiles tels que le contrôle de couches. Une démonstration ainsi que le script final sont disponibles sur le site : http://www.geomatick.com/demo/5/openlayers-tout-sous-controle/. N’hésite pas à commenter.