Changement de style d'une couche GeoJson au survol de la souris

**Marc31** · 05/12/2015, 18h56

Bonjour à tous,

Débutant dans le leaflet, j'avais quelques petites questions...
J'ai ajouté une couche départements.geojson, elle s'affiche bien mais par défaut elle est bleu avec un trait d'épaisseur un peu trop important.
Je souhaiterais diminuer l'épaisseur et modifier la couleur mais je ne sais pas comment faire.
Ensuite je j'aimerais au survol de la souris, que le département change de couleur. Si quelqu'un pouvait m'aider? merci!

Bonne soirée

**NoSmoking** · 06/12/2015, 10h10

Bonjour,
je t'engage à lire la documentation sur l'objet GeoJson ainsi que la discussion [Leaflet] Changer option polyline au survol souris ou inversement

Pour info : les MP technique sont directement mis à la corbeille !

**Marc31** · 06/12/2015, 17h05

Bonjour et merci je vais lire la documentation.

J'ai bien vu le code ci-dessous mais j'aimerais imposer des conditions du genre, if couche departement === 31 alors mettre de la couleur pour Midi-Pyrénées.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
gpxred.on('mouseover', function (e) {
  this.setStyle({
    color: 'black',
    weight: 8,
    opacity: 1
  })

Bonne journée

**Marc31** · 06/12/2015, 17h44

J'aimerais mettre plusieurs conditions dans le code ci-dessous, c'est possible???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
                        Dep.on('mouseover', function(e){
				Dep.openPopup();
				this.setStyle({color: 'blue',weight: 2,fillOpacity: 0.2,opacity: 1})
 
			}).on('mouseout', function () {
			 this.setStyle({color: 'blue',weight: 2,fillOpacity: 0.1,opacity: 1});
 
			});

Merci et bonne soirée

**NoSmoking** · 07/12/2015, 16h05

Tu fais à peu près ce que tu veux, tu es dans le corps d'une fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
Dep.on('mouseover', function (e) {
  // ici tu es dans le corps de la fonction
  // qui est appelée lors du survol de l'élément
});

**Marc31** · 07/12/2015, 16h19

En fait j'aimerais que le département sur lequelle la souris passe change de couleur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Dep.on('mouseover', function(e){
 
		if (feature.properties.CODE_DEPT === '31') {
 
 
		Dep.openPopup();
		this.setStyle({color: 'blue',weight: 2,fillOpacity: 0.2,opacity: 1})
 
 
		}).on('mouseout', function () {
		 this.setStyle({color: 'blue',weight: 2,fillOpacity: 0.1,opacity: 1});
 
		});
 
		else
 
		if (feature.properties.CODE_DEPT === '09') {
 
		Dep.openPopup();
		this.setStyle({color: 'blue',weight: 2,fillOpacity: 0.2,opacity: 1})
 
 
		}).on('mouseout', function () {
		 this.setStyle({color: 'blue',weight: 2,fillOpacity: 0.1,opacity: 1});
 
		});
 
		else
 
		if (feature.properties.CODE_DEPT === '81') {
 
		Dep.openPopup();
		this.setStyle({color: 'blue',weight: 2,fillOpacity: 0.2,opacity: 1})
 
 
		}).on('mouseout', function () {
		 this.setStyle({color: 'blue',weight: 2,fillOpacity: 0.1,opacity: 1});
 
		});
 
		etc...

**NoSmoking** · 08/12/2015, 19h51

En fait j'aimerais que le département sur lequelle la souris passe change de couleur

je crois que l'on a bien compris ce que tu cherches à faire.

Si tu utilises l'objet GeoJson, la librairie met à ta disposition des options fort intéressantes et notamment onEachFeature qui te permet d'affecter la même fonction à tout tes Features.

Pour commencer il faut que dans la définition de tes tracés tu définisses le style que tu souhaites appliquer, les points et le style à mettre sur le mouseover. Cette démarche n'est pas forcément utile/complète si tous tes tracés présentent le même style de départ.

