Besoin d'aide Leaflet

Bonsoir, je viens vous demander un peut d’aide. Voilà j’ai réalisé un site sur les rallyes automobile du Nord de la France. J’utilise Leaflet pour réaliser les plans des parcours. Tout fonctione très bien, aucuns problèmes. Par contre j’aimerais l’améliorer un peut, mais malheureusement je ne trouve pas de réponses, même après beaucoup de recherches… Du coup je me permet de demander un coup de main !

Alors : 1- Actuellement, la map est centrée, soit sur un marker, soit sur les polylines. Est il possible de centrer la map sur tout ? Polyline, marker, polygone etc.. ?

2- J’aimerais savoir si il était possible (dans le code) de "nomer" les polyline, polygones, etc.. Histoire que le code soit plus "pratique" pour la suite de mes questions.

3- Est il possible qu’une polyline puisse changer de couleur avec un passage de souri sur un marker ?

4- Actuellement, en cliquant sur un lien externe, la map zoom automatiquement sur une coordonnée. Serait il possible de réaliser le zoom sur une polyline en particulier (d’où le fait de la nomer) et que cette même polyline changer de couleur ?

Voilà pour l’instant, c’est déjà beaucoup !!! Je présice que je n’y connais absolument rien.. Tout ce que j’ai réalisé c’est grâce aux tutos, ou en copiant des parties de code trouvé sur le net..

