Discussion :

[Nymphea29]

Bonsoir à tous,

Je possède 3 couches de données en GeoJSON (2 avec des objets points et 1 avec des objets polygones). J'ai créé et ajouté à ma carte 1 point et la polygone : les points sont bien au-dessus des polygones. Puis j'ai ajouté ma 2ème couche Poin (que j'ai mis dans l'ordre avant ma couche de polygone), et la c'est le drame : ma deuxième couche de points est sous ma couche polygone.
J'ai essayé plein de chose : utiliser les "Panes" utiliser des options ZIndex mais rien ne marche. J'essaie du coup quel que chose de simple qui est bringToBack() sur ma couche polygone or quand je l'implémente cela me ressort une erreur : Uncaught ReferenceError: geojson_PRA is not defined at carte_presentation.js:145 voila mon code de carte_presentation :

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
139
140
141
142
143
144
145
//On défini le style général des PRA
	function stylePrez (feature) {     
		return {        
			weight: 0.5,
			opacity: 1,
			color: '#000000',
			dashArray: '3',
			fillOpacity: 0.7,
			fillColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6) 			
		};   
	}
 
var infoPrez = L.control();
	infoPrez.onAdd = function (mapPrez) {
		this.divPrez = L.DomUtil.create('div', 'infoPrez'); // create a div with a class "infoPrez"
		this.update();
		return this.divPrez;
	};
 
// fonction qui permet de mettre à jour l'encart d'information
	infoPrez.update = function (props) {
		this.divPrez.innerHTML =  (props ? '<b>'+props.prenom +' '+ props.nom +'</b> <br>'
			+ props.codePostal + ' ' + props.libelle + '<br>' 
			+ props.surfacetot + ' ha <br>'
			+ props.cultures
			: "<b>Informations </b> <br> Survolez un point d'une exploitation");
	};
 
//fonction qui permet de mettre un PRA en "relief" lorsque l'on passe dessus
	function highlightFeaturePrez(e) {
		var layer = e.target;
 
		layer.setStyle({
			weight: 3,
			color: '#FFFFFF',
			dashArray: '',
			fillOpacity: 0.7
		});
 
		if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
			layer.bringToFront();
		}
 
		infoPrez.update(layer.feature.properties);
	}
 
	//fonction de reset du style de la PRA quand le curseur n'est plus dessus 
	function resetHighlightPrez(e) {
		geojson_PrezExploit.resetStyle(e.target);
		infoPrez.update();
	}
 
//fonction pour chaque PRA qui permet de mettre en lumière ou non en fonction du passage du curseur de la souris
	function onEachFeaturePrez(feature, layer) {
		layer.on({
			mouseover: highlightFeaturePrez,
			mouseout: resetHighlightPrez,
		});
	}	
 
function onEachFeaturePRA(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.libelle) {
        layer.bindPopup(feature.properties.libelle);
    }
}
 
//couche Open street mapPrez
	var openSM = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // LIGNE 20
		attribution: ' OpenStreetmap contributors',
		maxZoom: 16
	});
 
// définition de la carte				
	var mapPrez = L.map('mapPrez', {
		center: [48.176,-4.239],
		zoom: 11,
		layers: [openSM]
	});
 
		L.control.scale({position: 'bottomright'}).addTo(mapPrez);
 
//les controls sur la carte dans leur ordre d'apparaition
	infoPrez.addTo(mapPrez);
 
//Récupération Couche avec la localisation de l'OPA
	$.ajax({     
		url : './GeoJSON/geojson_loca_OPA.php',     
		type : 'GET',     
		dataType : 'json', // On désire recevoir du geojson 
		success : function(data){ // data contient le geojson renvoyé 
			geojson_Loca_OPA=L.geoJson(data, 
										{pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, geojsonMarkerOptions2);}});         
			mapPrez.addLayer(geojson_Loca_OPA)
		},     
		error : function(){alert('erreur')}
	});	
 
	var geojsonMarkerOptions2 = {
			radius: 8,
			color: "#FFFFFF",
			weight: 1,
			opacity: 1,
			fillOpacity: 1,
			fillColor: "#F7BE4C"
		};
 
//Récupération des exploitations avec leurs risques et vulné en €/ha en geojson avec la coloration des points
	$.ajax({     
		url : './GeoJSON/geojson_prez_exploit.php',     
		type : 'GET',     
		dataType : 'json', // On désire recevoir du geojson
		success : function(data){ // data contient le geojson renvoyé 
			geojson_PrezExploit=L.geoJson(data, 
										{pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, geojsonMarkerOptions);},onEachFeature: onEachFeaturePrez});         
			mapPrez.addLayer(geojson_PrezExploit)
		},     
		error : function(){alert('erreur')}
	});
 
 
	var geojsonMarkerOptions = {
			radius: 8,
			color: "#FFFFFF",
			weight: 1,
			opacity: 1,
			fillOpacity: 1,
			fillColor: "#7C7C7C"
		};
 
//Récupération des PRA avec leurs risques et vulné en €/ha en geojson ***Code Pauline Jouzier  
	$.ajax({     
		url : './GeoJSON/geojson_pra.php',     
		type : 'GET',     
		dataType : 'json', // On désire recevoir du geojson  
		pane: 'poly',   
		success : function(data){ // data contient le geojson renvoyé 
			geojson_PRA=L.geoJson(data, {style: stylePrez, onEachFeature: onEachFeaturePRA});         
			mapPrez.addLayer(geojson_PRA);     
			mapPrez.fitBounds(geojson_PRA.getBounds());      
		},     
		error : function(){alert('erreur');} 
	});
 
	geojson_PRA.bringToBack();

Merci pour votre lecture

[Nymphea29]

Il suffisait de déplacer le geojson_pra.bringToBack() dans la fonction ajax comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 $.ajax({     
		url : './GeoJSON/geojson_pra.php',     
		type : 'GET',     
		dataType : 'json', // On désire recevoir du geojson  
		pane: 'poly',   
		success : function(data){ // data contient le geojson renvoyé 
			geojson_PRA=L.geoJson(data, {style: stylePrez, onEachFeature: onEachFeaturePRA});         
			mapPrez.addLayer(geojson_PRA);  
			geojson_PRA.bringToBack();
			mapPrez.fitBounds(geojson_PRA.getBounds());      
		},     
		error : function(){alert('erreur');} 
	});