Zoom automatique en cliquant sur un lien externe

**Yaneck** · 03/03/2020, 23h31

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

**NoSmoking** · 06/03/2020, 09h45

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

**Yaneck** · 06/03/2020, 22h33

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

**NoSmoking** · 10/03/2020, 11h57

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 :

↪ Leaflet : l’objet GeoJSON
↪ le format GeoJSON

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

**Yaneck** · 11/03/2020, 19h43

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

Zoom automatique en cliquant sur un lien externe [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager