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
etv-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
- empêchez l’action par défaut (
Ensuite :
- enlevez les marqueurs avant d’en ajouter de nouveaux
- utilisez un
L.featureGroup
et sa méthodeclearLayers()
(ou directement unL.GeoJSON
qui hérite deL.featureGroup
)
- utilisez un
- adaptez l’emprise de la carte à l’emprise des données affichées (
monFeatureGroup.getBounds()
,map.fitBounds(bounds)
)