Si vous ne l'avez pas encore lu, je vous invite à découvrir l'article de Jordan, tout ce qui compose HERE et en fait un outil indispensable (en tous cas chez TPZ!).
Le but de cet article est double : vous mettre à disposition un module codé par mes petites mimines et vous illustrer la rapidité et la puissance de mise en œuvre de Vue.js hors d'un contexte préposé à cette technologie (car oui, ce module pourra être intégré dans n'importe quel site ! ) et encore une fois, l'utilité d'HERE sur la récupération de coordonnées.
Aperçu
Le module n'est rien d'autre qu'une liste de choix de ville avec l'information sur son code postal, un outil d'auto-complétion classique mais qui permet de valider le ville sélectionnée grâce à son code postal car il existe des homonymes sur les villes françaises (CF Saint-Sauveur)
Voici ce que permet d'obtenir le module : Cliquez ici !
Décomposition
Pour commencer, le module est composé d'un champ 'input' text standard pour renseigner la ville recherchée avec 2 évènements Vue qui sont 'bindés' : le keyup & le keydown qui permettent comme leurs noms l'indique de détecter lorsque qu'une touche de votre clavier est pressée afin d'appeler la fonction 'onKeypressCity'.
Sur ce champ également, vous remarquerez un data binding sur la valeur du champ via l'instanciation d'un model vue : v-model="inputCity" qui va nous permettre côté Vue de récupérer la valeur du champ très rapidement.
Notez ici, que j'aurais pu utiliser les watcheurs VueJS sur le model inputCity afin de remplacer les évènements keyup & keydown mais j'ai décidé de ne pas l'intégrer pour éviter une boucle infinie, si vous vouliez par exemple attribuer la valeur de la sélection à votre champ.
Évidemment, les fonctions nommées précédemment et les variables doivent être déclarées. Ainsi que la logique dans le fichier JS qui instancie Vue (new Vue())
On retrouve dans ce fichier les datas nommées comme notre modèle. Ou encore la liste des suggestions et leurs valeurs par défaut.
De plus, on trouve la fonction la plus intéressante 'onKeypressCity' qui permet l'auto-complétion en faisant un appel à l'API Geocoder HERE. Cela nous permet de récupérer un certain nombre d'informations (ça ne se limite pas à la ville & code postal) : latitude, longitude, adresse, etc ...
Comme précisé plus haut, à chaque pression sur une touche de votre clavier elle se déclenche.
D'ailleurs l'API HERE permet de trouver des adresses complètes notamment pour des livraisons, etc ..
Pour rappel, HERE possède un plan d'utilisation gratuit jusqu'à 200.000 requêtes par mois. Ce qui n'est pas négligeable en comparaison avec Google Maps.
Vous trouverez toutes les informations ici : API Geocoder HERE
A noter : Il vous faudra alimenter les variables here_id & here_code avec vos identifiants HERE pour que les suggestions apparaissent !
Mise à disposition
Bien sûr ! Le code est à votre disposition : Télécharger le module
Et voici d'autres ressources :
- https://developer.here.com/blog/street-address-validation-with-reactjs-and-here-geocoder-autocomplete
- https://vuejs.org/
- https://developer.here.com/documentation/geocoder-autocomplete/dev_guide/topics/quick-start-get-suggestions.html
Si vous l'utilisez tel quel sur un de vos sites ou/et que vous l'alimentez de quelques façons, n'hésitez pas à nous en faire part dans les commentaires ;)
