Comment Modifier Dynamiquement la Taille de la Carte avec OpenLayers?

Avant de commencer ce nouveau tutoriel de WebMapping, je fais un petit aparté puisque le projet Geomatick fête déjà sa première année d’existence avec quarante articles publiés. J’essaierai de tenir le rythme pour la suite des évènements même si vous devinez que cela demande un travail assez important! A l’issue de cette première année, il est un peu tôt pour tirer un bilan mais j’avoue que j’ai eu des échanges très intéressants avec les lecteurs du site et notamment avec nos amis du continent Africain. Bien évidemment, je souhaiterais que ces discussions soient toujours plus nombreuses afin de progresser ensemble sur les problématiques géomaticiennes Open Sources. En perspective, je m’orienterai vers la rédaction de tutoriels sur la manipulation de données satellitaires, le langage Python et le WebMapping.

Ceci étant dit… c’est parti pour un nouveau Script utilisant les API d’OpenLayers et de JQuery. Ici, on parle de l’ergonomie de la carte et plus précisément de ses dimensions. Pour différentes raisons, le programmeur doit envisager une modification dynamique de la largeur X et de la hauteur Y de la carte. On peut penser par exemple à l’ajout d’une colonne sur l’interface après une action de l’utilisateur ou une animation pour la présentation stylisée d’informations spatialisées. Vous vous dites certainement qu’il suffit de changer le style css width et height du conteneur de la carte. Je vous réponds « oui » mais l’ajout d’une classe d’OpenLayers est nécessaire pour que l’interface soit fonctionnelle. L’exemple ci-après fait appel à une donnée GeoJSON représentant les pays du monde entier et les dimensions de la carte sont définies par la taille de l’écran de l’utilisateur.

1. Mise en Place de la Cartographie

Dans un premier temps, on créé une interface cartographique basique.

1.1. L’Objet Map, une donnée GeoJSON et l’Obtention des Attributs Géographiques

Après l’instanciation de l’Objet Map, le vecteur de source GeoJSON est ajouté à l’Objet ainsi que le fond de carte d’OpenStreetMap.

var style = new ol.style.Style({
	fill: new ol.style.Fill({
	  color: 'rgba(0, 255, 0, 0.1)'
	}),
	stroke: new ol.style.Stroke({
	  color: '#000',
	  width: 3
	})
});

// Vecteur de Source GeoJSON
var vectorLayer = new ol.layer.Vector({
	source: new ol.source.Vector({
	  url: './pays.geojson',
	  format: new ol.format.GeoJSON()
	}),
	style: style,
});		


// Source de données et couche OpenStreetMap
var osm = new ol.layer.Tile({
	source: new ol.source.OSM(),
});
// Déclaration de la carte
var map = new ol.Map({
	layers: [osm,vectorLayer],
	target: 'map',
	view: new ol.View({
		center: [0,0],
		zoom: 3,
		minZoom: 2
	}),
});

On déclare une fonction pour obtenir l’attribut géographique défini par le Nom des Pays en cliquant sur la carte. Cette Fonction nous permettra d’illustrer le comportement du rendu de la carte après avoir modifié ses dimensions.

// Map Event avec JQuery
$(map.getViewport()).on("click", function(evt){ 
	var donnees=map.forEachFeatureAtPixel(map.getEventPixel(evt), function(feature, couche){
		var donnees=[feature, couche];
		return donnees;
	});
	if(donnees){
		var feature=donnees[0];
		var nameCountry=feature.get("name");
		console.log(nameCountry);
	}else{
		console.log('Aucune Donnée');
	}
});

JQuery est utilisé ici pour déclarer l’évènement lié à l’Objet Map.

1.2. Définition de la Taille de l’écran du Client

Lors de la déclaration de la carte, le conteneur « map » est défini pour afficher les objets géographiques. Sa Largeur et sa Hauteur peuvent être saisies directement dans son style CSS mais on choisit de les lier aux dimensions de l’écran « Côté Client ». Pour cela, les objets screen.width et screen.height sont utilisés et représentent donc respectivement la largeur X et la longueur Y de l’écran. Au chargement du contenu de la page, le Style du conteneur de la carte est modifié, on a :

$( function(){
	var ecranX = screen.width;
	var ecranY = screen.height;
	$('#map').css({'width': ecranX , 'height': ecranY});
});

On aurait pu prendre en compte les dimensions de la fenêtre du Navigateur Web par les classes JQuery $(window).height() et $(window).width() ou encore du document HTML par $(document).height() et  $(document).width(). Amusons-nous à présent à modifier ces dimensions!

2. Modification Dynamique des Dimensions de l’Interface Cartographique

La taille initiale de l’interface cartographique est divisée par un dénominateur choisie par l’Utilisateur. On créé donc une liste déroulante de dénominateurs de 1 à 5 pour l’exemple. Puis au changement de la valeur de la sélection de ce dernier, on calcule les nouvelles dimensions du conteneur de la carte :

$('#dimensionMap').change( function(){
	var choix = this.value;
	var newEcranX = screen.width / choix;
	var newEcranY = screen.height / choix;
	$('#map').css({'width': newEcranX , 'height': newEcranY});
});

EUhhh… Oui la carte change de dimensions et Alors?! Je vous invite à cliquer sur n’importe quel pays. Aucune Donnée et pourtant on clique sur la Russie; Oups, on obtient le Canada alors que je clique sur le Maroc… Autant d’exemples qui montrent que le changement dynamique des dimensions du conteneur de la carte n’a aucun lien avec l’objet Map. Alors quelle est l’Astuce?

Veuillez vous Connecter pour consulter ce contenu. S'Inscrire Gratuitement ››

Le Script final est disponible sur la démonstration en ligne.

En conclusion, ce tutoriel nous a montré comment redimensionner l’interface cartographique de manière dynamique. Il est donc important de définir les dimensions de l’Objet Map en lien avec celles du conteneur de la carte. Maintenant, vous êtes armés pour coder le paramètre mis en place dans Mapping Game qui permet à l’utilisateur de configurer la taille de la carte au pixel près.