Discussion :

[SylvainM]

Bonjour,

J'ai posé la question sur le forum GeoRezo dédié à la géomatique, mais il me semble que ma question est finalement purement liée au Javascript que je ne maitrise pas encore.
Comme expliqué, j'utilise pour des cartes interactives des données externes stockées au format GeoJson, qui si j'ai bien compris n'est finalement qu'un fichier Json à composante spatiale.
Mes fichiers GeoJson sont écrits de cette manière :

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
{
  "type": "FeatureCollection",
  "generator": "overpass-turbo",
  "copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.",
  "timestamp": "2015-01-01T00:00:00Z",
  "features": [
    {
      "type": "Feature",
      "id": "relation/5000000",
      "properties": {
        "@id": "relation/5000000",
        "tags": "tagsvalue",
        "name": "Name",
        "type": "multipolygon"
      },
...etc...
}

et enregistrés dans des fichiers nom_fichier.geojson

Pour pouvoir les utiliser dans des cartes interactive (bibliothèque Leaflet), je dois modifier manuellement mes fichiers pour définir une variable depuis leur contenu :
Par exemple :

Code :

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

var geoJsonData = [ contenu_de_mon_geojson ];

Ce qui me permet ensuite d'appeler ces données de cette manière :

Code :

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

var geoJsonLayer = L.geoJson(geoJsonData, { ...

Il serait bien plus simple pour moi si je pouvais conserver les fichiers GeoJson tels que je les récupère, et définir la variable depuis la page HTML.

Cela est-il possible ?

Merci pour vos conseils.

Sylvain M.

[SylvainM]

Tiens, en essayant de trouver la solution, je me demande si ce ne serait pas du côté de cette fonction :

Code :

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

var geoJsonData = JSON.parse(mon_fichier.geojson);

(je continue de chercher et d'essayer de mettre en service, mais si je fais fausse route, n'hésitez pas à me réorienter ! )

[sekaijin]

je ne sais pas comment tu lis ton fichier mais c'est var geoJsonData = JSON.parse(contenu_de_mon_fichier.geojson); qu'il te faut faire.

A+JYT

[SylvainM]

Tu veux dire que je ne peux pas récupérer le contenu du fichier sans l'ouvrir ? (par un procédé dont je ne maitrise certainement pas encore les rouage: j'ai vu fréquemment le terme "AJAX" dans mes recherches... Dois-je creuser dans ce sens ?)
(désolé, je n'utilise certainement pas les bons termes...)

je ne sais pas comment tu lis ton fichier [...]

Pour l'instant, mon fichier "modifié" (par ajout manuel de la déclaration de variable) est "lu" (appelé ?) dans l'entête de la page HTML de cette manière : <script src="data/monfichier.geojson"></script>
J'aimerai rester sur ce type d'appel, mais juste ajouter la définition de la variable de manière dynamique, sans avoir à modifier mon fichier geojson.

Suis-je claire ? (j'en doute ! )

Merci !

Sylvain M.

[SpaceFrog]

Suis-je claire ?

Je pensais que c'était Sylvain

En tout cas ce n'est las clair ...

[SylvainM]

C'est clair que je ne suis ni Claire, ni clair...

En tout cas ce n'est las clair ...

Mais je ne suis pas las pour pour autant

[SylvainM]

Donc pour tenter d'être plus clair (sans opération chirurgicale), je vais essayer de reformuler, en plus court.

Question :
Je souhaite ajouter dynamiquement la déclaration d'une variable basée sur le contenu d'un fichier GeoJson appelé dans l'entête de mon fichier HTML (<script src="data/monfichier.geojson"></script>).
Est-ce possible en pur javascript ? (et si oui, comment)

Merci à vous !

Sylvain M.

[sekaijin]

effectivement il te faut en passer par ajax

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
// la fonction qui utilise les données.
function utiliserLaReponse(json) {
  alert(json.features[0].type)
}
 
 
//la lecture du fichier
var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "data/monfichier.geojson", true);
xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    utiliserLaReponse(JSON.parse(xhttp.responseText));
  }
}
xhttp.send();

A+JYT

[SylvainM]

Bon et bien je dois me rendre à l'évidence : je n'ai clairement pas le niveau pour cela...
Je pense que je vais me contenter d'ajouter manuellement "var mavar = [...];" à mes fichiers geojson : ce sera plus rapide pour moi que d'apprendre ce langage Ajax...
(mais bon, je le garde sous le coude quand même, pour le jour où je deviendrai développeur !)
Merci pour votre aide et votre indulgence !

Sylvain M.

[SylvainM]

Merci encore sekaijin pour ce code,
Bon, vu le temps qu'il va me faire gagner au final, je pense que ça vaut quand même la peine que j'essaie d'adapter ces quelques lignes de codes à mes besoins.
Du coup, j'aurai quand même besoin d'un peu plus d'explications, si c'est possible pour toi :
Si je place ce code dans ma page, je vois bien la partie qui fait référence à la source du fichier geojson, mais je ne vois pas celle qui fait référence au nom de la variable créée par le script : peux-tu m'indiquer où cela s'écrit-il ?
Est-ce que c'est "xhttp" ?
Merci et désolé pour cette question de "newbie"
A+

Sylvain M.

[SylvainM]

Finalement, je viens de voir qu'il existe (si je comprends bien) un bibliothèque pour gérer ce cas précis, dans l'environnement de Leaflet :
https://github.com/calvinmetcalf/leaflet-ajax
Je vais d'abord creuser dans ce sens, et si je n'y arrive pas je reviendrai ici.
A+

Sylvain M.

[NoSmoking]

Bonjour,
au final tu vas utiliser ce que t'a proposé sekaijin

[SylvainM]

Oui, c'est vrai qu'en regardant le code source du plugin, je retrouve pas mal de similarités avec le code de sekaijin
Pour moi, c'est juste plus facile à intégrer sous forme de plugin, mais je conviens que ce serait certainement plus propre de l'intégrer directement.
En tout cas, merci de votre indulgence !
A+

Sylvain M.