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 !?!

[Manard82]

Bonsoir NoSmokung,

Je viens d'appliquer les lignes de code après la création de la couche, en validant rien ne se produit. Sinon s'il est possible de se passer de ce "click" ou appel à la simulation de ce bouton, je suis preneur.

Avec mes remerciements pour ton aide

Bernard

[NoSmoking]

Je viens d'appliquer les lignes de code après la création de la couche,

il doit y avoir quelque chose qui m'échappe, aucune raison que cela ne fonctionne pas !

Montre nous ton script pour que l'on voit où, quand et comment, est définie, où, quand et comment, est appelée l'action d'exportation.

[Manard82]

Bonsoir NoSmoking,

Cet après-midi j'ai élaboré une carte de test en nettoyant le code initial de fonctions qui n'interagissent pas avec ma recherche d'export. A la fin j'ai recollé les lignes que tu m'as proposées et me suis aperçu que la référence à la couche était à modifier en remplaçant "featureGroup" par "exportlayers", et l'export a fonctionné.

Comme j'ai dérouté un bouton existant d'export vers gpx, j'en ai créé un autre appelé "exportgpx-2", j'ai du déclarer ce bouton dans body et dans le script en ajoutant :

Code javascript :

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

document.getElementById('exportgpx-2').onclick = function(e) {}

Afin que tu te rendes compte de ma recherche, voici le lien vers la carte de test sur mon espace perso de Free : http://manardb.free.fr/tmp/Carte-test.html

Lors du chargement de la page il y a trois fichiers de données d'un total d'environ 18 Mo qui se chargent. Ce sont ceux des noms de localités, lieux d'habitat et relief (hypsographie) du Maroc.

Dans le champ après "Texte recherché" je saisis une suite de caractères en minuscules (les données dans les fichiers ont toutes été converties en minuscules). Ensuite il faut cliquer sur "Rafraîchir" pour lancer la requête dans les fichiers, la saisie des caractères se stocke dans localStorage. On peut visualiser le résultat de cette recherche sur la carte depuis le bouton contrôle des couches. Depuis le menu déroulant, objet de mon post, on peut exporter le résultat de la requête par items ou lot au format gpx.

Je renouvelle mes remerciements pour ton aide précieuse

Bonne soirée

Bernard