Carte SVG et lien

Version imprimable

Carte SVG et lien

Bonjour,

Je suis confronté à un problème, j'ai depuis une carte svg récupéré un (au clique) id et je souhaiterais le comparer à ma data contenu dans un fichier json.

Pour faire simple je veux comparer l'id de l’élément sur lequel j'ai cliqué aux données contenus dans mon fichier json pour filtrer le résultat de ma liste déroulante.

Pour récuperer l'id :

Code:

console.log(oPath.id);

Pour comparer et remplir la liste déroulante :
Code:

1 2 3 4 5 case 'departement': liste = getDataFromTable('department_code=' + valeur, tbl_ville); valeur = updateSelect('ville', liste, 'name', 'name'); chainSelect('ville'); break;
Seulement après de multiples recherches je ne trouve pas la solution, j’espère que vous pourrez m'aider.

10/04/2020, 18h37
NoSmoking

Bonjour,
ta demande ne m'apparaît pas clairement :calim2:

Il te suffit de faire correspondre ton oPath.id, que tu récupères au clic, avec une entrée dans ton fichier JSON.

En relisant ce que j'ai écris, il est vrai que se n'est pas clair du tout :?

Pour mieux expliquer ce que je souhaite faire je vais décomposer ma pensée en plusieurs étapes.

Etape 1 : J'ai mis en place une carte SVG qui affiche les régions.

Etape 2 : Cette carte est cliquable, lorsque je clique sur une région cette dernière apparaît via un "innerHtml". La carte est de type SVG et elle comporte les différents départements qui sont chacun représentés via un "path" qui inclut un id.

Etape 3 : Je récupère l'id au clic sur le département vers la console.

Etape 4 : Une fois cet id récupéré je veux le lier à un formulaire avec une liste déroulante (avec option de recherche et auto-complétion style barre de recherche google). MAIS je veux filtrer les villes qui seront accessibles, c'est-à-dire que le formulaire ne doit proposer que des villes qui appartiennent à ce département d'où la compatibilité entre l'id du clique sur le département et l'id de fichier JSON.

Pour être encore plus claire, c'est une sorte de cascade : je choisis ma région sur ma carte SVG -> j'affiche les départements de ma région via une carte SVG -> je clique sur mon département -> actualisation de ma liste déroulante avec les villes qui appartiennent a ce département (options d’écriture avec auto-complète style barre de recherche google).

Voici mon code pour récupérer l'id :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("mapSvg").addEventListener('click', function (oEvent) {
        let oPath = oEvent.target,
            oSvg = this.firstElementChild;
        if (oSvg.id == "svg4668") {
            //Recupère id du path
            console.log(oPath.id);
            this.innerHTML = changeMap(oPath.id)
        } else if (oSvg.id == "departements") {
            console.log(oPath.id);
        }
    })
 
})

