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 d’adresse.data.gouv.fr: http://api-adresse.data.gouv.fr/search/?q= (via AJAX, en mode GET, variables contenues dans l’URL), le retour est au format GeoJSON
  • positionnez les marqueurs correspondants aux résultats sur la carte

Ensuite :

• enlevez les marqueurs avant d’en ajouter de nouveaux
  • utilisez un L.featureGroup et sa méthode clearLayers() (ou directement un L.GeoJSON qui hérite de L.featureGroup)
• adaptez l’emprise de la carte à l’emprise des données affichées (monFeatureGroup.getBounds(), map.fitBounds(bounds))