Discussion :

[NoSmoking]

Je partage un petit outil, simple d’utilisation, réalisé à l'occasion de la sortie du confinement lié au COVID-19.

Rappel :

A partir du 11 mai 2020 il est donc possible de sortir librement dans la rue sans attestation et ce dans la limite de 100 km autour de sa résidence.

Cette limitation est déterminée, non pas par la distance parcourue, mais par la distance « à vol d’oiseau ».

Aperçu du rendu :

Pour info :

Le code utilise la bibliothèque Leaflet.

100 kilomètres à pied, ça use, ça use, 100 kilomètres à pied, ça use les souliers .

Important : Aucune donnée n'est enregistrée ou transmise, « on est pas des quand même ! »

Voir en ligne :

100km around

[Doksuri]

j'ai du regarder le code pour trouver comment bouger la position

instinctivement, le double click/tap c'est pour zoomer, pas deplacer un pin

ps : t'as 2 fois
// c'est parti
LCarte.main();

[NoSmoking]

Merci pour tes retours.

j'ai du regarder le code pour trouver comment bouger la position

Je suis surpris que tu n'ai pas eu la curiosité, avant d'aller voir le code, de cliquer sur l'icône info dans la barre en haut à droite.
Il y a matière à dire concernant l'ergonomie sur les cartes mais unanimement concernant le déplacement d'un marqueur il faut cliquer sur celui-ci pour voir si il est déplaçable ou non.

instinctivement, le double click/tap c'est pour zoomer, pas deplacer un pin

Concernant le zoom/dé-zooom d'une carte les méthodes sur PC et smartphone, double clic, mousewhell, pincement/étirement au contact ou autre icônes dédiées, sont nombreuses.
Si l'on veut ajouter rapidement un marqueur sur la carte, traditionnellement clic droit puis contexte menu ne fonctionne pas sur smartphone donc, l'utilisation/détournement du double clic est un pis-aller d'autant que des icônes de recentrage et de repositionnement sont présentent dans la barre supérieure.

ps : t'as 2 fois
// c'est parti
LCarte.main();

Tout à fait une incomplète sélection avant la recopie du code finalisé, c'est corrigé

---

• Je rajoute ici les infos complémentaires une fois le premier affichage réalisé :

	Double cliquez sur la carte pour afficher le cercle à une autre position ; Déplacez le marker pour afficher le cercle à une autre position ; Cliquez sur l'icône pour recenter la carte sur le marker ; Cliquez sur l'icône pour mettre à jour la position du marker.

[Doksuri]

Je suis surpris que tu n'ai pas eu la curiosité, avant d'aller voir le code, de cliquer sur l'icône info dans la barre en haut à droite.

j'ai honte.. je pensais que c'etait un bouton d'information sur le site, pour dire "j'utilise leaflet, blabla", je ne pensais pas que ca faisait office de bouton "d'aide", du coup, j'ai pas clique

[NoSmoking]

Suite à la nouvelle situation sanitaire liée à la COVID-19, j’ai mis à jour l’outil pour prendre également en compte une distance à vol d’oiseau de 1 km.

Les deux distances sont désormais sélectionnables, les autres fonctionnalités restent les mêmes.

Aperçu du nouveau rendu :

Nouvelle version en ligne :

1-100km around

Préservez-vous bien !

[Stellar7]

Bonjour !

Je pense qu'il faudrait aussi ajouter les "20 km", d'après ce qui a été dit hier. Voire même, soyons fou, un petit input pour préciser le nombre de kilomètres… (promis, je ne demande rien d'autre).

Encore bravo pour ce programme !

[NoSmoking]

Je pense qu'il faudrait aussi ajouter les "20 km", d'après ce qui a été dit hier.

Tout à fait, c'était prévu et maintenant fait

un petit input pour préciser le nombre de kilomètres…

Pourquoi pas ...

Encore bravo pour ce programme !

Mise à jour :

À compter du 28 novembre et jusqu'au 15 décembre 2020, les déplacements seront autorisés dans un rayon de 20 km autour de chez soi et dans une limite de 3 heures. L'attestation reste obligatoire.

Aperçu du nouveau rendu :

Version en ligne :

1-20-100km around

Sportez et préservez-vous bien !

[mathieu]

puisqu'on a droit de proposer des fonctionnalités, je me lance

ça serait bien de passer les paramètres dans l'URL comme ça il suffirait de le mettre dans le marque page pour accéder directement à la carte :
1-20-100km.html?lat=40.25&lon=3.21&d=20

si ça peut te faire gagner du temps, voilà ce que j'utilise pour lire les paramètres

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
let GET = new URLSearchParams(location.search);
let latitude = GET.get("lat");

[Doksuri]

ou alors un cursor min = 1Km, max 100km

[NoSmoking]

ça serait bien de passer les paramètres dans l'URL comme ça il suffirait de le mettre dans le marque page pour accéder directement à la carte :
1-20-100km.html?lat=40.25&lon=3.21&r=20

Cela avait été initialement envisagé, mais non retenu, donc la modification est faite et disponible, de plus le rayon, et non le diamètre, si nouveau, est ajouté au <select>.

• Lien pour test : https://nosmoking.developpez.com/dem...=5.5335&r=2.75

si ça peut te faire gagner du temps,

Merci mais cela devait être compatible IE11.

ou alors un cursor min = 1Km, max 100km

Tu as un budget pour cela , non je plaisante, de plus on s’éloigne de l’objectif initial, un truc simple et rapide mais l’idée reste intéressante et peut-être qu’à l’occasion je me pencherais dessus.


[Edit] mise à jour du lien pour test.

[NoSmoking]

Bon aller finalement ...
... ajout d'un curseur et d'un « permanent link »

Nouvelle barre d'entête :

Info utilisation :

Version en ligne :

1 à 100km around