petit lien pour vous faire une idée [http://www.rallyearchive.fr/index.php?file=Page&name=Plans_Geants_2000]

Un grand merci d’avance !!!

Avant tout : je te conseille chaudement, si tu ne la connais pas déjà, les tutoriels et la documentation officielle de Leaflet, qui contient tout plein d’exemples ainsi que l’ensemble des propriétés et méthodes de tous les objets de Leaflet. C’est très pratique !

Alors : 1- Actuellement, la map est centrée, soit sur un marker, soit sur les polylines. Est il possible de centrer la map sur tout ? Polyline, marker, polygone etc.. ?

Oui : les cartes de Leaflet ont des méthodes fitBounds, fitWorld ou flyToBounds qui permettent de centrer la carte sur une zone. Le plus simple, si tous les marqueurs sont dans un même groupe, est d’utiliser la bordure de ce groupe. Et si ce n’et pas le cas, il sufit d’en créer un juste pour cet usage :

let group = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(group.getBounds());

2- J’aimerais savoir si il était possible (dans le code) de "nomer" les polyline, polygones, etc.. Histoire que le code soit plus "pratique" pour la suite de mes questions.

Qu’est-ce que tu entends par là ? En soit les marqueurs (au sens large : points, lignes, polygones…) sont des objets assignés à des variables. Ces variables ont un nom .

3- Est il possible qu’une polyline puisse changer de couleur avec un passage de souri sur un marker ?

Les marqueurs courants héritent de InteractiveLayer, qui dispose d’une série d’événements, dont certains sont appelés au passage de la souris.

De là, il est possible de modifier les propriétés du marqueur, incluant sa couleur.

4- Actuellement, en cliquant sur un lien externe, la map zoom automatiquement sur une coordonnée. Serait il possible de réaliser le zoom sur une polyline en particulier (d’où le fait de la nomer) et que cette même polyline changer de couleur ?

En mélangeant les réponses plus haut, oui : il suffirait, ayant la ligne dans une variable (disont polyline parce que je ne suis pas original), de demander à la carte de se centrer sur ses limites et de changer sa couleur. Quelque chose comme ça :

map.fitBounds(polyline.getBounds());
polyline.color = '#3388ff';

Un grand merci d’avance !!!

Avec plaisir

Bonjour, merci beaucoup pour vos réponses, c’est sympa de bien vouloir m’aider !!!

Oui j’ai passé pas mal de temps sur le site de Leaflet, mais moi et l’Anglais… Bref

Alors en ce qui concerne ma première question: Oui j’ai réussie à centrer la map soit sur les marker ou soit sur les polyline. mais je voulais savoir si l’on pouvait la centrer sur tout (les marker avec les polyline et les polygone) que tout soit réunie ensemble pour le "centrage".

Ensuite pour le changement de couleur au mouseover: alors chaque marker à un mouseover avec un popup qui s’affiche. Chaque popup et différent selon le marker, là aucuns problèmes. Mais j’aimerais qu’en plus du popup, qu’une polyline différente à chaque fois change de couleur, ou de contour. Que chaque polyline ai un marker différent "attitré", d’où l’idée de les nommer dans le code, plus simple pour indiqué au marker quelle polyline en question doit changé de style.

Avec mon code actuelle, elles n’ont pas de nomination particulière, juste les coordonnées gps…

Idem pour mes liens externe qui sont sur la même page (dans un tableau à gauche de la map), Chaque lien zoom sur une polyline différente (là OK) mais j’aimerais également un changement de style. En gros comme pour les marker, que chaque liens ai leur polyline attitré. Donc une nouvelle foi plus simple je pense avec le "nom" d’une polyline.

Voilà j’espère que j’ai était plus précis, et désolé d’avance si c’est moi qui ai mal compris vos réponses.

Encore un grand merci et bonne journée !!

Mh avant tout, à quoi ressemble ton code actuellement ? Comment ajoutes-tu tes marqueurs à ta carte exactement ?

Alors en ce qui concerne ma première question: Oui j’ai réussie à centrer la map soit sur les marker ou soit sur les polyline. mais je voulais savoir si l’on pouvait la centrer sur tout (les marker avec les polyline et les polygone) que tout soit réunie ensemble pour le "centrage".

C’est ce à quoi j’ai répondu Si tu as tes marqueurs dans des variables, disons marker, polyline, polygone, tu peux en faire un groupe :

let group = new L.featureGroup([marker, polyline, polygone]);

…puis demander à Leaflet de centrer la carte sur la bordure de ce groupe :

map.fitBounds(group.getBounds());

Si tu as une liste de marqueurs tu peux aussi l’adapter à ce cas en créant directement le groupe à partir de cette liste ; par exemple avec une liste dans une variable markers :

let group = new L.featureGroup(markers);

Ensuite pour le changement de couleur au mouseover: alors chaque marker à un mouseover avec un popup qui s’affiche. Chaque popup et différent selon le marker, là aucuns problèmes. Mais j’aimerais qu’en plus du popup, qu’une polyline différente à chaque fois change de couleur, ou de contour. Que chaque polyline ai un marker différent "attitré", d’où l’idée de les nommer dans le code, plus simple pour indiqué au marker quelle polyline en question doit changé de style.

La réponse que j’ai donnée devrait couvrir ce cas. Mais pour répondre plus précisément, il faudrait voir à quoi ressemble le code actuellement Je soupçonne que les marqueurs ne sont pas dans des variables à part, ce qui ne facilite pas le travail.

Idem pour mes liens externe qui sont sur la même page (dans un tableau à gauche de la map), Chaque lien zoom sur une polyline différente (là OK) mais j’aimerais également un changement de style. En gros comme pour les marker, que chaque liens ai leur polyline attitré. Donc une nouvelle foi plus simple je pense avec le "nom" d’une polyline.

Pareil ici !

Bonsoir, oui désolé si je ne met pas le code…

Alors pour la partie "map"

var Marker = L.Icon.extend({

options: {iconSize: [30, 30]} });

var regroupementIcon = new Marker({iconUrl: 'regroupement.png’}),

assistanceIcon = new Marker({iconUrl: 'assistance.png’}),

es0105Icon = new Marker({iconUrl: 'es0105.png’, iconSize: [100, 28]}),

plus la liste de tout mes marker

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.726970, 2.974120], {icon: departIcon}).addTo(map);

L.marker([50.738800, 2.977170], {icon: arriveeIcon}).addTo(map);

J’ai effacé la suite pour ne pas prendre trop de place du le forum, mais c’est identique

var latlngs =

toutes mes coordonnées GPS, j’ai aussi éffacé cette partie pour ne pas prendre trop de place…

var polyline = L.polyline(latlngs, {color: 'red’, weight: 5,}).addTo(map); map.fitBounds(polyline.getBounds());

Et pour la partie "lien externe" dans mon tableau à gauche de la map :

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

Pareil la suite est identique, pas la peine de tout mettre, juste les points GPS et le nom change

Vous pouvez aussi voir mon code en entier en cliquant sur le liens je j’ai mis dans mon premier message, il me semble qu’avec firefox un peut le consulter.

Encore désolé et merci !!

Je t’invite à insérer ton code via le bouton </> de la barre d’outils la prochaine fois, c’est bien plus lisible ! Je le remet pour toi aujourd’hui.

var Marker = L.Icon.extend({options: {iconSize: [30, 30]}});
var regroupementIcon = new Marker({iconUrl: 'regroupement.png'}),

assistanceIcon = new Marker({iconUrl: 'assistance.png'}),
es0105Icon = new Marker({iconUrl: 'es0105.png', iconSize: [100, 28]}),

// plus la liste de tout mes marker

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.726970, 2.974120], {icon: departIcon}).addTo(map);
L.marker([50.738800, 2.977170], {icon: arriveeIcon}).addTo(map);

// J’ai effacé la suite pour ne pas prendre trop de place du le forum, mais c’est identique

var latlngs = // toutes mes coordonnées GPS, j’ai aussi éffacé cette partie pour ne pas prendre trop de place…

var polyline = L.polyline(latlngs, {color: 'red', weight: 5,}).addTo(map); map.fitBounds(polyline.getBounds());

Du coup, une solution pour rendre ce que je propose possible c’est de stocker tous les marqueurs dans une variable, comme ceci :

// Bien sûr changer les noms si je les ait mal déduits

let regroupmentMarker = 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);
let assistanceMarker = 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);

// etc.

Et alors il est possible de faire référence à ces marqueurs pour les modifier suite à des événements quelconques :

marker.color = '#3388ff';  // par exemple

Et de zoomer dessus :

let group = new L.featureGroup([regroupmentMarker, assistanceMarker, /* les autres… */]);
map.fitBounds(group.getBounds());

Etc. (Pour le détail se référer à mes messages précédents ou à la doc de Leaflet.)

OK merci ! Oui désolé je n’ai pas trouvé la "manip" pour afficher le code et que ce soit plus lisible… Je vais refaire mon code correctement, j’ai trouvé quelques "pistes" ce week-end, je continue mes recherches !!

Encore merci