Aller au contenu

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))