Une des cartes qui est affichée, ici le clique sur la région du Grand Est affiche cette carte SVG, c'est en cliquant sur un des "path" représentant les départements que l'on récupère l'id :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<svg xmlns="http://www.w3.org/2000/svg" viewBox="400 80 250 200" id="departements">
    <path data-nom="Ardennes" id="08" class="region-44 departement departement-08 departement-ardennes" d="m469.91,88.14l0.79,0.26l9.8,0.4l7.3-3.2l1.1-6 l4-3.8l2.8-0.2v3.8L494,81l-0.6,5.2l3.3,4.5l-1,2.4l0.6,3.1l1.4,1.9l3.3-0.9l4.3,2.4l2.8,3.8l4.9,0.6l2,1.7l-0.9,2.4l2.1-0.13 l-1.6,1.13l-2,2.7l-5.7-2.1l-1.9,2l0.8,8.8l-3.2,5.1l1.4,2.5l-4.2,3.6v0.1l-20.1-1.9l-9.8-6.6l-6.7-0.9l-0.3-14.3l2.7-0.3l5-7.2 l-1.3-3.1l1.3-3.5L469.91,88.14z"></path>
    <path data-nomf="Aube" id="10" class="region-44 departement departement-10 departement-aube" d="m442.2,186.9l-3.6-1.5l-0.4-8.5l2.9-0.8l3-5 l3.2,4.5l9,1.2v-3.3l9.5-7.6l6.5-0.9l3.1,0.5l0.4,6.1l2.6,2c1.9,0.8,3.8,1.5,5.6,2.3l2.5-1.5l3.3,1.1l-0.6,3.4l2.4,5.2l5.6,3 l0.5,9.9l-0.1,2.7l-5.6,2.5l0.2,4.8l-3.9-0.5l-4.7,3.9l-6.1,0.9l-2.2,2l-2.9-1.4l-12.6,1.6l-5-10.9l-3.6-4.1l-2,2.2l-2.5-8.3 L442.2,186.9z"></path>
    <path data-nom="Marne" id="51" class="region-44 departement departement-51 departement-marne" d="m440.6,158.9l0.4-2l7.7-10.2l-2.5-1.3l0.8-2.7 l-1.6-2.4l5.5-2.3l-3.2-8l1.2-2.6l8-4l5.3,1.8l1-2.8l6.7,0.9l9.8,6.6l20.1,1.9l2.2,9l-1,4.1l2.6,1.3l-0.6,3.9l-3.1,1.1l-1.1,5.8 l3.2,4.6l0.5,4.1l-8.6,2.2l2.2,2.5l-2.3,2.2l0.7,2.9h-4.7l-3.3-1.1l-2.5,1.5c-1.8-0.8-3.7-1.5-5.6-2.3l-2.6-2l-0.4-6.1l-3.1-0.5 l-6.5,0.9l-9.5,7.6v3.3l-9-1.2l-3.2-4.5l-2.6-1.7l-3.5-8.3L440.6,158.9z"></path>
    <path data-nom="Haute-Marne" id="52" class="region-44 departement departement-52 departement-haute-marne" d="m493.9,167.9l8.6-2.2l3.4,5.2l16.9,10.4 l-2.4,2.3l12.7,9.5l-1.7,8.6l5.5,4.7l0.2,3.1l2.7-1.1l1.3,2.5v0.1l0.2,1.4l-2.3,3.2l-2.9-0.3l-2,2.4l-0.3,8.3l-3.2,1l-2.1-1.8 l-6.6,3.9l-1.2,2.5l-4.8,1.9v-2.8l-3-1.6l-9.2-2l-2.3-4.8l2.8-2.4l-1-3.1l-1.8-2.2l-2.9-0.3l0.3-2.9l-2.6-1l-0.5-2.7l-3.5-0.7 l-0.2-4.8l5.6-2.5l0.1-2.7l-0.5-9.9l-5.6-3l-2.4-5.2l0.6-3.4h4.7l-0.7-2.9l2.3-2.2L493.9,167.9z"></path>
    <path data-nom="Meurthe-et-Moselle" id="54" class="region-44 departement departement-54 departement-meurthe-et-moselle" d="m588.2,170.9l1.9,1.3l-1.5,0.4l-10.6,7.6l-6.1-1.6l-1.6-2.7l-5.3,3.8 l-6,1l-2.4-1.8l-5.4,2l-1.1,2.8l-5.7,0.7l-4.1-4.8l0.1-2.9l-5.8-0.6l0.2-2.9l-2.5-2l1.7-2.8l-1.3-8.6l2.2-13.8l0.9-2.7l-4.9-11.5 l1.5-5.9l-1.2-2.7l-4.4-4.8l-5.3,2l-0.7-5.3l4.8-1.7l2-1.9h6.8l2.54,2.31L539.6,124l2.5,1.6l1.2,3.6l-1.7,3.1l1,5.6l-2.8,0.1 l4.3,7.5l11.5,4l-0.3,2.9l2.7,5.1l8.5,1.5l5.3,3.9l14.4,5.3L588.2,170.9z"></path>
    <path data-nom="Meuse" id="55" class="region-44 departement departement-55 departement-meuse" d="m516.2,107.97l1.2-0.07l1.5,1.6l1.9,5.6 l0.7,5.3l5.3-2l4.4,4.8l1.2,2.7l-1.5,5.9l4.9,11.5l-0.9,2.7l-2.2,13.8l1.3,8.6l-1.7,2.8l2.5,2l-0.2,2.9l-1.9,2.3l-3-0.5l-6.9,3.4 l-16.9-10.4l-3.4-5.2l-0.5-4.1l-3.2-4.6l1.1-5.8l3.1-1.1l0.6-3.9l-2.6-1.3l1-4.1l-2.2-9v-0.1l4.2-3.6l-1.4-2.5l3.2-5.1l-0.8-8.8 l1.9-2l5.7,2.1l2-2.7L516.2,107.97z"></path>
    <path data-nom="Moselle" id="57" class="region-44 departement departement-57 departement-moselle" d="m539.6,124l-2.65-10.19l0.65,0.59h2.4l1.5,2.1 l2.3,0.7l2.3-0.5l1-2.3l2-1.2l2.2-0.2l4.5,2.3l4.9-0.1l3.1,3.8l2.3,1.9l-0.5,2l3.7,3.2l2.8,4.5v2.3l4.2,0.7l1.2-1.9l-0.3-2.4 l2.6-0.2l3.8,1.8l1.4,3.5l2.1-1.5l2.5,1.9l5.8-0.4l5.3-4.2l2.2,1.4l0.5,2.1l2.4,2.4l3.2,1.5h0.03l-1.73,4.4l-1.4,2.6l-8.9,0.3 l-9.1-4.6l-0.8-2.8l-5,10.8l5.5,2.4l-1.6,2.5l2.3,1.7l1.3-2.5l3,0.3l4.3,3.4l-3,13.3l-2.3,1.8l-3.4-0.3l-2-2.7l-14.4-5.3l-5.3-3.9 l-8.5-1.5l-2.7-5.1l0.3-2.9l-11.5-4l-4.3-7.5l2.8-0.1l-1-5.6l1.7-3.1l-1.2-3.6L539.6,124z"></path>
    <path data-nom="Bas-Rhin" id="67" class="region-44 departement departement-67 departement-bas-rhin" d="m631.8,140.7l-2.8,9.4l-7.8,10.5l-2,1.5l-1.4,3.3l0.3,4.9l-2.4,7.2 l0.7,3.6l-1.5,2l-1.2,5.5l-3.16,6.23L605.9,193l-0.3-2.8l-8.5-5.6l-3.1-0.2l-5.2-2.2l1.3-10l-1.9-1.3l3.4,0.3l2.3-1.8l3-13.3 l-4.3-3.4l-3-0.3l-1.3,2.5l-2.3-1.7l1.6-2.5l-5.5-2.4l5-10.8l0.8,2.8l9.1,4.6l8.9-0.3l1.4-2.6l1.73-4.4l8.87,0.6l2.4-0.6 L631.8,140.7z"></path>
    <path data-nom="Haut-Rhin" id="68" class="region-44 departement departement-68 departement-haut-rhin" d="m605.9,193l4.64,1.83l-0.04,0.07v5.3l1.6,1.9 l0.2,3.4l-2.2,11.1l0.1,6.7l1.8,1.5l0.6,3.5l-2.2,2l-0.2,2.3l-3.1,0.9l0.5,2.2l-1.5,1.6h-2.7l-3.8,1.4l-3-1.1l0.3-2.5l-2.4-1.1 l-0.4,0.1l-2-5l-2.8,0.2l-0.5-9l-7.6-5l2.8-2.4v-6.2l4.8-7.8l4.1-13.5l1.1-1l3.1,0.2l8.5,5.6L605.9,193z"></path>
    <path data-nom="Vosges" id="88" class="region-44 departement departement-88 departement-vosges" d="m520.4,183.6l2.4-2.3l6.9-3.4l3,0.5l1.9-2.3 l5.8,0.6l-0.1,2.9l4.1,4.8l5.7-0.7l1.1-2.8l5.4-2l2.4,1.8l6-1l5.3-3.8l1.6,2.7l6.1,1.6l10.6-7.6l1.5-0.4l-1.3,10l5.2,2.2l-1.1,1 l-4.1,13.5l-4.8,7.8v6.2l-2.8,2.4l-0.9,0.6l-8.4-6.6l-5.1,2.2l-4.9-3.6l-5.8,1.6l-7-4.3l-8,5.8v-0.1l-1.3-2.5l-2.7,1.1l-0.2-3.1 l-5.5-4.7l1.7-8.6L520.4,183.6z"></path>