Tu peux donc avoir une déclaration du style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var trace = {
    "type": "Feature",
    "properties": {
        "style": {
            weight: 2,
            color: '#00f',
            opacity: 1,
            fillColor: '#cdf',
            fillOpacity: .5
        },
        "overStyle": {
            weight: 5,
            color: 'red',
            opacity: .5,
            fillColor: 'white',
            fillOpacity: .5
        }
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [2.3572094778320434,48.90109200399041],
                [2.3918850759765746,48.89996355650762],
                [2.3973782400390746,48.88529142073465],

pour appliquer le style à la création tu peux utiliser l'option style également mise à disposition

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var oGeoJson = L.geoJson( [ trace, autre...], {
  // application du style défini
  style: function (feature) {
    return feature.properties && feature.properties.style;
  },
  // affectation action
  onEachFeature: onEachFeature
}).addTo( oMap);

concernant le changement de style cela se passe dans la fonction onEachFeature qui pourrait ressembler à cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function onEachFeature(feature, layer) {
  layer
    .on('mouseover', function(){
        this.setStyle( this.feature.properties.overStyle);
    })
    .on('mouseout', function(e){
       oGeoJson.resetStyle(e.target);
    });
}

Comme tu le vois aucunement besoin de mettre des conditions si le style est défini par avance.

Je t'engage à regarder l'exemple fourni Interactive Choropleth Map, qui t'en dira bien plus que moi.

**Marc31** · 09/12/2015, 15h06

Merci pour l'aide amis j'arrive pas à le faire fonctionner....mon nom de couche est Dep, il n'apparait nulle part, c'est normal??

**NoSmoking** · 09/12/2015, 16h28

....mon nom de couche est Dep, il n'apparait nulle part, c'est normal??

tu ne trouvera que très très rarement un code qui te convient aux noms de variable près.

Le code que je t'ai fourni est un exemple, il contient pratiquement tout ce qui est nécessaire, à toi de le mettre en oeuvre avec tes données.

Peut être devrais tu nous indiquer comment sont déclarées tes données et ce que tu as fait, une page test serait vraiment un plus, en ligne serait l'idéal

**Marc31** · 09/12/2015, 16h38

Oui c'est vrai , voici comment je déclare ma couche départements...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//affiche les contours de Midi Py
 
		var Departement = L.geoJson(null);
 
			$.getJSON("data/Departements.geojson", function (data) {
 
				Departement.addData(data);
 
				map.addLayer(Departement);
 
					});
 
 
//affiche les infos de la couche départements
 
				var Departement = L.geoJson(null, {
 
						onEachFeature: function (feature, layer) {
 
						layer.setStyle({ weight: 2,color: '#3D63AF',dashArray: '',fillOpacity: 0.2,opacity: 1,});
 
						layer.bindPopup(feature.properties.colonne_we);
 
 
						}
 
						}).addTo(map);

**NoSmoking** · 10/12/2015, 19h00

Si je reprend ton code ré-indenté pour y voir plus clair on peut le séparer en 2 tranches
• La première

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//affiche les contours de Midi Py
var Departement = L.geoJson(null);
$.getJSON('data/Departements.geojson', function (data) {
  Departement.addData(data);
  map.addLayer(Departement);
});

Ici on crée un objet geoJson, vide, auquel après requête on lui ajoute les données à afficher. En dernier on l'ajoute à la carte pour que son contenu soit visible.

• La seconde

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
//affiche les infos de la couche départements
var Departement = L.geoJson(null, {
  onEachFeature: function (feature, layer) {
    layer.setStyle({
      weight: 2,
      color: '#3D63AF',
      dashArray: '',
      fillOpacity: 0.2,
      opacity: 1,
    });
    layer.bindPopup(feature.properties.colonne_we);
  }
}) .addTo(map);

Ici on crée un nouvel objet geoJson, vide, auquel on déclare la fonction à appliquer à tous les éléments qui y seront rattachés. En dernier on l'ajoute à la carte pour que son contenu soit visible.

Question : Pourquoi déclarer un 2^éme objet ?

Tu devrais te retrouver avec une structure de code simple du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
//affiche les contours de Midi Py
$.getJSON('data/Departements.geojson', function (data) {
    var Departement = L.geoJson( data, {
        style:
        // etc...
    }).addTo( oMap);
});

**Marc31** · 11/12/2015, 11h53

Bonjour, Merci pour votre aide. Bonne journée

Changement de style d'une couche GeoJson au survol de la souris [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager