Remake de ma carte interactive avec OpenLayers

Ajout d’interactivités

Maintenant, il reste à rajouter de l’interactivité sur la carte.

Les interactivités que nous allons rajouter sont :

  • surlignage et ajout d’étiquette au survol de souris
  • rendre les régions cliquables

Surlignage des régions

Première étape, rendre les régions invisible. Pour cela, il suffit simplement d’ajouter un attribut ‘opacity’ au calque vectoriel. Et cet attribut doit être à zéro.

var map = new ol.Map({
	layers: [
		new ol.layer.Image({
			source: new ol.source.ImageStatic({
				url: 'lien_vers_votre_image',
				projection: projection,
				imageExtent: extent
			})
		}),
		new ol.layer.Vector({
			source: new ol.source.Vector({
				features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
			}),
			opacity: 0
		})
	],
	target: 'map',
	view: new ol.View({
		projection: projection,
		center: ol.extent.getCenter(extent),
		resolution: 1
	}),
	interactions: ol.interaction.defaults({
		altShiftDragRotate: false,
		doubleClickZoom: false,
		mouseWheelZoom: false,
		shiftDragZoom: false,
		dragPan: false
	}),
	controls:[]
});

Pour surligner les régions, il faut ajouter un style au survol de l’une d’elle.

Le style que l’on veut ajouter à la région survolée comprenant une étiquette, il faut utiliser une fonction.

function regionStyleFunction(feature, resolution) {
	return new ol.style.Style({
		fill: new ol.style.Fill({color: 'rgba(174,174,174, 0.5)'}), // remplissage
		stroke: new ol.style.Stroke({width: 1, color: 'rgba(0,0,0,0.5)'}), // contour
		text: new ol.style.Text({
			overflow: true,
			font: '14px sans-serif',
			stroke: new ol.style.Stroke({
				width:2, 
				color: 'rgba(255,255,255,1)'
			}),
			text: feature.get('name') // on récupère la propriété 'name' de la région survolée
		})
	});
}

Ensuite, on crée l’interaction pour appliquer le style :

var hover = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove, // déclenchement au déplacement de la souris
    style: regionStyleFunction // style à appliquer, ici le résultat de la fonction ci-dessus
});

map.addInteraction(hover); // on ajoute l'interaction à la carte

Rendre les régions cliquables

Pour indiquer que la région est cliquable, au survol de la région, on change le pointeur de la souris pour qu’il soit celui indiquant un lien.

map.on('pointermove', function(e) {
    if (e.dragging) return; // si il y a déplacement de la carte, on arrête
	
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel); // on vérifie si il y a un objet à l'endroit de l'événement
	
    map.getTargetElement().style.cursor = hit ? 'pointer' : ''; // si besoin, on change le curseur
});

Ensuite, on ajoute la gestion du clic sur la carte.

map.on('click', function(evt) {
    // on vérifie si il y a un objet à l'endroit du clic
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
        return feature;
    });
    
    if (feature) {
        window.open(feature.get("wiki"), "_blank"); // on ouvre dans un nouvel onglet le site correspondant à la propriété "wiki" de la région ciblée
    }
});

Et voilà !

Cet article est maintenant terminé. J’espère qu’il vous a été utile.

Un exemple fonctionnel est disponible ici.

3 réflexions sur « Remake de ma carte interactive avec OpenLayers »

  1. Ping : Retour sur ma première carte interactive | Le Geek Communicant

  2. Ping : Carte interactive en SVG avec tooltip – Le Geek Communicant

  3. Ping : Carte interactive du métro de Paris avec Leaflet – Le Geek Communicant

Laisser un commentaire