</svg>

Mon code pour la liste déroulante dans mon index :

Code:

1
2
3
4
5
<p>
            <label>Ville : </label>
            <select id="ville"></select>
            <span class="nombre"></span>
</p>

Enfin mon fichier json :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var tbl_ville = [
 
    {
        "id": 1,
        "department_code": "01",
        "insee_code": "01001",
        "zip_code": "01400",
        "name": "L'Abergement-Clémenciat",
        "slug": "l abergement clemenciat",
        "gps_lat": 46.15678199203189,
        "gps_lng": 4.92469920318725
  },
    {
        "id": 2,
        "department_code": "01",
        "insee_code": "01002",
        "zip_code": "01640",
        "name": "L'Abergement-de-Varey",
        "slug": "l abergement de varey",
        "gps_lat": 46.01008562499999,
        "gps_lng": 5.42875916666667
  } ...

Donc je veux comparer mon id récupéré au code du département du JSON ici : "department_code":...
Cette comparaison a pour but de filtrer les résultats de la liste déroulante qui comportera le nom de la ville, dans le JSON il s'agit de "name".

J’espère que mes explications sont plus claires et que vous pourrez m'aider à résoudre ce problème qui m'occupe depuis une semaine.

Je vous remercie par avance d'avoir pris le temps de lire ce long paragraphe et de m'aider. :)

