Bonjour,

Je rencontre un problème auquel je fais face depuis plusieurs heures maintenant. Je suis bloqué.

J'ai crée une carte leaflet, les données proviennent d'un fichier geoJSON.

J'utilise le plugin markerCluster pour regrouper les marqueurs ayant les mêmes coordonées.

Les données concernent des établissements donc les marqueurs dans chaque cluster ont une majorité de données en commun : nom, adresse tel etc..

Seules quelques informations diffèrent.

Voici le code pour mes clusters :

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
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
var promise = $.getJSON("examen.json");
/*cluster for the first map */
var clusters = L.markerClusterGroup({
    spiderfyOnMaxZoom: false,
    showCoverageOnHover: false,
    zoomToBoundsOnClick: true
});
/* special cluster click action with associated html. I'm targetting the markers inside the selected cluster. */
clusters.on('clusterclick', function (a) {
    if (a.layer._zoom == 18) {
        var html = '';
        for (feat in a.layer._markers) {
            if (a.layer._markers[feat].feature.properties['Professeur']) {
                html += '<p class="prof">' + a.layer._markers[feat].feature.properties['Professeur'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Professeur2']) {
                html += '<p class="prof2">' + a.layer._markers[feat].feature.properties['Professeur2'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Chu']) {
                html += '<p class="chu">' + a.layer._markers[feat].feature.properties['Chu'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Laboratoire']) {
                html += '<p class="labo">' + a.layer._markers[feat].feature.properties['Laboratoire'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Prelevement']) {
                html += '<p>' + a.layer._markers[feat].feature.properties['Prelevement'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Envoi']) {
                html += '<p>' + a.layer._markers[feat].feature.properties['Envoi'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Adresse']) {
                html += '<p class="adress">' + a.layer._markers[feat].feature.properties['Adresse'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Cp']) {
                html += '<p class="cp">' + a.layer._markers[feat].feature.properties['Cp'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Tel']) {
                html += '<p class="tel">' + a.layer._markers[feat].feature.properties['Tel'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Fax']) {
                html += '<p class="fax">' + a.layer._markers[feat].feature.properties['Fax'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Mail']) {
                html += '<p class="mail"><a href="mailto:' + a.layer._markers[feat].feature.properties['Mail'] + '">' + a.layer._markers[feat].feature.properties['Mail'] + '</a></p>';
            }
            if (a.layer._markers[feat].feature.properties['Tel2']) {
                html += '<p class="tel">' + a.layer._markers[feat].feature.properties['Tel2'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Fax2']) {
                html += '<p class="fax">' + a.layer._markers[feat].feature.properties['Fax2'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Mail2']) {
                html += '<p class="mail"><a href="mailto:' + a.layer._markers[feat].feature.properties['Mail2'] + '">' + a.layer._markers[feat].feature.properties['Mail2'] + '</a></p>';
            }
            if (a.layer._markers[feat].feature.properties['Renseignement']) {
                html += '<p class="rt">' + a.layer._markers[feat].feature.properties['Renseignement'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Url']) {
                html += '<p class="url"><a href="' + a.layer._markers[feat].feature.properties['Url'] + '">' + a.layer._markers[feat].feature.properties['Url'] + '</a></p>';
            }
            html += '<div class="pictos">';
            if (a.layer._markers[feat].feature.properties['Examen']) {
                html += '<span class="' + a.layer._markers[feat].feature.properties['Examen'] + '">' + a.layer._markers[feat].feature.properties['Examen'] + '</span>';
            }
            html += '</div>';
        }
        $('#layer_infos .fill').html(html);
    }
})
Je récupère toutes mes données (les "feature.properties" de mon fichier geoJSON) et je les insère une par une dans un bloc html. J'affiche ensuite ce bloc dans une div dynamique à droite de la carte.

Si j'ai par exemple 5 marqueurs dans le cluster, cela va m'afficher 5 blocs html à la suite dans ma div. Il y aura donc redondance du nom, adresse etc..

Ce que je cherche à obtenir : un seul bloc html, contenant une seule fois les infos redondantes (une seule fois le nom, l'adresse etc) et en dessous afficher dans le même bloc les infos qui changent.

La plupart du code trouvé notamment sur stackoverflow donne des pistes pour "supprimer les doublons" d'un tableau lorsque la clé est équivalente.

Moi je cherche plutôt à n'afficher qu'une fois les doublons, en me basant sur les valeurs des clés (properties.val())

Mais je bloque, et j'ai grandement besoin d'aide pour terminer ce projet !

Merci à tous ceux qui voudront bien m'aiguiller !!