Atelier / Réactions pour exercice du tuto

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 ?

Indice #2 : J'ai déplacé un marqueur, comment je le récupère dans 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).

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

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

rien à voir mais normal que je ne puisse pas aller sur le lien https://zestedesavoir.com/contenus/1365/des-cartes-sur-votre-site/ ?

erreur 403 : Vous n'avez pas les droits suffisants pour accéder à cette page.

Hello,

Effectivement je crois qu'Eskimon s'est trompé sur le lien du tuto, c'est par ici : https://zestedesavoir.com/tutoriels/1365/des-cartes-sur-votre-site/

rha my bad, c'est édité

Bonjour à tous,

Merci tout d’abord Eskimon pour ce superbe tuto. Il m’a été bien utile avec mes élèves.

Une petite question car je suis loin d’être un spécialiste en HTML et en scripts : J’ai une carte avec un marqueur. Je souhaiterais que l’action associée à ce marqueur soit le zoom sur la carte (en centrant sur le marqueur en question)…

Ma carte de base :

<script>
    var carte = L.map('macarte').setView([46.75492, 2.02148], 6);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(carte);
    
    var repere = L.marker([46.597235, -1.452709]).addTo(carte);
    repere.bindPopup('Zoom ici');   
</script>

Je voudrais, à l’action du clic sur le marker, obtenir cette carte :

<script>
    var carte = L.map('macarte').setView([46.597235, -1.452709], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(carte);
    
    var repere = L.marker([46.597235, -1.452709]).addTo(carte);   
</script>

J’ai essayé avec des function mais je ne suis arrivé à rien.

Merci à vous si vous pouviez éclairer ma lanterne.

Tibo

Bonjour Thibault. Ravi que ce tuto sorte d’ici et se propage en classe. Pour ma curiosité, tu pourrais dire ce que tu as fait avec ?

Sinon pour que ta question gagné en visibilité, je te conseille de la poser sur le forum "Développement Web" afin que d’autres puisse y participer. De mon côté, je regarderais la semaine prochaine, pas trop de temps pour le moment.

Avec la fonction on.

repere.on('click', function (e) {
    carte.setView([46.597235, -1.452709], 12)
})

Merci beaucoup EtienneR, cela fonctionne parfaitement !

Bonjour Eskimon, Pour le moment, les élèves ont juste fait une petite page ayant pour but de présenter leur commune avec un lien vers une autre page contenant une carte interactive (très basique : un marqueur sur la mairie avec la population qui s’affiche et un marqueur sur leur domicile avec les coordonnées)

Ensuite ils vont travailler sur une page que l’on doit intégrer dans le site d’un projet erasmus et ils devront faire une carte interactive de Nantes avec des points d’intérêt identifiés avec des informations qui devront s’ouvrir lorsque les marqueurs seront sélectionnés.

Voilà, on reste assez modeste, même si je ne sais pas encore comment on va faire pour générer des cadres de texte contenant les explications sur des points d’intérêt.

À plus

Tibo

Voilà, on reste assez modeste,

Certes mais quand on débute, ça envoie du lourd ! C’est chouette que tu utilises ce tuto pour tout ça.

Merci artragis, on essaye de faire des trucs assez sympas pour eux. Nous utilisons autant que nous pouvons les tutos sur le net car on y trouve tellement de tutos bien mieux faits que ce que nous pourrions nous même faire. Je trouve aussi cela formateur pour eux, par exemple, pour le zoom, ils doivent consulter ma question dans ce forum et la réponse d'EtienneR pour l’adapter à leur cas… C’est ce que l’on fait en permanence en informatique. Bref, les forums sont un super outils de formation qu’il faut qu’ils s’approprient.

En tout cas, ce forum, que je ne connaissais pas il y a peu, regorge d’infos intéressantes et de personnes prêtes à aider et ça, c’est super.

Allez, à plus