14/04/2020, 12h04
NoSmoking
Citation:

Etape 2 : Cette carte est cliquable, lorsque je clique sur une région cette dernière apparaît via un "innerHtml". La carte est de type SVG et elle comporte les différents départements qui sont chacun représentés via un "path" qui inclut un id.

Il serait peut-être plus opportun de mettre tes différentes région dans des groupes, <g></g> , et de les afficher ou non via un display:none/block par exemple.

Citation:

Etape 4 : Une fois cet id récupéré je veux le lier à un formulaire avec une liste déroulante (avec option de recherche et auto-complétion style barre de recherche google). MAIS je veux filtrer les villes qui seront accessibles, c'est-à-dire que le formulaire ne doit proposer que des villes qui appartiennent à ce département d'où la compatibilité entre l'id du clique sur le département et l'id de fichier JSON.

La démarche est tout à fait valable !

Lorsque j'ai eu à faire cela je n'ai pas utilisé des ID numérique, déconseillée, mais sous cette forme :
- Département : D_numéro-Département
- Région : R_numéro-région
Citation:

Donc je veux comparer mon id récupéré au code du département du JSON ici : "department_code":...
Cette comparaison a pour but de filtrer les résultats de la liste déroulante qui comportera le nom de la ville, dans le JSON il s'agit de "name".

C'est cette approche que j'ai montré dans Créer des listes déroulantes liées entre elles sans utiliser Ajax, mais peut-être l'as tu déjà lu.

Il te faut simplement pousser le concept un peu plus loin en y ajoutant une base tbl_villes comme on le voit dans ton fichier JSON.

Je pourrais éventuellement mettre en ligne, en aménageant sûrement un peu, ce que j'avais fait qui n'est pas très loin de ce que tu cherches à faire.

Bonjour,

Tout d'abord merci de votre réponse.

Concernant votre méthode, j'ai exploité votre tutoriel qui était très bien expliqué. En revanche j'ai fais en sorte de l'adapter pour pouvoir cliquer sur le département au lieu d'utiliser la liste déroulante. Cela signifie que je récupère l'id au clic sur la carte et je souhaite le comparer à ma table ville.

Ainsi, je me retrouve à présent face au problème pour relier mon choix du département et de la ville.

