Ignorer la navigation

Mini-projet

Objectifs

Carte ↔ Coordonnées

L'objectif du mini projet est de créer une page web permettant:

  • de positionner la carte Open Street Map à partir de coordonnées GPS entrées dans un formulaire,
  • d'afficher les coordonnées GPS du centre de la carte lorsque que l'utilisateur la déplace.

site

Librairie Leaflet

La librairie Leaflet permet d'insérer une carte Open Street Map dans une page web.

Ouvrir la page d'exemple et recopier son code source dans un fichier personnel.

  • Modifier les coordonnées afin d'afficher le lycée par défaut.
  • Ajouter un formulaire contenant 2 éléments de type input et un bouton.

form

  • Utiliser parseFloat afin de convertir les coordonnées entrées en nombre à virgule.
  • Utiliser la méthode flyTo et un objet LatLng afin de déplacer la carte sur les coordonnées entrées par l'utilisateur.
  • Utiliser la méthode marker pour ajouter un marqueur sur la carte.

marker

Pour afficher les coordonnées lors d'un déplacement manuel de la carte:

  • Utiliser l'événement moveend pour détecter la fin du déplacement,

  • Récupérer et afficher dans un élément de type paragraphe les coordonnées du centre de la carte,

  • Afficher les coordonnées dans un paragraphe.