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