Ma table :
Code:

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 var tbl_ville = [ { "id": 1, "department_code": "01", "insee_code": "01001", "zip_code": "01400", "name": "L'Abergement-Clémenciat", "slug": "l abergement clemenciat", "gps_lat": 46.15678199203189, "gps_lng": 4.92469920318725 }, { "id": 2, "department_code": "01", "insee_code": "01002", "zip_code": "01640", "name": "L'Abergement-de-Varey", "slug": "l abergement de varey", "gps_lat": 46.01008562499999, "gps_lng": 5.42875916666667 }, ...
Voici un lien pour comprendre l'idée : https://codepen.io/Zonecss/pen/bGdOPKK

J’espère que vous pourrez m'aider.
Je vous remercie par avance.

Citation:

En revanche j'ai fais en sorte de l'adapter pour pouvoir cliquer sur le département au lieu d'utiliser la liste déroulante.

L'un n'empêche pas l'autre, il faut simplement le prévoir.

Citation:

je me retrouve à présent face au problème pour relier mon choix du département et de la ville.

Il faut que tu enchaines dans ta fonction eventSelect avec une recherche/filtre dans ta table tbl_ville.

Cela pourrait se traduire par, voir commentaires dans le code :

Code:

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
/*
 * Quand on change un select
 * @param oEvent    Objet event toujours passé
 **/
function eventSelect(oEvent) {
  if (this.id == "region") {
    if (this.value == "") {
      // --- choisir --- 
      oMap.innerHTML = "";
      oMap.appendChild(sSvgFrance)
    }
    else {
      loadMap(this.value);
    }
    setSelect()
  }
  else if (this.id == "departement") {
    console.log("departement", this.value);
    // ici il faut lire les données
    // et renseigner les villes concernées
    const numDep = this.value;
    const searchKey = "department_code";
    // retourne les éléments répondant à la condition
    const dataVilles = tbl_villes.filter((obj) => {
      return obj[searchKey] === numDep;
    });
    // mise à jour du select
    const oSelect = document.getElementById("ville");
    // vide le select
    oSelect.options.length = 0;
    // ajoute toutes les données
    dataVilles.forEach((el) => {
      const oOption = new Option(el.name);
      oSelect.appendChild(oOption);
    })
    // désactive si aucune donnée disponible
    oSelect.disabled = dataVilles.length ? false : true;
  }
  else if (this.id == "ville") {
    // action future
  }
} //fct

Cela devrait te permettre d'avancer ;)

Suite à l'étude de votre méthode, je pense avoir tout compris les commentaires ont par ailleurs été très utile.

Ainsi, j'ai essayé en vain de faire fonctionner le choix du département au clic pour provoquer le remplissage du select destiné au choix de la ville.

Néanmoins, je sais ou effectuer le changement mais je ne sais pas comment remplir le select "ville" en fonction du département.

Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function setSelect() { let aOptions = [], sSelectId = ""; if (oMap.querySelector("#svg4668")) { sSelectId = "region"; oMap.querySelectorAll("a").forEach((oEl) => { let sId = oEl.querySelector("path").id; aOptions.push([oEl.getAttribute("xlink:title"), sId]); }) setOption(document.forms.liste.region, aOptions); } else if (oMap.querySelector("#departements")) { sSelectId = "departement"; oMap.querySelectorAll("path").forEach((oEl) => { let sId = oEl.id; aOptions.push([oEl.getAttribute("data-nom") + ' (' + sId + ') ', oEl.id]); // Je ne devrais pas faire un deuxième selectID destiné à ville ici ? Ainsi j'effectuerais le filtrage et j'utiliserais aOptions.push(oEl.getAttribute("name"); }) setOption(document.forms.liste.departement, aOptions); } resetSelect(sSelectId); }
J’espérais que vous pourriez m'aider sur ce point pour que je puisse enfin faire avancer le reste de mon programme ;) .

Citation:

Néanmoins, je sais ou effectuer le changement mais je ne sais pas comment remplir le select "ville" en fonction du département.

Je présume que tu parles d'action directe sur la carte, car sur le changement via le <select> c'est pris en compte par la fonction eventSelect.

Dans ce cas tu peux tirer avantage de la fonction eventSelect en l'appelant depuis ta fonction eventMap, il existe une méthode qui permet de le faire cela simplement : Function.prototype.apply().

Dans ce cas ta fonction devient
Code:

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 /* * Quand on clique sur la Map * @param oEvent Objet event toujours passé **/ function eventMap(oEvent) { const oPath = oEvent.target; const oSvg = this.firstElementChild; if (this.querySelector("#svg4668")) { // affiche la map correspondante loadMap(oPath.id); // récup. le select des régions const oSelect = document.getElementById("region"); // affectation de la valeur en cours oSelect.value = oPath.id; // application de la méthode eventSelect à l'élément selectDépartements eventSelect.apply(document.forms.liste.region); } else if (this.querySelector("#departements")) { // récup. le select des départments const oSelect = document.getElementById("departement"); // affectation de la valeur en cours oSelect.value = oPath.id; // application de la méthode eventSelect à l'élémment selectDepartement eventSelect.apply(oSelect); } } //fct

16/04/2020, 15h38
JeanPPPP

Merci ! :D

Je vous avoue que je n'ai pas tout compris, mais je vais à présent étudier tout cela pour bien assimiler toutes ces nouvelles notions.