Discussion :

[Marc31]

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]

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]

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]

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]

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]

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...