Atelier / Réactions pour exercice du tuto

Et qu'sa zeste !

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Je viens de faire un nouveau tuto, je vous propose ici de poser vos questions/idées/etc sur l'exercice de fin du tuto ! https://zestedesavoir.com/tutoriels/1365/des-cartes-sur-votre-site/

Pour ce petit exercice, on se propose de faire un calculateur de distances. Ce calculateur devra être en mesure d'afficher la distance entre deux marqueurs et de tracer un joli segment entre les deux. Chaque marqueur doit pouvoir être déplacé et lorsque le déplacement se termine, une popup doit apparaître sur le marqueur déplacé pour afficher la distance entre les deux.

Pour avoir un aperçu du résultat, rendez vous ci-dessous dans la rubrique correction.

Indices

Il y a pas mal de choses que l'on a pas vu encore, mais tout est dit dans la documentation en allant chercher les bons mots-clés.

Indice #1 : Comment calculer une distance ?

En allant voir la méthode distanceTo

Indice #2 : J'ai déplacé un marqueur, comment je le récupère dans l’événement ?

Les fonctions qui réceptionnent les événements possèdent un argument (que l'on note souvent e). Ce dernier possède un champ target qui est l'objet déclencheur de l’événement.

Correction

Avant de regarder le code, essayez quand même par vous-même ;)

Amélioration

Pour les plus courageux d’entre vous, voici quelques idées d'améliorations pour faire un calculateur de distance du tonnerre !

  1. Première amélioration, réussir à placer plusieurs marqueurs lors d'un clic. À chaque clic, un marqueur se rajoute et le chemin s'étend jusqu'à ce nouveau marqueur. On affiche alors la distance totale sur ce nouveau marqueur (somme de tout les tronçons). Bien entendu la distance doit se recalculer lors du déplacement d'un marqueur.

  2. Ensuite, il serait sympa d'afficher une popup par dessus les marqueurs, pour avoir les distances intermédiaires (en gros le point A n'affiche rien, le B affiche la distance de [AB], le C affiche [AB]+[BC] puis le D affiche la somme de tout, [AB]+[BC]+[CD]). Comme je suis sympa, je vous laisse choisir entre afficher les distances intermédiaires soit au clic sur le marqueur, soit à son survol.

  3. Enfin, petit comble du confort, un double clic sur un point le supprime (et comme on veut une belle application, les distances doivent se recalculer proprement et le dessin du chemin aussi).

Bon courage !

Édité par Eskimon

ZdS, le best du Zeste ! Tuto Arduino, blog, etc

+4 -0

Hello,

Déjà félicitation Eskimon pour ton tuto, très clair et simple, ça m'a permis de me replonger un peu dans leaflet. Je l'avais déjà utilisé mais seulement pour de l'affichage.

Au passage si vous aimez un peu la carto, n'hésitez pas a contribuer à OSM dans votre région, il y a toujours plein de petits détails a corriger que seuls des gens qui connaissent les lieux peuvent savoir.

Du coup je me suis mis au taf sur l'exercice de fin de tuto et c’était plutôt cool. J'en ai profité pour ajouter un module d'export du tracé en format gpx, format utilisé par la plupart des GPS de randonnée et les logiciels de traçage. (la spec est par ici pour ceux que ça intéresserait : http://www.topografix.com/gpx.asp)

Je vous partage mon résultat final : https://luuka.github.io/zds-leaflet-workshop/

et le code source est par ici : https://github.com/Luuka/zds-leaflet-workshop

Voila, j’espère voir d'autre participations pour pouvoir comparer les approches.

have fun :)

Dev' web en alternance | LP CRSPM Laval

+2 -0
Auteur du sujet

Bien joué luuka :) Avec une sidebar stylisée comme il faut, bel exemple ! (bon, j'avoue, je n'ai pas testé l'export GPX)

EDIT: (Et je viens de regarder le code, c'est du joli travail de ce côté là aussi !)

Édité par Eskimon

ZdS, le best du Zeste ! Tuto Arduino, blog, etc

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte