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