Discussion :

[xavlight]

Bonjour,

Je souhaiterais pouvoir créer/modifier/supprimer des croquis (point, lignes, polygones) sur une carte.
Je me suis basé sur l’extension ‘ol.control.Drawing’ qui fonctionne très bien dans le cas de la création, mais je souhaiterais également pouvoir modifier des croquis que j’aurais importé sur la carte.

exemple utilisé (sans l'import de Layer) : https://jsfiddle.net/migration_api_gp_ign/0ckL5u20/

Cela fait plusieurs jours que je cherche une solution, j’ai même réussi à mettre en place la modification de layers ajoutés en ajoutant le paramètre ‘layer’ dans les options de ‘ol.control.Drawing’.
Avec ce paramètre, la modification se fait bien sur le/les layer.vector ajoutés, mais la fonction standard du control.Drawing ne fonctionne plus pour ajouter des croquis.
Mais ce n'est peut être pas la bonne méthode.

Je préférerais pouvoir utiliser cette extension paramétrable plutôt que devoir la redévelopper complètement et gérer les différents cas Draw/Modify/Remove/Select/Move

Je recherche donc une méthode pour :

• Modifier/supprimer des ‘ol.layer.Vector’ que j’aurais ajouté sur la carte en utilisant l’outils du control Drawing avec les pictos ‘modifier ou supprimer’
  Voir la possibilité de cibler des layers que je souhaiterais ‘modifier/supprimer’, et pas d’autres qui seraient verrouillés (non accessible à la modification/suppression)

• Sauvegarder les données croquis présentent sur la carte (Pas le bouton export), pour ajouter ces données en BDD. Format GeoJSON.
  Avec clic sur un autre bouton, type validation

Rien trouvé sur le forum qui parle de cette extension control.Drawing.


Merci pour vos retours ou idées ou déjà fait.
Cordialement

[lowzonenose]

Bonjour,

il est possible d'utiliser la méthode publique suivante pour importer un layer, qui sera associé au contrôle de croquis pour modification :

Code JavaScript :

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

1
2
3
4
5
6
/**
 * Sets vector layer to hosts feature.
 *
 * @param {ol.layer.Vector} vlayer - vector layer
 */
setLayer()

Voir la possibilité de cibler des layers que je souhaiterais ‘modifier/supprimer’,

pour ce type d'opération, il faut mettre en place le mécanisme comme sur le Portail.
et pour ce type de développement, il est possible de collaborer au sein du projet gitHub via une PR : https://github.com/IGNF/geoportal-extensions

Sauvegarder les données croquis ... Format GeoJSON.

actuellement, la méthode exportFeatures permet de créer un fichier KML.
il est assez facile de surcharger cette méthode pour implémenter la sauvegarde en GeoJSON, car OpenLayers gère nativement ce format.
ex.

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
import GeoJSON from 'ol/format/GeoJSON';
 
var geoJsonFormat = new GeoJSON({
       writeStyles : true
});
 
var result = geoJsonFormat.writeFeatures(this.layer.getSource().getFeatures(), {
            dataProjection : "EPSG:4326",
            featureProjection : featProj
});

[xavlight]

Merci lowzonenose. Je teste ça lundi et je vous dis si je rencontre des soucis.

Merci encore pour vos réponses.

Bon week-end

[xavlight]

Bonjour,

il est possible d'utiliser la méthode publique suivante pour importer un layer, qui sera associé au contrôle de croquis pour modification :

Code JavaScript :

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

1
2
3
4
5
6
/**
 * Sets vector layer to hosts feature.
 *
 * @param {ol.layer.Vector} vlayer - vector layer
 */
setLayer()

je viens de faire mes tests avec la méthode setLayer(), finalement, c'est ce que j'avais fait aussi en passant par :

Code JavaScript :

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

1
2
3
4
5
var drawArea = new ol.control.Drawing({
...
layer : vectorLayer,
..
});

Mais cela pose 2 problèmes :

• Je ne peux ajouter q'un seul Layer alors que j'en aurais plusieurs à mettre en mode modification. J'ai essayé par un tableau, mais ça n'a pas l'air d'être prévu
• Je ne peux plus ajouter de nouveau croquis (dès que l'on a positionné un Layer)
  Alors que je cherche à importer des Layers pour la modification, mais à pouvoir toujours ajouter des croquis.

Pas encore testé, mais je devrais m'en sortir pour l'export.

[lowzonenose]

Je ne peux ajouter q'un seul Layer alors que j'en aurais plusieurs à mettre en mode modification.

pour ce type d'opération, il faut mettre en place le mécanisme comme sur le Portail.
et pour ce type de développement, il est possible de collaborer au sein du projet gitHub via une PR : https://github.com/IGNF/geoportal-extensions

L'idée mise en place sur le portail pour la modification :
1. mécanisme de sélection du croquis (on utilise le gestionnaire de couche pour identifier le croquis à sélectionner)
2. ajouter ce croquis à l'outil de dessin pour modification avec setLayer()
3. sauvegarde via l'export

Pour créer un nouveau croquis, il suffit de retirer le croquis associé à l'outil de dessin.

[xavlight]

Bonjour,

pour mon 1er test, j'ai ajouté un changement du setLayer en fonction de la zone de clic.
Mais le setLayer n'a pas d'effet.

Si je le positionne en dehors de mon onclic, bien sûr il n'y a pas de problème.

Voici quelques extraits de code

Code JavaScript :

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
...
var vectorZonesSource = new ol.source.Vector({
	features: format.readFeatures(importZonesLayer)
});
...
var vectorZones = new ol.layer.Vector({
	id: 'Import Zones',
	title: 'Import Zones',
	source: vectorZonesSource,
	style: styleFunction
});
...
var drawArea = new ol.control.Drawing({
	collapsed : true,
	draggable : true,
	layerswitcher : {
		title : "Zones",
		description : "Mes Zones..."
	},
	defaultStyles : {},
	cursorStyle : {},
	tools : {
		points : true,
		lines : true,
		polygons :true,
		holes : false,
		text : false,
		remove : true,
		display : true,
		tooltip : true,
		export : false,
		measure : true
	},
	popup : {
		display : true,
		function : function (params) {
			//En attente de pb réglé avec setLayer()
			/*
			let format = new ol.format.GeoJSON();
			//On convertit les coordonnées au format long/Latt  EPSG:3857
			let newArea = format.writeFeatureObject(params.feature, {featureProjection: 'EPSG:3857'});
			//On créé un FeatureCollection pour une manipulation plus simple pour le add
			var importZonesLayer = {
				"type": "FeatureCollection",
				"features": [newArea]
			};
 
			//On ajoute dans les vectorZonesSource car setLayer à besoin d'un ol.layer.Vector
			vectorZonesSource.addFeatures(format.readFeatures(importZonesLayer));
			params.saveFunc("sauvegarde de drawArea New");
			//Il faudra surement redéfinir le vectorZones
			*/
		}
	}
});
 
...
 
$('.drawing-tools-flex-display:nth(0) li').on('click', function() {
	console.log("clic sur outils de création");
	drawArea.setLayer();
})
 
$('.drawing-tools-flex-display:nth(1) li').on('click', function() {
	console.log("clic sur outils d'édition");
	drawArea.setLayer(vectorZones);
})

Je vois pas ce qui pose problème ?
Vous avez une idée ?

Merci pour vos conseils.

[lowzonenose]

la méthode setLayer() devrait ajouter la couche dessin (de type vector layer) sur la carte (sauf si elle est déjà ajoutée).

> est ce que vous la voyez s'afficher sur la carte ?

Le plus simple est de nous fournir un code complet (ex. sur jsfiddle)...

[lowzonenose]

voici un petit exemple à adapter (sauvegarde d'un croquis + modification du croquis sauvegardé) :

Code JavaScript :

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

1
2
3
4
5
var map;
var drawing, layerSwitcher;
var kmlSave;
var vectorLayer;
var vectorSource;

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
        // Création de la map
        map = new ol.Map({
          target : "map",
          layers : [rasterLayer],
          view : new ol.View({
            center : [0,0],
            zoom : 3
          })
        });
 
        // creation du controle
        drawing = new Drawing();
        map.addControl(drawing);

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var addKMLToMap = function (features) {
 
        // add KML into the map
        vectorSource =  new ol.source.Vector({
            features : new ol.Collection()
        });
        vectorSource.addFeatures(features);
 
        vectorLayer = new ol.layer.Vector({
          source : vectorSource
        });
 
        drawing.setLayer(vectorLayer);
};

Code JavaScript :

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

1
2
3
document.getElementById("saveKml").onclick = function (e) {
    kmlSave = drawing.exportFeatures();
};

Code JavaScript :

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
document.getElementById("loadKml").onclick = function (e) {
 
        if (!kmlSave) {
          console.log("kmlSave ?");
          return;
        }
 
        // read KML string
        var format = new ol.format.KMLExtended ({ // ou ol.format.KML !
          showPointNames : true
        });
        var kmlProj = format.readProjection(kmlSave);
        var mapProj = map.getView().getProjection().getCode();
        var features = format.readFeatures(
          kmlSave,
          {
            dataProjection : kmlProj,
            featureProjection : mapProj
          }
        );
        addKMLToMap(features);
};

[xavlight]

Bonjour,

j'avais encore jamais utilisé jsfiddle, mais c'est effectivement très pratique.
Voici donc le code complet qui affiche sans problème les maps, et les croquis que j'importe manuellement à partir de json (test par rapport à une prochaine BDD).

Dans cette version je n'ai pas activé au lancement (ligne 268) le setLayer.
Donc dans ce cas, l'ajout de croquis fonctionne très bien.

Si par contre on clique sur la ligne édition, où j'active au clique (ligne 280) un setLayer, cela ne fonctionne pas.

https://jsfiddle.net/u9gz4dnv/8/

Y a surement quelque chose que j'ai pas compris ou que je fais pas dans le bon ordre.
Ce serait dommage aussi de ne pas utiliser le module control.Drawing alors qu'il manque pas grand chose.

Merci pour votre aide.

[xavlight]

Pas de suggestions par rapport à mon code pour activer cette fameuse création et modification en simultanés.

Merci

[lowzonenose]

L'outil de croquis ne doit être associé qu'à un seul layer !

Ce code permet d'associer le contrôle d'édition du dessin avec la couche de dessin (source en geojson)

Code js :

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
 
// json
var featuresZones = [ 
  ...
];
 
// geojson
var importZonesLayer = {
  "type": "FeatureCollection",
  "features": featuresZones
};
 
// format de lecture
var format = new ol.format.GeoJSON({ featureProjection:"EPSG:3857" });
 
// source layer
var vectorZonesSource = new ol.source.Vector({
   features: format.readFeatures(importZonesLayer)
});
 
// layer
var vectorZones = new ol.layer.Vector({
  id: 'Import Zones',
  title: 'Import Zones',
  source: vectorZonesSource,
  style: styleFunction
});
 
// contrôle
var drawArea = new ol.control.Drawing({
  ...
});
 
// map
var map = new ol.Map({
  ...
});
 
// ajout du layer sur la map
map.addLayer(vectorZones);
 
// on associe le layer et le contrôle de dessin
drawArea.setLayer(vectorZones);

Pour créer un nouveau croquis, on peut ajouter un bouton qui va réinitialiser le contrôle :

Code :

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

drawArea.setLayer();

Une sélection d'une option du contrôle va créer le croquis.
Ce croquis doit apparaître dans le gestionnaire de couche.
Il faut ensuite sauvegarder l'objet layer du croquis dans une liste des croquis créés.

Pour ré associer un croquis avec le contrôle, on peut ajouter un bouton qui va charger la liste des croquis existants sur la carte, le choix d'un croquis va permettre de l'ajouter dans le contrôle :

Code :

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

drawArea.setLayer(vectorSelected);

[lowzonenose]

Il faut ensuite sauvegarder l'objet layer du croquis dans une liste des croquis créés.

Ex. de code pour créer une liste de croquis disponible sur la carte

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var drawings = [];
var layers = map.getLayers();
        if (layers) {
            var found = false;
            layers.forEach((lyr) => {
                if (lyr instanceof VectorLayer) {
                    drawings.put({
                       id : lyr.id,
                       obj : lyr
                    });
                }
            });
        }

[lowzonenose]

Exemple :

Code html :

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Affichage Géoportail - Création/modif Croquis</title>
 
    <link rel="stylesheet" href="https://ignf.github.io/geoportal-sdk/latest/dist/2d/GpSDK2D.css">
    <link rel="stylesheet" href="./index.css">
 
	<script src="https://ignf.github.io/geoportal-sdk/latest/dist/2d/GpSDK2D-src.js"></script>
	<script src="./index.js"></script>
 
</head>
<body>
 
	<button id="newdrawing">New drawing</button>
	<button id="createdrawing">List drawing</button>
	<select id="listdrawing">
	  <option>select drawing to edit</option>
	</select>
	<div id="map"></div>
 
</body>
 
</html>

Code css :

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

1
2
3
4
5
6
#map {
	padding: 5px;
	width: 100%;
	height: 850px;
	box-shadow: 0 0 10px #999;
}

Code js :

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
		function go() {
 
			var drawings = [];
			var num = 1;
 
			//Photos aériennes
			var photoLayer = new ol.layer.GeoportalWMTS({
				layer: "ORTHOIMAGERY.ORTHOPHOTOS",
				olParams: {
					opacity: 0.6,
					visible: true
				}
			});
 
 
			//Exemple de croquis en json
            //Créer dynamiquement des features
			//	* geometry
			//		- Coordonnées
			//		- Type
			//	* Type
			//	* Id
			//	* Propriétés
 
			var featuresZones = [
				{
					"geometry": {
						"coordinates": [[5.717439651489258, 45.1963391141154], [5.717839300632477, 45.19562087240672]],
						"type": "LineString"
					},
					"id": "Bd Esplanade",
					"properties": {
						"name": "rue1",
						"popupContent": "rue1"
					},
					"type": "Feature"
				},
				{
					"type":"Feature",
					"geometry":{
						"type":"LineString",
						"coordinates":[[5.717155337333678,45.199690158894924],[5.7176756858825675,45.198979519524755],[5.717619359493255,45.19891147911946],[5.718091428279876,45.19828210151354],[5.718118250370025,45.198176259550706],[5.718244314193725,45.197974025252734],[5.718493759632111,45.19749962234994],[5.719059705734253,45.19567001554938],[5.7191696763038635,45.19408040238099]]
					},
					"properties":{
						"name": "rue2",
						"popupContent": "rue2"
					}
				},
				{
					"type":"Feature",
					"geometry":{
						"type":"Polygon",
						"coordinates":[[[5.719596147537231,45.1965621452224],[5.7196712493896475,45.19628241115217],[5.719864368438721,45.19618790608797],[5.720143318176269,45.19641093778765],[5.720277428627014,45.196467640622785],[5.720588564872741,45.196569705583585],[5.7205456495285025,45.19667177036138],[5.720304250717163,45.196584826302995],[5.7201701402664185,45.196633968613185],[5.719950199127196,45.19664152896482],[5.719778537750243,45.196633968613185],[5.719596147537231,45.1965621452224]]]
					},
					"properties":{
						"name": "espace1",
						"popupContent": "espace1"
					}
				}
			];
 
			var importZonesLayer = {
				"type": "FeatureCollection",
				"features": featuresZones
			};
 
			//Indique que les coordonnées sont au format Longitude, lattitude - EPSG:3857
			var format = new ol.format.GeoJSON({ featureProjection:"EPSG:3857" });
 
			//Import depuis un json complet
			var vectorZonesSource = new ol.source.Vector({
  				features: format.readFeatures(importZonesLayer)
			});
 
			//Modèle de Style 'line' par défaut
			var styleLineString = new ol.style.Style({
				stroke: new ol.style.Stroke({
					color: '#0000ff',
					width: 2
				}),
			});
 
			//Modèle de Style 'polygon' par défaut
			var stylePolygon = new ol.style.Style({
				stroke: new ol.style.Stroke({
					color: '#00ff00',
					width: 2
				}),
				fill: new ol.style.Fill({
					color: 'rgba(0, 255, 0, 0.1)'
				})
			});
 
			//Modèle de Style 'point' par défaut
			var stylePoint = new ol.style.Style({
				text: new ol.style.Text({
					text: '\uf3c5',
					scale: 2,
					textBaseline: 'bottom',
					font: '900 16px "Font Awesome 5 Free"',
					fill: new ol.style.Fill({ color: '#2196F3' }),
					stroke: new ol.style.Stroke({
						color: 'white',
						width: 1
					})
				})
			});
 
			var styles = {
				'LineString': styleLineString,
				'Polygon': stylePolygon,
				'Point': stylePoint
			};
 
			//Permet de personnaliser les formes géométriques utilisant var styles en fonction du type
			var styleFunction = function (feature) {
				return styles[feature.getGeometry().getType()];
			};
 
			var vectorZones = new ol.layer.Vector({
				id: 'Import Zones',
				title: 'Import Zones',
				source: vectorZonesSource,
				style: styleFunction
			});
 
 
			var drawArea = new ol.control.Drawing({
				collapsed : false,
				draggable : true,
				layerDescription : {
				  title : "Dessins n°0",
				  description : "..."
				},
				defaultStyles : {},
				cursorStyle : {},
				tools : {
				  points : true,
				  lines : true,
				  polygons :true,
				  holes : false,
				  text : false,
				  remove : true,
				  display : true,
				  tooltip : true,
				  export : false,
				  measure : true
				},
				popup : {}
			});
 
			var map = new ol.Map({
				target: 'map',
				layers: [photoLayer],
				controls : [drawArea],
				view: new ol.View({
					center: ol.proj.fromLonLat([5.717932, 45.195689]),
					zoom: 19,
					minZoom: 1,
					maxZoom: 22
				})
			});
 
			map.addLayer(vectorZones);
 
			var layerSwitcher = new ol.control.LayerSwitcher({});
			map.addControl(layerSwitcher);
 
			//On attribut le layer de drawArea avec vectorZones
			drawArea.setLayer(vectorZones);
 
			document.getElementById("newdrawing").addEventListener("click", function (e) {
				drawArea.setLayer();
				drawArea.options.layerDescription.title = "Dessins n°" + num++;
			});
 
			document.getElementById("listdrawing").addEventListener("change", function (e) {
				drawArea.setLayer(drawings[e.target.value]);
			});
 
			document.getElementById("createdrawing").addEventListener("click", function (e) {
				drawings = [];
				var drawingsDOM = document.getElementById("listdrawing");
				var i, L = drawingsDOM.options.length - 1;
			    for(i = L; i > 0; i--) {
				  drawingsDOM.remove(i);
			    }
				var index = 0;
				var layers = map.getLayers();
				if (layers) {
					layers.forEach((lyr) => {
						if (lyr instanceof ol.layer.Vector) {
							drawingsDOM.add(new Option (lyr.getProperties()["id"] || "croquis", index));
							drawings.push(lyr);
							index++;
						}
					});
				}
			});
 
		}
 
		Gp.Services.getConfig({
			apiKey: "jhyvi0fgmnuxvfv0zjzorvdn",
			//apiKey: "choisirgeoportail",
			onSuccess: function(response) {
				go();
			}
		});

[xavlight]

Merci pour l'exemple.
J'ai réussi par une autre méthode, je vous fais prochainement une version démo qui pourrait intéresser d'autres personnes.

Merci pour les tuyaux.

[xavlight]

Bonjour,

Voici ma méthode, peut-être un peu lourde, et surement optimisable, je ne maîtrise pas tout, mais ça fonctionne.
En prime, possibilité de gérer la suppression avec une question de validation modal ou pas.

Dans cette exemple les croquis en bleu son modifiable.
Les points verts ne sont volontairement non modifiables ni supprimables.

https://jsfiddle.net/bzjntvrf/

Si vous voyez des améliorations.

Merci pour votre collaboration

[NJNDEV]

Bonjour, j'ai testé ton fiddle qui fonctionne, bien que très lentement chez moi.
Je note que les icône "Ecrire du texte sur la carte", "Modifier les textes/Infos bulles" ont disparues.
Je ne vois pas non plus "Exporter en KML", est-ce normal?
Merci pour ton idée et ton travail.

[xavlight]

Bonjour NJNDEV,

Ceci était juste une démo de fonctionnement par rapport à mon besoin.
Oui, j'ai volontairement supprimé quelques pictos du control drawing car j'en avais pas besoin, mais tu peux facilement les faire apparaître, en modifiant les paramètres ci-dessous à 'true'.

Code JavaScript :

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
var drawArea = new ol.control.Drawing({
	collapsed : true,
	draggable : true,
	defaultStyles : {},
	cursorStyle : {},
	tools : {
		points : true,
		lines : true,
		polygons :true,
		holes : false,
		text : false, //Ajouter du texte libre sur la carte
		remove : true,
		display : true,
		tooltip : false, //Ajout de texte de commentaires pour un croquis
		export : false, //Ajout du bouton export en KML
		measure : true
	},
 
....	}
});

Pour la partie sauvegarde, pareil, non implanté car ce sera un export en Base de données sous forme json par exemple, mais pas en KML (XML).
Le format json est plus facilement manipulable en PHP ou JS.

Pour la lenteur, c'est lié à la clé de l'API qui n'est pas valide pour certains layers spécifiques, et du coup ça met du temps pour la réponse du SDK.
Tu peux mettre en remarques les layers 'Building' (buildingLayer) et 'Address' (numeroLayer), ainsi que les layers.push de chacun des 2.

[NJNDEV]

Merci pour ces précisions, tu as un "warning" sur ton post!!