IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Zoom automatique en cliquant sur un lien externe [LeafLet]


Sujet :

Bibliothèques & Frameworks

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Amateur
    Inscrit en
    mars 2020
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Somme (Picardie)

    Informations professionnelles :
    Activité : Amateur

    Informations forums :
    Inscription : mars 2020
    Messages : 9
    Points : 9
    Points
    9
    Par défaut Zoom automatique en cliquant sur un lien externe
    Bonsoir, voilà je suis actuellement en train de réaliser un site sur les rallyes automobile du Nord de la France. J'utilise LeafLet pour la partie qui affiche les parcours des épreuves. Malheureusement, après pas mal de recherche, je n'arrive pas à trouver une solution à mon (mes) problèmes. Je précise que je n'y connais rien, tout ce que j'ai réaliser, c'est grâce à quelques tutos et en copiant des codes que j'ai pu trouver sur internet... Je précise aussi que mon site fonctionne, tout est OK, ce que je cherche à faire, ce sont des "petits" détails qui vont plus servir à le rendre plus jolie (ou sympa), rien de bien méchants, enfin je pense ^^

    Alors premier point: sur la map il y a des marker et des polyline. Chaque marker à un popup différent qui s'affiche avec un mouseover (nom de la spéciale, km,etc...) là nikel, aucuns problèmes. Ce que j'aimerais c'est qu'au passage de la souri, il y ai également un changement de couleur d'une polyline (une seul, que chaque marker ai sa "propre" polyline qui change) j'ai essayer pas mal de code ou autre, mais rien à part une page blanche.

    voilà une partie du 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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    var RallyeIcon = L.Icon.extend({
    options: {iconSize: [30, 30]}
    });
    var regroupementIcon = new RallyeIcon({iconUrl: 'regroupement.png'}),
    assistanceIcon = new RallyeIcon({iconUrl: 'assistance.png'}),
    es0105Icon = new RallyeIcon({iconUrl: 'es0105.png', iconSize: [100, 28]}),
    es0206Icon = new RallyeIcon({iconUrl: 'es0206.png', iconSize: [100, 28]}),
    departIcon = new RallyeIcon({iconUrl: 'depart.png'}),
    arriveeIcon = new RallyeIcon({iconUrl: 'arrivee.png'});
    L.marker([50.686749, 2.883112], {icon: regroupementIcon}).bindPopup("<b>Podium / Regroupement | Armentières</b>").on('mouseover', function (e) { this.openPopup(); }).on('mouseout', function (e) { this.closePopup(); }).addTo(map);
    L.marker([50.712184, 3.000821], {icon: assistanceIcon}).bindPopup("<b>Assistance | Quesnoy sur Deûle</b>").on('mouseover', function (e) { this.openPopup(); }).on('mouseout', function (e) { this.closePopup(); }).addTo(map);
    L.marker([50.734337, 2.993946], {icon: es0105Icon}).bindPopup("<b>ES 1 - 5 | Deûlémont | 10.38 Km</b>").on('mouseover', function (e) { this.openPopup(); }).on('mouseout', function (e) { this.closePopup(); }).addTo(map);
    L.marker([50.760160, 3.066001], {icon: es0206Icon}).bindPopup("<b>ES 2 - 6 | Bousbecque | 4.45 Km</b>").on('mouseover', function (e) { this.openPopup(); }).on('mouseout', function (e) { this.closePopup(); }).addTo(map);
    L.marker([50.726970, 2.974120], {icon: departIcon}).addTo(map);
    L.marker([50.738800, 2.977170], {icon: arriveeIcon}).addTo(map);
    L.marker([50.767340, 3.061350], {icon: departIcon}).addTo(map);
    L.marker([50.747980, 3.061950], {icon: arriveeIcon}).addTo(map);
    var regroupement1 = L.polygon([[50.686375, 2.882068], [50.686398, 2.882384], [50.686439, 2.882804], [50.686479, 2.882971], [50.686859, 2.884148], [50.686932, 2.884123], [50.686935, 2.882799], [50.687139, 2.881964], [50.687133, 2.881729]],{
    color: 'green',
    fillColor: '#49C42E',
    weight:5,
    fillOpacity: 0.5
    }).addTo(map);
    var assistance1 = L.polygon([[50.712455, 3.000654], [50.712214, 3.001369], [50.711846, 3.001074], [50.712098, 3.000289]],{
    color: 'green',
    fillColor: '#49C42E',
    weight: 5,
    fillOpacity: 0.5
    }).addTo(map);
    var special1 = L.polyline ([[50.726970000, 2.974120000], [50.727520000, 2.974660000], [50.728940000, 2.976250000], [50.729380000, 2.976630000], [50.729670000, 2.976850000], [50.729950000, 2.976910000], [50.730390000, 2.977110000], [50.730600000, 2.977160000], [50.730870000, 2.977140000], [50.731090000, 2.977070000], [50.731250000, 2.977200000], [50.731430000, 2.977400000], [50.731720000, 2.977780000], [50.731890000, 2.978100000], [50.731950000, 2.978340000], [50.732030000, 2.978790000], [50.732260000, 2.979940000], [50.732300000, 2.980390000], [50.732510000, 2.981700000], [50.732850000, 2.983580000], [50.732990000, 2.984200000], [50.733840000, 2.986990000], [50.734370000, 2.988410000], [50.733770000, 2.989020000], [50.733770000, 2.989020000], [50.733050000, 2.989760000], [50.732530000, 2.990240000], [50.730290000, 2.992050000], [50.730100000, 2.991530000], [50.729910000, 2.991300000], [50.727770000, 2.989490000], [50.727400000, 2.989200000], [50.726770000, 2.988400000], [50.725760000, 2.987430000], [50.725640000, 2.986690000], [50.724390000, 2.985830000], [50.722350000, 2.984340000], [50.721950000, 2.984940000], [50.721950000, 2.984940000], [50.721760000, 2.985210000], [50.721380000, 2.985660000], [50.722130000, 2.986370000], [50.723140000, 2.987180000], [50.723240000, 2.987330000], [50.723240000, 2.987460000], [50.723150000, 2.987830000], [50.723190000, 2.987930000], [50.723330000, 2.988110000], [50.723870000, 2.988640000], [50.724050000, 2.988880000], [50.724630000, 2.989780000], [50.725060000, 2.990550000], [50.725590000, 2.991670000], [50.726140000, 2.993150000], [50.726600000, 2.994130000], [50.727430000, 2.996110000], [50.728180000, 2.997290000], [50.728640000, 2.997930000], [50.728860000, 2.998170000], [50.729010000, 2.998130000], [50.729370000, 2.997740000], [50.729620000, 2.997590000], [50.729920000, 2.997340000], [50.729920000, 2.997340000], [50.731220000, 2.996260000], [50.731640000, 2.995860000], [50.732490000, 2.998260000], [50.733380000, 3.000680000], [50.733760000, 3.001830000], [50.733830000, 3.002010000], [50.733850000, 3.002160000], [50.734060000, 3.002580000], [50.735090000, 3.004450000], [50.735560000, 3.005210000], [50.736000000, 3.005800000], [50.736130000, 3.005900000], [50.736210000, 3.005670000], [50.736550000, 3.004750000], [50.736770000, 3.004240000], [50.736770000, 3.004240000], [50.738540000, 3.000140000], [50.739190000, 2.998690000], [50.740680000, 2.995860000], [50.741090000, 2.995230000], [50.741370000, 2.994880000], [50.741590000, 2.994740000], [50.742040000, 2.994270000], [50.743570000, 2.992240000], [50.744660000, 2.990820000], [50.744910000, 2.990530000], [50.744910000, 2.990530000], [50.745360000, 2.989990000], [50.746370000, 2.988640000], [50.747500000, 2.987000000], [50.746650000, 2.985290000], [50.746570000, 2.985290000], [50.744510000, 2.987260000], [50.743880000, 2.987920000], [50.743320000, 2.988740000], [50.743030000, 2.989000000], [50.743030000, 2.989000000], [50.741120000, 2.990730000], [50.740530000, 2.991210000], [50.740390000, 2.991290000], [50.740220000, 2.991330000], [50.740080000, 2.991430000], [50.739600000, 2.992070000], [50.738850000, 2.992800000], [50.738320000, 2.993380000], [50.737900000, 2.994090000], [50.737800000, 2.994320000], [50.737380000, 2.993630000], [50.737340000, 2.993430000], [50.737420000, 2.992040000], [50.737330000, 2.991140000], [50.737330000, 2.991140000], [50.737170000, 2.989080000], [50.737620000, 2.988070000], [50.738300000, 2.986750000], [50.738340000, 2.986630000], [50.738320000, 2.986530000], [50.738170000, 2.986210000], [50.738140000, 2.986050000], [50.738390000, 2.983080000], [50.738430000, 2.982970000], [50.738360000, 2.982850000], [50.737990000, 2.982050000], [50.737790000, 2.981440000], [50.737370000, 2.979890000], [50.737410000, 2.979840000], [50.737550000, 2.979610000], [50.737970000, 2.978530000], [50.738080000, 2.978280000], [50.738370000, 2.977820000], [50.738370000, 2.977820000], [50.738800000, 2.977170000]],{
    color: 'red',
    weight: 5
    }).addTo(map);
    var special2 = L.polyline ([[50.767340000, 3.061350000], [50.767320000, 3.061310000], [50.767240000, 3.061300000], [50.766840000, 3.061440000], [50.766660000, 3.061470000], [50.766010000, 3.061700000], [50.765670000, 3.061930000], [50.765320000, 3.062280000], [50.765070000, 3.062400000], [50.765020000, 3.062270000], [50.764930000, 3.062210000], [50.764820000, 3.062220000], [50.764650000, 3.062350000], [50.764190000, 3.062910000], [50.764060000, 3.063000000], [50.764010000, 3.062950000], [50.763250000, 3.061300000], [50.763040000, 3.060960000], [50.762920000, 3.060810000], [50.762920000, 3.060810000], [50.762810000, 3.060670000], [50.762540000, 3.060410000], [50.762200000, 3.060160000], [50.761250000, 3.059090000], [50.761050000, 3.059480000], [50.760730000, 3.060180000], [50.760730000, 3.060180000], [50.760370000, 3.061000000], [50.760730000, 3.061470000], [50.760840000, 3.061700000], [50.760950000, 3.062050000], [50.761180000, 3.063050000], [50.761280000, 3.063330000], [50.761950000, 3.064730000], [50.762030000, 3.064940000], [50.762060000, 3.065140000], [50.762080000, 3.065360000], [50.762130000, 3.065510000], [50.762490000, 3.066260000], [50.762690000, 3.066610000], [50.762770000, 3.066730000], [50.762770000, 3.066730000], [50.762940000, 3.066950000], [50.763330000, 3.067590000], [50.763550000, 3.068110000], [50.763780000, 3.068430000], [50.763970000, 3.068840000], [50.764180000, 3.069540000], [50.764390000, 3.069850000], [50.764510000, 3.070380000], [50.764650000, 3.070800000], [50.764770000, 3.071110000], [50.764850000, 3.071380000], [50.765030000, 3.072470000], [50.765050000, 3.072940000], [50.765280000, 3.073970000], [50.765260000, 3.074140000], [50.765210000, 3.074270000], [50.765020000, 3.074440000], [50.764920000, 3.074560000], [50.764850000, 3.074820000], [50.764850000, 3.074820000], [50.764810000, 3.074970000], [50.764700000, 3.075270000], [50.764440000, 3.074980000], [50.764080000, 3.074410000], [50.763760000, 3.074160000], [50.763540000, 3.073940000], [50.763400000, 3.073740000], [50.763310000, 3.073510000], [50.763160000, 3.072840000], [50.763040000, 3.072500000], [50.762890000, 3.072240000], [50.762670000, 3.071990000], [50.762440000, 3.071770000], [50.761920000, 3.071340000], [50.761660000, 3.071210000], [50.761340000, 3.071110000], [50.761070000, 3.070980000], [50.760280000, 3.070480000], [50.760280000, 3.070480000], [50.759470000, 3.069980000], [50.759240000, 3.069760000], [50.758560000, 3.068710000], [50.758390000, 3.068490000], [50.758220000, 3.068330000], [50.757880000, 3.068190000], [50.757600000, 3.067730000], [50.757450000, 3.067550000], [50.757210000, 3.067420000], [50.756980000, 3.067440000], [50.756990000, 3.067420000], [50.756990000, 3.067420000], [50.756340000, 3.067930000], [50.755380000, 3.068600000], [50.754700000, 3.069000000], [50.754180000, 3.069380000], [50.753940000, 3.068890000], [50.753640000, 3.068160000], [50.753470000, 3.067420000], [50.753270000, 3.066850000], [50.752920000, 3.066170000], [50.752920000, 3.066170000], [50.752430000, 3.065060000], [50.752230000, 3.064690000], [50.752070000, 3.064510000], [50.751880000, 3.064520000], [50.751330000, 3.065170000], [50.751210000, 3.065260000], [50.750470000, 3.065260000], [50.749750000, 3.064950000], [50.749460000, 3.064760000], [50.749460000, 3.064760000], [50.749150000, 3.064560000], [50.748800000, 3.064170000], [50.748230000, 3.062780000], [50.748130000, 3.062280000], [50.747980000, 3.061950000]],{
    color: 'red',
    weight: 5
    }).addTo(map);
    let group = new L.featureGroup([regroupement1, special2]);
    map.fitBounds(group.getBounds());
    et un lien sur mon site, histoire d'avoir une idée de ce que je demande http://www.rallyearchive.fr/index.ph...ns_Geants_2000

    Merci d'avance !!!

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 779
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 779
    Points : 40 083
    Points
    40 083
    Par défaut
    Bonjour et bienvenue sur DVP.

    Ton approche est bonne, à savoir regrouper tes différents éléments, mais tu n'as pas été assez loin dans la réalisation.

    Voilà ce que tu pourrais faire, en fonction de ce que tu nous as fourni

    • Création d'un groupe par étape
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    // création d'un groupe par étape
    const groupeEtape1 = L.featureGroup();
    const groupeEtape2 = L.featureGroup();
    • Création et ajout des markers au « groupe étape » correspondant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    L.marker([50.734337, 2.993946], {
      icon: es0105Icon
    }).bindPopup("<b>ES 1 - 5 | Deûlémont | 10.38 Km</b>").on('mouseover', function (e) {
      this.openPopup();
    }).addTo(groupeEtape1);
    L.marker([50.726970, 2.974120], {
      icon: departIcon
    }).addTo(groupeEtape1);
    L.marker([50.738800, 2.977170], {
      icon: arriveeIcon
    }).addTo(groupeEtape1);
    ...idem pour étape #2
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    L.marker([50.760160, 3.066001], {
      icon: es0206Icon
    }).bindPopup("<b>ES 2 - 6 | Bousbecque | 4.45 Km</b>").on('mouseover', function (e) {
      this.openPopup();
    }).addTo(groupeEtape2);
    L.marker([50.767340, 3.061350], {
      icon: departIcon
    }).addTo(groupeEtape2);
    L.marker([50.747980, 3.061950], {
      icon: arriveeIcon
    }).addTo(groupeEtape2);
    • Définition du trajet des étapes et ajout au « groupe étape » correspondant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const special1 = L.polyline([
        [50.726970000, 2.974120000],
        [50.727520000, 2.974660000],
        // la suite 
        [50.738370000, 2.977820000],
        [50.738800000, 2.977170000]
    ], {
        "color": "red",
        "weight": 5
    }).addTo(groupeEtape1);
    .. idem pour le trajet étape #2
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const special2 = L.polyline([
        [50.767340000, 3.061350000],
        [50.767320000, 3.061310000],
        // la suite 
        [50.748130000, 3.062280000],
        [50.747980000, 3.061950000]
    ], {
        "color": "blue",
        "weight": 5
    }).addTo(groupeEtape2);
    • Maintenant il faut définir les fonctions de modification des styles au survol, cela pourrait donner quelque chose comme
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // sauve et change le style sur le mouseOver
    function layerOver(layer) {
      layer.saveOptions = L.extend({}, layer.options);
      layer.setStyle({
        "color": "#080",
        "weight": 10,
        "opacity": .8
      })
    };
    // restaure le style sur le mouseOut
    function layerOut(layer) {
      layer.setStyle(layer.saveOptions);
    };
    ... il faut bien sûr que ces fonctions soient appelées, on pourrait passer par des fonctions que l'on utilisera plus loin
    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
    // action sur le mouseOver
    function handleMouseOver(e) {
      const group = e.target;
      group.eachLayer(function (layer) {
        // change le style si réalisable
        if ("setStyle" in layer) {
          layerOver(layer);
        }
      });
    }
    // action sur le mouseOut
    function handleMouseOut(e) {
      const group = e.target;
      group.eachLayer(function (layer) {
        // ferme la popup si existe
        layer.closePopup();
        // restaure le style si réalisable
        if ("setStyle" in layer) {
          layerOut(layer);
        }
      });
    }
    ... il suffit d'affecter ces fonctions sur les événements mouseover/out des « groupes étape »

    • Définition des actions sur événements
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // définition actions sur mouse over/out
    // et ajout du groupe à la carte
    groupeEtape1
      .on("mouseover", handleMouseOver)
      .on("mouseout", handleMouseOut)
      .addTo(map);
     
    groupeEtape2
      .on("mouseover", handleMouseOver)
      .on("mouseout", handleMouseOut)
      .addTo(map);
    • Tout ceci est fortement factorisable mais le principe est là !

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Amateur
    Inscrit en
    mars 2020
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Somme (Picardie)

    Informations professionnelles :
    Activité : Amateur

    Informations forums :
    Inscription : mars 2020
    Messages : 9
    Points : 9
    Points
    9
    Par défaut
    Wouhaou !!! Alors là merci !!! J'aurais été incapable de trouver tout ça... Ça marche nikel !!! Je me permet également de vous demander si il était possible également d'ajouter un contour à la nouvelle couleur de la polyline, pareil j'ai essayer plusieur code ( border, stroke,full,etc..) mais aucun changement... J'ai du rater un truc...

    Du coup j'en arrive à mon deuxième problème. Alors comme vous pouvez le voir sur le lien de mon site, il y a un tableau sur la gauche de la map, avec les nom des polyline. Quand on clic dessus, la carte zoom automatiquement sur la polyline, là aucuns problèmes. Ce que j'aimerais c'est avoir une manip du code plus simple. Actuellement j'inscris des coordonnées et un niveau de zoom, un peut chiant car je doit essayer et visualiser à chaque fois pour bien centrer la polyline et régler le bon niveau du zoom. Du coup, est-il possible, dans le code, de lui demander de centrer et zoomer sur une polyline directement ? ET en bonus que cette même polyline change aussi de couleur automatiquement, dès que l'on clic sur le lien.

    voilà mon code actuel html:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <td style="background-color: rgb(204, 204, 204);"><a href="" data-zoom="13" data-position="50.620281, 2.781515">ES
    9-13 | Pays de l'Alloeu | 10.87 Km</a></td>

    et mon js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    document.querySelector(".map-navigation").onclick = function(abc) {
    var pos = abc.target.getAttribute("data-position");
    var zoom = abc.target.getAttribute("data-zoom");
    if (pos && zoom) {
    var locat = pos.split(",");
    var zoo = parseInt(zoom);
    map.setView(locat, zoo, {animation: true});
    return false;
    Une nouvelle fois merci d'avance et encore un énorme merci pour le code plus haut, cela fait des mois (voir plus) que je cherchais !!!

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 779
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 779
    Points : 40 083
    Points
    40 083
    Par défaut
    Point #1
    Je me permet également de vous demander si il était possible également d'ajouter un contour à la nouvelle couleur de la polyline, pareil j'ai essayer plusieur code ( border, stroke,full,etc..) mais aucun changement... J'ai du rater un truc...
    Nativement on a stroke pour dessiner le contour d'une forme SVG et fill pour définir la couleur de remplissage de la forme, pour l'élément <path>, qui n’est rien d’autre qu’une ligne, on peut simuler un contour en superposant deux <path>, le normal et un plus large positionné en dessous dans le DOM.
    Pour réaliser cela il n’est pas une solution mais des solutions, je t’en donne une qui ajoute directement des méthodes à l’objet L.Path grâce au prototypage.
    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
    /**
     * @class L.Path
     * Ajout méthode addHighlight
     */
    L.Path.prototype.addHighlight = function (classCSS) {
      // applcation class CSS par défaut
      classCSS = classCSS || "path-shadow-class";
      if (!this.clonePath) {
        // récup. élément <path>
        const elem = this.getElement();
        this.clonePath = elem.cloneNode();
        // insert juste avant dans le DOM
        elem.parentNode.insertBefore(this.clonePath, elem);
      }
      L.DomUtil.addClass(this.clonePath, classCSS);
      return this;
    };
    /**
     * @class L.Path
     * Ajout méthode removeHighlight
     */
    L.Path.prototype.removeHighlight = function () {
      if (this.clonePath) {
        L.DomUtil.remove(this.clonePath);
        this.clonePath = null;
      }
      return this;
    };
    En gardant les fonctions précédentes, layerOver et layerOut, celles-ci se résument maintenant à
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // sauve et change le style sur le mouseOver
    function layerOver(layer) {
      const path = layer.getElement();
      layer.addHighlight();
      L.DomUtil.addClass(path, "path-over-class");
    }
    // restaure le style sur le mouseOut
    function layerOut(layer) {
      const path = layer.getElement();
      layer.removeHighlight();
      L.DomUtil.removeClass(path, "path-over-class");
    }
    Attention toutefois au changement d’approche, ici on travaille en ajoutant-enlevant une classe CSS à l’élément SVG directement, il faut donc préalablement les définir ces classes dans le CSS, les noms étant fixés en dur dans le code. Le passage par des classes CSS autorise des d’effets d’animation et/ou de transmission.

    J’ai bien précisé que c’était une des façons de faire.

    Exemple de CSS
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     .path-over-class {
      stroke-width: 8px;
      stroke: green;
      opacity: .8;
    }
    .path-shadow-class {
      stroke-width: 20px;   /* ép. contour = (20-8)/2 */
      stroke: green;
      opacity: .5;
    }
    L’utilisation des ces méthodes est à voir dans la deuxième partie.

    Encore une fois tout ceci pourrait-être optimisé mais ... et j’en profite pour rappeler qu’une bonne définition des besoins au départ permet de mieux appréhender l’approche que l’on aura pour résoudre un problème et ce afin de pour ne pas avoir à en changer en cours de route.

    Point #2
    Alors comme vous pouvez le voir sur le lien de mon site, il y a un tableau sur la gauche de la map, avec les nom des polyline. Quand on clic dessus, la carte zoom automatiquement sur la polyline, là aucuns problèmes. Ce que j'aimerais c'est avoir une manip du code plus simple. Actuellement j'inscris des coordonnées et un niveau de zoom, un peut chiant car je doit essayer et visualiser à chaque fois pour bien centrer la polyline et régler le bon niveau du zoom. Du coup, est-il possible, dans le code, de lui demander de centrer et zoomer sur une polyline directement ?
    Pour ce faire il existe une méthode simple qui consiste à lier les éléments du menu à une action JavaScript en utilisant une « table de correspondance » et un attribut data-xxxx.
    Côté JavaScript on a
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    /**
     * Gestion des accès menu groupe
     */ 
    const Groupes = {
      "etape-1": groupeEtape1,
      "etape-2": groupeEtape2,
      "etape-3": groupeEtape3
    };
    Et l’on définît les actions à réaliser sur les « mouseover/out », ce sont les mêmes fonctions que celles déjà données mais plus concises
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // définition actions sur mouse over/out
    // et ajout des groupes à la carte
    groupeEtape1
      .on("mouseover mouseout", handleMouseInOut)
      .addTo(oMap);
    groupeEtape2
      .on("mouseover mouseout", handleMouseInOut)
      .addTo(oMap);
    groupeEtape3
      .on("mouseover mouseout", handleMouseInOut)
      .addTo(oMap);
    Tu pourras remarquer que l’on passe par la même fonction pour gérer le « mouseover/out », cette fonction unique étant la suivante :
    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
    /**
     * action sur le mouseInOut
     */
    function handleMouseInOut(e) {
      const action = {
        "mouseout": layerOut,
        "mouseover": layerOver
      };
      const eType = e.type;
      const fct = action[eType];
      const group = e.target;
      if (fct) {
        group.eachLayer(function (layer) {
          // ferme la popup si existe
          if ("mouseout" === eType) {
            layer.closePopup();
          }
          // sauve/restaure le style si réalisable
          if (layer.addHighlight) {
            fct(layer);
          }
        });
      }
    }
    Et côté HTML, par exemple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <ul>
      <li data-groupe="etape-1">ES 1-5 | Deûlémont (10.38 km)
      <li data-groupe="etape-2">ES 2-6 | Bousbecque (4.45 km)
      <li data-groupe="etape-3">ES 3-7 | Quesnoy sur Deûle (9.43 km)
    </ul>
    La liaison et le déclenchement des actions est à prévoir dans une fonction qui peut, dans ce cas, ressembler à :
    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
    // récup. des éléments DOM liés
    const elements = document.querySelectorAll("[data-groupe]");
    elements.forEach(function (el) {
      const lien = el.dataset.groupe;
      if (lien && Groupes[lien]) {
        const group = Groupes[lien];  
        L.DomEvent.on( el, "click", function () {
          // masque le survol
          group.fire("mouseout");
          // déplace la map
          oMap.flyToBounds(group.getBounds());
        });
        L.DomEvent.on( el, "mouseover mouseout",  function (e) {
          group.fire( e.type);
        });
      } 
    });
    Nota : dans les codes ci-dessus l’affectation des événements est réalisée via l’objet L.DomEvent que Leaflet met à disposition.

    Point #3
    ET en bonus que cette même polyline change aussi de couleur automatiquement, dès que l'on clic sur le lien.
    Cela n’as pas grand intérêt le groupe étant pleine carte, de plus j’entrevois pas mal d’effets de bord liés à la gestion des « mouseover/out ». Je ne dis pas que ce n’est pas faisable il faudrait juste gérer cela de façon plus globale, faire un « mouseout » de l’ensemble des groupes avant de faire un « mouseover » sur l’élément concerné, mais pas que ...

    Une dernière remarque quand même, lorsque tu as ce genre de données à traiter tu devrais tirer profit de l’utilisation de l’objet GeoJSON qui utilise un format bien définit et offrant une gestion du code simplifiée.

    Ressources :

    Bonus :
    La mise en application du code ci-dessus est visible sur : Leaflet, highlight L.Path

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Amateur
    Inscrit en
    mars 2020
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Somme (Picardie)

    Informations professionnelles :
    Activité : Amateur

    Informations forums :
    Inscription : mars 2020
    Messages : 9
    Points : 9
    Points
    9
    Par défaut
    Bonsoir, encore une fois MERCI !!! Cela fait plus d'un an que je cherche à réaliser ça !! Et encore une fois, sans votre aide, je n'aurais jamais réussie, beaucoup trop complexe pour moi !!

    Pour le changement de couleur au zoom, oui c'est inutile puisque avec le mouseover il y a déjà cet effet. Question bête...

    En ce qui concerne Geojson, j'y avait pensais mais sur chaque tuto que j'ai vu, c'était spécialement sur des map avec les pays ou régions, du coup je n'y ai pas pensais pour mes polyline...

    Bon j'ai un peut galérer à tout adapter et tout mettre en ordre par rapport à mon code déjà présent , et essayer de garder ma mise en page etc.., mais tout marche nikel !!! C'est génial !!

    Malheureusement (hé oui...) Quand j'importe ma page sur mon site, cela ne fonctionne pas, page blanche où il devrait y avoir la map... Je ne comprend pas car quand j'ouvre mon code sous firefox, cela marche très bien !!

    Le problème doit venir de mon site ou un bug avec le code, car avant de faire vos modification je n'avais pas ce problème. Je continue mes recherches du coup !!

    Encore merci pour tout !!!

    EDIT !!! Bon finalement ça marche, mais uniquement quand je copie mon code "source", si j'importe directement mon fichier de la page (comme à chaque fois) cela ne marche pas... Bizarre première fois que j'ai ce problème... j'essairais plus tard pour trouver une solution, mais le principal est que tout fonctionne !!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Besoin d'aide sur mouseover et mouseout
    Par jakols dans le forum jQuery
    Réponses: 6
    Dernier message: 16/12/2010, 12h56
  2. besoin d'aide pour le composant DBComboBox
    Par jane2002 dans le forum Bases de données
    Réponses: 8
    Dernier message: 28/02/2004, 20h01
  3. [CR] besoin d'aide sur les formules
    Par GuillaumeDSA dans le forum Formules
    Réponses: 4
    Dernier message: 10/07/2003, 13h19
  4. [TP]besoin d'aide pour commandes inconnues
    Par Upal dans le forum Turbo Pascal
    Réponses: 15
    Dernier message: 03/10/2002, 11h48
  5. Besoin d'aide pour l'I.A. d'un puissance 4
    Par Anonymous dans le forum C
    Réponses: 2
    Dernier message: 25/04/2002, 18h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo