Home » Programmation Web » Langages Web » Cercle dynamique dans Leaflet

Cercle dynamique dans Leaflet

Créer un cercle dynamique dans Leaflet
Marker & circle in Leaflet

Aujourd’hui, je continue ma lancée dans le partage de code, mais avec une petite différence. Le code d’aujourd’hui ne contiendra pas de PHP, mais du JavaScript.

Vous pouvez retrouver ce code sur codepen, sous le titre Dynamical circle in leaflet.

Comme vous pouvez le voir dans cette exemple codepen, j’ai fait en sorte de relier deux champs d’un formulaire avec une forme géométrique d’une carte Leaflet (un cercle, dans mon exemple).

Il faut prendre en compte que ces 2 mêmes champs sont aussi relié entre eux. Si l’un des deux change, le deuxième change à la volée. Ils sont limité tous les 2 entre les valeurs 0 et 100.
Le cercle se modifiant en direct, dès que la valeur des champs input change.

J’ai fait en sorte que le code soit le plus simple possible. On peu le faire évoluer rapidement et facilement.

Les dépendances CSS/JS de ce code sont : Bootstrap (3 ou 4), Jquery 3.5, et Leaflet 1.7.1
Il est possible de s’abstraire de Bootstrap et Jquery, en faisant quelques modifications dans le HTML et le Javascript.
Par contre, il est obligatoire d’utiliser les dépendances CSS et JS de Leaflet, pour la carte.

Qu’en pensez-vous ?

Posté dans Langages Web, Programmation Web

2 commentairess pour “Cercle dynamique dans Leaflet

  • Bonjour,
    CERCLE DYNAMIQUE DANS LEAFLET. Parfait.
    Mais est-ce que vous n’avez jamais penser à travailler dans Umap où il est impossible de tracer un cercle – et pourtant il y a beaucoup de demandes. En plus, pour une solution exhaustive sur ce sujet, pouvoir « transformer » un cercle en ellipse !
    Bonne journée.

    S. Callait

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.