Ajout de l’interactivité

Pour cette carte, je suis passé par des interactions de sélection de features vectorielles (voir la documentation officielle).

L’interaction de survol, est créée comme suit :

var hoverSelect = new ol.interaction.Select({
	condition: ol.events.condition.pointerMove,
	layers: [streets],
	style: function(feature) {
		return styleStreet(true);
	}
});

map.addInteraction(hoverSelect);

Pour intercepter cette interaction, on utilise la méthode on() (comme avec jQuery) sur l’objet représentant l’interaction.

Les features concernées par l’événement peuvent être récupérées dans l’attribut « selected » (qui est un array d’objets) de l’objet en entrée de la fonction appelée via le on() sur l’objet d’interaction.

Les propriétés sont ensuite récupérées avec la méthode get() du premier objet de « selected ».

Après ces explications, voici venu, non pas le temps des rires et des chants, mais le temps de vous dévoiler le code correspondant :

hoverSelect.on('select', function(e){
	if(e.selected.length > 0) {
		var infoTxt = '<p>' + e.selected[0].get('name');
	    
	    if(e.selected[0].get('between')) infoTxt += ', ' + e.selected[0].get('between');
	    
	    infoTxt += '</p>';
	    
	    info.innerHTML = infoTxt;
	} else {
		info.innerHTML = '<p>Survoler un élément</p>';
	}
});

L’interaction pour le click se créé de la même manière :

var clickSelect = new ol.interaction.Select({
	condition: ol.events.condition.click,
	layers: [streets],
	style: function(feature) {
		return styleStreet();
	}
});

map.addInteraction(clickSelect);

Pour récupérer les coordonnées de la boîte englobante de l’objet cliqué, on utilise le chainage getGeometry().getExtent().

Et pour zoomer la carte, on utilise le chainage getView().fit().

Pour éviter que l’objet précédemment survolé par la souris soit toujours considéré comme sélectionné (et donc surligné) il faut « vider » l’interaction « hoverSelect ».

Tout cela nous donne le code suivant :

clickSelect.on('select', function(e){
	if(e.selected.length > 0) {
		info.innerHTML = '<p>Survoler un élément</p>';
        	
    	map.getView().fit(e.selected[0].getGeometry().getExtent(), {nearest: true});

    	hoverSelect.getFeatures().clear();
	}
});

La version complète de cette carte est, comme toujours, disponible sur mon site.