Discussion :

[Nymphea29]

Bonjour,
Je me trouve face à une interrogation, j'ai eu beau chercher sur le forum, j'ai l'impression d'être la seule. Je vous explique:

Je réalise une carte grâce à Leaflet en utilisant comme couche vecteur un geoJSON, j'ai réussi à afficher tout ce que je souhaite (zoom, échelle, légendes etc.), mes entités sont bien colorées en fonction d'une des properties du dit GeoJSON.
Cependant je souhaiterais que l'utilisateur puisse changer la coloration des entités (et donc que la coloration se fasse en fonction d'un autre properties) lorsque soit il clique sur un bouton ou qu'il sélectionne se qu'il veut voir (un peu comme le sélectionneur de couche) ou alors grâce à un curseur. Je précise que toutes les properties ont le même type de données et donc la même légende (couleur, intervalle et seuil)

Voici mon code actuelle pour créer la carte (le css et la définition de la légendes sont sur un autre fichier) :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 //On défini le style général des PRA
	function styleRiPRA (feature) {     
		return {        
			weight: 0.5,
			opacity: 1,
			color: '#000000',
			dashArray: '3',
			fillOpacity: 0.7,
			fillColor: getColorRisVulne(feature.properties.risques3)  			
		};   
	}
 
var infoRiPRA = L.control();
	infoRiPRA.onAdd = function (mapRiPRA) {
		this.divRiPRA = L.DomUtil.create('div', 'infoRiPRA'); // create a div with a class "infoRiPRA"
		this.update();
		return this.divRiPRA;
	};
 
// fonction qui permet de mettre à jour l'encart d'information
	infoRiPRA.update = function (props) {
		this.divRiPRA.innerHTML = "<h4>Risque de pertes en cas d'aléas</h4>"
			+  (props ? ''+props.prenom +' '+ props.nom +' : '+ props.libelle
			+ '<br /> Pertes : ' + props.Risque3 + ' €/ha'
			: "Survolez un point d'une exploitation");
	};
 
//fonction qui permet de mettre un PRA en "relief" lorsque l'on passe dessus
	function highlightFeatureRiPRA(e) {
		var layer = e.target;
 
		layer.setStyle({
			weight: 3,
			color: '#666',
			dashArray: '',
			fillOpacity: 0.7
		});
 
		if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
			layer.bringToFront();
		}
 
		infoRiPRA.update(layer.feature.properties);
	}
 
	//fonction de reset du style de la PRA quand le curseur n'est plus dessus 
	function resetHighlightRiPRA(e) {
		geojson_RiExploit.resetStyle(e.target);
		infoRiPRA.update();
	}
 
//fonction pour chaque PRA qui permet de mettre en lumière ou non en fonction du passage du curseur de la souris
	function onEachFeatureRiPRA(feature, layer) {
		layer.on({
			mouseover: highlightFeatureRiPRA,
			mouseout: resetHighlightRiPRA,
		});
	}	
 
//fonction qui permet d'avoir la légende
	var legendRiPRA = L.control({position: 'bottomleft'});
 
	legendRiPRA.onAdd = function (mapRiPRA) {
		var divRiPRA = L.DomUtil.create('divRiPRA', 'infoRiPRA legendRiPRA'),
		grades = [0, 70, 140, 210, 280, 350, 420, 500, 1000, 3190];
 
		// première ligne de légende qui permet de nommé le dernier élément de getColor
		divRiPRA.innerHTML +='<i style="background:' + getColorRisVulne(grades[-1]) 
		+ '"></i> ' + "0 €/ha <br>";
 
		//boucle qui permet de créer la légende en récupérant le nom et les couleurs pour les mettre en forme 
		for (var i = 0; i < grades.length-1; i++) {
			divRiPRA.innerHTML +=
				'<i style="background:' + getColorRisVulne(grades[i+1]) + '"></i>'
				+ grades[i] + (grades[i + 1] ? ' à ' + grades[i + 1] 
				+ ' €/ha <br>' : '');
		}
 
		return divRiPRA;
	};
 
 
 
//couche Open street mapRiPRA
	var openSM = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // LIGNE 20
		attribution: ' OpenStreetmapRiPRA contributors',
		maxZoom: 16
	});
 
// définition de la carte				
	var mapRiPRA = L.map('mapRiPRA', {
		center: [48.176,-4.239],
		zoom: 10,
		layers: [openSM]
	});
 
		L.control.scale({position: 'bottomright'}).addTo(mapRiPRA);
 
//les controls sur la carte dans leur ordre d'apparaition
	legendRiPRA.addTo(mapRiPRA);
	infoRiPRA.addTo(mapRiPRA);
 
//Récupération des exploitations avec leurs risques et vulné en €/ha en geojson avec la coloration des points
	$.ajax({     
		url : './GeoJSON/geojson_indicateur_risque_vulne_exploit.php',     
		type : 'GET',     
		dataType : 'json', // On désire recevoir du geojson     
		success : function(data){ // data contient le geojson renvoyé 
			geojson_RiExploit=L.geoJson(data, 
										{pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, geojsonMarkerOptions(feature));},onEachFeature: onEachFeatureRiPRA});         
			mapRiPRA.addLayer(geojson_RiExploit)
		},     
		error : function(){alert('erreurPRA')}
	});
 
 
	function geojsonMarkerOptions(feature) {
		return {
			radius: 8,
			color: "#000",
			weight: 1,
			opacity: 1,
			fillOpacity: 1,
			fillColor: getColorRisVulne(feature.properties.Risque3)
		};
	}
//Récupération des PRA avec leurs risques et vulné en €/ha en geojson ***Code Pauline Jouzier  
	$.ajax({     
		url : './GeoJSON/geojson_indicateur_risque_vulne_PRA.php',     
		type : 'GET',     
		dataType : 'json', // On désire recevoir du geojson     
		success : function(data){ // data contient le geojson renvoyé 
			geojson_RiPRA=L.geoJson(data, {style: styleRiPRA});         
			mapRiPRA.addLayer(geojson_RiPRA);     
			mapRiPRA.fitBounds(geojson_RiPRA.getBounds());      
		},     
		error : function(){alert('erreur');} 
	});

Merci d'avance pour votre réponse

[mathieu]

vous parlez de quel utilisateur ? celui qui va consulter la carte ? ou alors il peut aussi modifier la carte et enregistrer les modifications ?

[Nymphea29]

vous parlez de quel utilisateur ? celui qui va consulter la carte ? ou alors il peut aussi modifier la carte et enregistrer les modifications ?

je parle de celui qui va consulter la carte

[Manard82]

Bonjour,

Il y a peut-être la possibilité de changer les couleurs avec "Leaflet.StyleEditor" : https://github.com/dwilhelm89/Leaflet.StyleEditor ?

Ça modifie les couleurs, largeur de lignes, type d'icônes de marqueurs, l'opacité.

Bonne recherche

Bernard