Exercices Géolocalisation + AJAX

Exercice - Service Web Base Adresse

On souhaite réaliser un formulaire qui permette à l’utilisateur de taper une adresse et de voir les points sur une carte.

Cet exercice se réalise à la suite de l’exercice Première carte + Géolocalisation

• ajoutez une <div id="entete"> en haut de page et utilisez CSS Grid pour afficher l’entête au dessus de la carte (entête de 100px de haut, la carte prends l’espace restant)
• dans l’entête, ajoutez un formulaire avec un champ de recherche et un bouton de validation (vous pouvez styler un peu avec des composants Bootstrap)
• instanciez une nouvelle application Vue
• lors de la validation du formulaire (évènement @submit)
  • empêchez l’action par défaut (@submit.prevent)
  • récupérez la valeur saisie par l’utilisateur (utilisez une propriété dans data et v-model)
  • interrogez l’API de géocodage de la BAN (Base Adresse Nationale): https://data.geopf.fr/geocodage/search?q=<recherche> (via AJAX, en mode GET, variable q dans l’URL), le retour est au format GeoJSON
  • positionnez les marqueurs correspondants aux résultats sur la carte (couche L.GeoJSON)
  • documentation complète de l'API

Ensuite :

• enlevez les marqueurs avant d’en ajouter de nouveaux. Pour cela:
  • créez la couche L.GeoJSON vide au chargement de la page
  • ajoutez des données avec sa méthode addData(donnees)
  • videz la couche à chaque fois avec sa méthode clearLayers()
• adaptez l’emprise de la carte à l’emprise des données affichées (maCouche.getBounds(), map.fitBounds(bounds))