Leaflet - Utilisation avancé

Découvrer comment créer interfaces utilisateurs, les marqueur personnalisé et plain d'autre choses sur vos cartes Leaflet

a marqué ce sujet comme résolu.

Tout le monde se secoue ! :D

J’ai commencé (samedi 06 novembre 2021 à 17h13) la rédaction d’un tutoriel au doux nom de « Leaflet - Utilisation avancé » et j’ai pour objectif de proposer en validation un texte aux petits oignons. Je fais donc appel à votre bonté sans limites pour dénicher le moindre pépin, que ce soit à propos du fond ou de la forme. Vous pourrez consulter la bêta à votre guise à l’adresse suivante :

Merci !

Je pense que le contenu est proche de la version finale avec bien sur des modifications selon vos retours que ce soit sur la forme et sur le fond.

Si vous penser qu’un point supplémentaire serait intéressant à aborder, c’est possible que je rajoute de nouvelles parties.

J’hésite aussi à ajouter un exo finale mais je me demande si c’est une bonne idée, je suis preneur de votre vis la dessus.

+1 -0

Hey @shevek,

Merci pour ce chouette tutoriel. Je ne connais absolument pas Leaflet mais j’ai pu facilement suivre ton tutoriel. Tes exemples sont simples à suivre et bien illustrés. Il y a quelques phrases un peu longues qui pourraient gagner à être plus aérées en utilisant un peu plus de ponctuation ou en les séparant en plusieurs phrases plus courtes.

Ci-dessous, un retour plus détaillé.


Sur la forme:

Titre

Utilisation avancé

avancée

Intro

il est dédié aux personnes connaissant déjà la bibliothèque pour ceux qui ne la connaissent pas

Il faudrait un point après "bibliothèque".

je vous conseille d’abort de suivre le tutoriel d’Eskimon .

d’abord

et à ajouter des tooltip

tooltips

Création d’une interface personnalisée

je vous conseille d’abort de suivre le tutoriel d’Eskimon .

d’abord

on va étendre la classe L

Je ne connais pas le terme à utiliser mais étendre me semble bizarre. Je comprends que tu essaies de traduire extend mais il y a sans doute un terme plus adapté en français.

Notre interface est maintenant créée mais rien ne change à l’écran car elle est vide, pour afficher quelque chose il va falloir créer du contenu dans notre méthode onAdd, celle-ci st automatiquement appelé lorsque l’on exécute le addTo(map).

Un point après "vide" serait utile. Aussi, "st" devrait être "est" et "appelé" devrait être "appelée". Personnellement, j’enlèverais aussi le "le" devant addTo(map) mais c’est un détail et sans doute une question de préférence.

Sur la première ligne on créer une nouvelle div html avec la méthode L.DomUtil.create qui prend pour premier paramètre le type d’élément HTML (div, img, button, ..) et en deuxième les classes dans notre exemple on a la classe leaflet-bar qui est un classe standard de leaflet et my-control qui est notre classe personnalisée qui va nous permettre de définir notre design.

Cette phrase est trop longue et difficile à suivre, en particulier la partie que j’ai mis en gras. Un peu plus de ponctuation pourrait aider. Aussi, "un classe" devrait être "une classe".

où sera placé notre interface

placée

à l’element parent,

élément

de l’élément div créer précédemment.

créé

