Webmapping : affichage des informations géographiques d’un fichier GeoJSON dans une fenêtre modale

Le script du jour a pour objet l’affichage des valeurs attributaires des objets géographiques dans une fenêtre modale. Deux nouveautés sont à noter par rapport à l’article sur l’obtention des données d’un vecteur avec Openlayers :

• le chargement d’un fichier GeoJSON sur la carte avec Openlayers (v 4.01);
• l’affichage des données dans une fenêtre modale avec Bootstrap (v 3.3.7);

1. Données GeoJSON utilisées

Pour ceux qui ne connaissent pas la bibliothèque Bootstrap, on vous invite à l’utiliser sans ménagement. Pour faire court, Twitter a mis à disposition cet ensemble d’outils HTML, CSS et JavaScript qui permet de développer des interfaces web performantes. Ici, on utilise le composant de la fenêtre modale détaillé sur la documentation de Bootstrap. L’utilisation de JQuery est nécessaire.

Pour ce tutoriel de webmapping, le vecteur utilisé en format GeoJSON représente les pays du monde (source : OpenLayers) avec simplement deux champs : l’identifiant id défini par le code ISO et le nom du pays name.

2. Méthodologies

Dans un premier temps, on affiche le vecteur GeoJSON sur la carte à partir de l’URL du fichier avec OpenLayers. On précise dans la source du vecteur le format de la donnée.

var sourceCountry=new ol.source.Vector({
	url: urlData,
	format: new ol.format.GeoJSON()
});

La donnée attributaire est ensuite obtenue en cliquant sur le pays choisi. Ce dernier est mis en évidence avec un changement de style lié à l’objet géographique avec la classe interaction d’Openlayers.

var select = new ol.interaction.Select({
  condition: ol.events.condition.click,
  style: function(feature, resolution){
	var newStyle = new ol.style.Style({
		stroke: new ol.style.Stroke({
			color: '#000',
			width: 1
		}),
		fill: new ol.style.Fill({
			color: 'red',
		}),
	});
	return [newStyle];										
   } 
});	
map.addInteraction(select);

La fenêtre modale de Bootstrap se décompose en deux composants HTML et JavaScript. Voici le composant HTML utilisé dans cet exemple :

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			  <div class="modal-header bg-primary text-center">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h3 class="modal-title">Pays sélectionné</h3>
			  </div> <!-- ./ modal-header -->
			  <div class="modal-body">	
				<!-- Identifiant lié à la donnée du vecteur -->
				<h1 id="data" class="text-center"></h1>
			</div> <!-- ./ modal-body -->
		  <div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Fermer</button>			
		  </div> <!-- ./ modal-footer -->
		</div> <!-- ./ modal-content -->
	 </div> <!-- ./ modal-dialog -->
</div> <!-- ./ modal -->

Pour afficher la fenêtre modale, on utilise la fonction JavaScript modal affecté à l’identifiant de la fenêtre :

$('#basicModal').modal('show');

Enfin, on injecte la donnée attributaire nameCountry du vecteur obtenu en cliquant sur la carte dans le code HTML :

$('#data').html(nameCountry);

3. Résultats et discussions

La demo est disponible sur ce lien.

L’avantage d’utiliser la fenêtre modale de Bootstrap pour afficher les informations du vecteur est son adaptabilité à la taille de l’écran et son ergonomie. Le contenu affiché peut être relativement important et facilement organisé (en tableau, colonne, etc).  L’affichage de la fenêtre au-dessus de la carte est considérée comme un avantage puisque l’utilisateur se focalise sur les données obtenues et non sur les autres éléments de la carte. D’un autre côté, l’inaccessibilité à l’espace cartographique peut se révéler problématique et il est alors préférable de mettre en place une info-bulle ciblé sur l’élément sélectionné. A chacun ses préférences…