Discussion :

[Manard82]

Bonjour,


Je suis en train de modifier une page html qui me permet d'afficher des cartes avec l'API Leaflet.

Dans cette page je peux exporter les données geojson d'une couche en cliquant sur un bouton dirigeant vers un lien dans la page dont voici le code :

Code html :

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

<a href="#" id='exportgpx' data-toggle="tooltip" title="Enregistrer les waypoints et/ou tracés au format gpx">Gpx</a>

Coté javacript, ce lien aboutit à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
document.getElementById('exportgpx').onclick = function(e) {
            // Extract GeoJson from featureGroup
            var data = exportlayers.toGeoJSON();
            var gpx = togpx(data);
            // Stringify the GeoJson
            var convertedData = 'text/gpx;charset=utf-8,' + encodeURIComponent(gpx);
            // Create export
            var name = prompt('Enter file name','data'); // second param can be empty, it is the default value
            document.getElementById('exportgpx').setAttribute('href', 'data:' + convertedData);
            document.getElementById('exportgpx').setAttribute('download',name + '.gpx');
    }

Les exports de données sont fonctionnels.

Maintenant je désire enchaîner deux commandes, d'une part une sélection de couches à exporter avec une checkbox à choix multiples, puis une fois les choix réalisés, les valider pour export dans une couche et poursuivre par l'export vers le fichier gpx sans cliquer sur le bouton "exportgpx" sur la page, mais en simulant son appui. J'ai utilisé ce code :

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
function valid(){
 
var exportlayers = L.featureGroup();
 
var checkboxes1 = document.getElementById("lieux1");
if (checkboxes1.checked){
layerGroup001.addTo(exportlayers);}
var checkboxes2 = document.getElementById("lieux2");
if (checkboxes2.checked){
layerGroup002.addTo(exportlayers);}
var checkboxes3 = document.getElementById("lieux3");
if (checkboxes3.checked){
layerGroup003.addTo(exportlayers);}
 
const evt = new MouseEvent("click", {
  view: window,
  bubbles: true,
);
document.getElementById('exportgpx').dispatchEvent(evt);
 
document.getElementById('exportgpx').onclick = function(e) {
            var data = exportlayers.toGeoJSON();
            var gpx = togpx(data);
            var convertedData = 'text/gpx;charset=utf-8,' + encodeURIComponent(gpx);
            var name = prompt('Enter file name','data'); // second param can be empty, it is the default value
            document.getElementById('exportgpx').setAttribute('href', 'data:' + convertedData);
            document.getElementById('exportgpx').setAttribute('download',name + '.gpx');
    }
}

Je constate que l'export ne se fait pas à la première validation, mais en renouvelant cette validation. Je pense que la simulation d'appui doit être en cause, mais je ne sais comment y remédier.

Je vous remercie de votre aide

Bernard

[NoSmoking]

Bonjour,
pas tout bien compris mais est-cce qu'un simple

Code :

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

document.getElementById('exportgpx').click();

ne suffirait pas ?

Nota : pourquoi mettre un élément <a> alors que sémantiquement ce rôle revient à un <button> pouvant très largement être stylé en CSS ?

[Manard82]

Bonjour NoSmoking,


Pour développer ma page Leaflet je me suis inspiré de ce code : https://gist.github.com/danswick/d30c44b081be31aea483

Je viens de remplacer la simulation de cet export par : document.getElementById('exportgpx').click();.

Le comportement est identique, je dois toujours cliquer deux fois pour que cet export se lance

J'ai répété deux fois

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
document.getElementById('exportgpx').click();
 
document.getElementById('exportgpx').onclick = function(e) {
            // Extract GeoJson from featureGroup
            var data = exportlayers.toGeoJSON();
 
            var gpx = togpx(data);
            // Stringify the GeoJson
 
			var convertedData = 'text/gpx;charset=utf-8,' + encodeURIComponent(gpx);
            // Create export
			var name = prompt('Enter file name','data'); // second param can be empty, it is the default value
            document.getElementById('exportgpx').setAttribute('href', 'data:' + convertedData);
            document.getElementById('exportgpx').setAttribute('download',name + '.gpx');
    }

Ça génère le fichier, il semblerait que ce lien dans le bouton soit différent d'un simple click ?

Bernard

[NoSmoking]

Attention :
il faut que la fonction à executer sur le clic soit affectée avant de cliquer

Code :

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

1
2
3
4
5
6
7
const oBtn = document.getElementById("exportgpx");
// on défini ce que l'on veut faire au clic
oBtn.addEventListener("click", function(e) {
  // action au click
});
// maintenant on peut simuler le clic !
oBtn.click();

[Manard82]

Je viens de tester cette simulation de click :

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
const oBtn = document.getElementById("exportgpx");
// on défini ce que l'on veut faire au clic
oBtn.addEventListener("click", function(e) {
document.getElementById('exportgpx').click();
});
// maintenant on peut simuler le clic !
oBtn.click();
 
 document.getElementById('exportgpx').onclick = function(e) {
            // Extract GeoJson from featureGroup
            var data = exportlayers.toGeoJSON();
 
            var gpx = togpx(data);
            // Stringify the GeoJson
 
			var convertedData = 'text/gpx;charset=utf-8,' + encodeURIComponent(gpx);
            // Create export
			var name = prompt('Enter file name','data'); // second param can be empty, it is the default value
            document.getElementById('exportgpx').setAttribute('href', 'data:' + convertedData);
            document.getElementById('exportgpx').setAttribute('download',name + '.gpx');
 
}

Il me faut toujours valider deux fois pour obtenir cet export, ai-je bien pris en compte le code ?

Bernard

[NoSmoking]

Premier point, contrairement à ce que je t'ai dis plus haut, et après avoir regardé ton lien, il s’avère qu'il te faut bien utiliser un élément <a> car tu l'utilises pour le download.

Ceci étant réatbli :

Il me faut toujours valider deux fois pour obtenir cet export, ai-je bien pris en compte le code ?

Ta correction est erronée car visiblement tu n'a pas saisie ce que tu faisais, donc on reprend.

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
// récup. de l'objetHTML de ton lien
const elemExport = document.getElementById("exportgpx");
 
// affectation de ce que l'on veut faire au clic
elemExport.addEventListener("click", function() {
  // Extract GeoJson from featureGroup
  const data = featureGroup.toGeoJSON();
 
  // Stringify the GeoJson
  const convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
 
  // Create export
  elemExport.setAttribute('href', 'data:' + convertedData);
  elemExport.setAttribute('download', 'data.geojson');
});
 
// si on veut simuler le clic
elemExport.click();

Pas plus de code à mettre et celui-ci remplace le tien.

C'est maintenant que je ne comprends pas pourquoi tu veux simuler le clic !?!