Ça nous donne : var myButton = L.DomUtil.create(’button’, 'myButtonClass’, div); on ajoute ensuite du contenu HTML à notre bouton comme ceci : myButton.innerHTML = 'Mon button’;

Cette partie pourrait être supprimée et remplacée par des commentaires dans le code donné juste en dessous. Mais c’est une histoire de préférences.

Ajouter une icone

icône

Nous allons ajouter l’image ci-dessus à notre bouton, pour cela copiez-la dans un sous-dossier appelé img, puis on ajoute notre image au bouton comme ceci :

Tu passes de "nous allons" à "copiez-la" pour revenir à "on ajoute". Il faudra être plus cohérent et toujours utiliser "nous" ou "vous" mais pas mélanger les deux.

Gérer les fonds de plans

Qu’est qu'un fond de plan

Qu’est-ce qu’un fond de plan

il y en existe plusieurs types

il en existe. Le y n’est pas nécessaire.

Ajouter de marqueurs

Leaflet met à disposition plusieurs manières de créer des marqueurs :

Il ne faut pas d’espace devant :

Mais aussi de nombreux plugins permettant de créer d’autres types des marqueurs.

d’autres types de marqueurs

Afficher un marqueur avec une icone personnalisé

icône

Pour créer des marqueurs avec des images personnalisé

personnalisées

nous allons utilisé

utiliser

des icônes personnalisés.

personnalisées

sur laquelle on définie

définit (à corriger à plusieurs endroits sur cette page)

décalage de la l’icône

de l’icône

si vous le souhaité

souhaitez

Il y existe également

y n’est pas nécessaire

Ajouter de tooltips

un nom de lieux, un évènement ou d’autres infos.

un nom de lieu

On ajoute le contenu a afficher dans le tooltip :

à

Modifié les options de notre toolitp

Modifier

La première façon de paramétrer notre tooltip est de modifier ces paramètres.

ses. Aussi, cette phrase est bizarre. Je dirais plutôt contrôler ou personnaliser ou quelque chose dans ce style plutôt que paramétrer.

Pour modifier le css on peut ajouter une classe (on remet également la transparence à 1)

Bon, je suis pénible mais techniquement, mettre la transparence à 1 ne rendrait pas notre tooltip transparent ? Ce qu’on met à 1, c’est l’opacité, pas la transparence.

Ensuite on peut déterminé

déterminer

la couleur de text et de fond

texte

Dans le contenu du tooltip, on peut également écrire du code HTML afin personnalisé notre tooltip.

de personnaliser

Cette partie sur les tooltip est terminée, au cas vous voudriez afficher des tooltips sur des positions proches mais que ne se chevauches pas ce plugin pourra vous être utile.

au cas où. chevauchent. pourrait.

Conclusion

mais il y en existe plein d’autres notamment

Le "y" est de trop.

J’espère que cela vous aidez dans vos projets et que cela donnera lieu à de superbes cartes.

J’imagine que tu veux dire "cela vous aidera". Ou "cela pourra vous aider". Bref, autre chose que ceci :)


Sur le fond:

Dans Créer une interface, tu parles de my-control mais ce n’est pas clair de quoi il s’agit. J’ai peut-être loupé ça mais je ne le vois définis nulle part avant d’être utilisé dans le DomUtil.create(...). Après, je connais pas Leaflet donc peut-être que c’est évident si on connait les bases.

La partie sur les fonds de plan pourrait aller plus dans les détails. Par exemple, je vois que les URLs ont des genres de paramètres ({s}, {x}, …). Que signifient-ils? Après, si je comprends bien, pour utiliser un fond de plan, tu peux simplement aller sur leaflet-extras et tu peux copier-coller ce qu’on te fournit donc peut-être que ce genre de détails ne sont pas utiles à connaître.

Dans la partie sur les tooltips, tu dis

Pour créer un tooltip on utilise L.tooltip avec comme paramètres les options de création

Mais dans le code juste en dessous, on ne fournit aucun paramètre (L.tooltip({});). Est-ce normal ?

Dans la partie "Modifié les options de notre toolitp ", je pense que tu pourrais traduire le tableau plutôt que de faire une capture de la documentation officielle en anglais.


+1 -0

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci Migwel pour tes retour j’ai apporter des corrections sur l’orthographe et les différents points soulevés, sauf sur la partie des fond de plans ou la description des ({s}, {x}, …) c’est des chose liée au fonctionnement des système de fond de plan que je maîtrise pas et à moins de créer son propre fond de plan se n’est intéressant d’aller plus loin.

+0 -0

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l’adresse suivante :

Merci d’avance pour vos commentaires.

J’ai ajouté une nouvelle partie concernant le filtrage des données et j’ai également corrigé quelques éléments pour essayé de rendre l’ensemble du tuto plus attrayant.

Je laisse quelques semaine en béta afin d’avoir quelques retour pour m’aidez à l’améliorer un peut avant de l’envoyer à la validation.

+0 -0
Ce sujet est verrouillé.