3 exemples de formulaires de remplissage automatique d’adresse

Les entreprises utilisent souvent des formulaires pour collecter des informations sur leurs clients. L’information la plus importante est souvent l’adresse. Les entreprises qui expédient des marchandises ou des brochures aux utilisateurs ont évidemment besoin d’une adresse de livraison précise. Il existe de nombreuses autres entreprises (comme les banques) qui exigent également que les utilisateurs fournissent leurs adresses à des fins réglementaires et pour diverses autres raisons.

La difficulté de collecter des adresses d’utilisateurs vérifiées

Nous avons établi que les adresses sont nécessaires et parfois un élément essentiel d’un modèle commercial. Malgré leur importance, de nombreuses entreprises ont des difficultés à collecter et à vérifier les adresses.

La collecte d’une adresse vérifiée peut être difficile pour plusieurs raisons. Par exemple, il peut y avoir de nouvelles adresses qui n’ont pas encore été ajoutées aux bases de données de géolocalisation. En outre, il peut y avoir plusieurs rues ou villes avec le même.

Les webmasters utilisent souvent un champ personnalisé qui fait correspondre l’entrée de l’utilisateur avec des adresses vérifiées. C’est une façon de vérifier l’adresse d’un utilisateur. Le problème est que ces champs de saisie ne sont pas flexibles. Les nouvelles adresses ne sont parfois pas ajoutées à la base de données, les utilisateurs ne peuvent donc pas les sélectionner.

Vous pouvez résoudre ce problème en permettant aux utilisateurs de sélectionner une adresse, même si elle n’est pas vérifiée. Et vérifiez l’adresse plus tard pour vous assurer qu’elle est correcte.

Nous allons vous montrer comment !

Présentation de 3 formulaires de collecte d’adresses

Dans cet article, nous passerons en revue trois façons simples pour les utilisateurs de fournir leurs adresses de manière conviviale. Nous utilisons la bibliothèque @geoapify/geocoder-autocomplete dans nos extraits de code. Cette bibliothèque vous permet de développer gratuitement des formulaires de saisie semi-automatique à l’aide du service de saisie semi-automatique de Geoapify.

1. Sélectionnez une adresse et spécifiez l’emplacement en plaçant un marqueur sur une carte – JSFiddle

Il y a constamment de nouvelles routes et unités en cours de développement qui ne sont pas ajoutées aux bases de données de géolocalisation. Il n’y a pas de référence concrète à ces lieux.

Une excellente solution consiste à laisser les utilisateurs sélectionner leur emplacement sur une carte afin d’obtenir les coordonnées exactes de l’adresse. Laissez les utilisateurs sélectionner leur emplacement sur la carte pour capturer leur emplacement.

Vous pouvez intégrer l’entrée d’adresse semi-automatique à une carte et utiliser la géolocalisation inversée pour permettre aux utilisateurs de cliquer sur n’importe quel point de la carte pour sélectionner un emplacement :

Voici une description étape par étape de la mise en œuvre de cette fonctionnalité à l’aide de code JavaScript :

Créer un champ de saisie avec la fonctionnalité de saisie semi-automatique

Inutile de dire que les éléments HTML, par défaut, n’ont pas de fonctionnalité de saisie semi-automatique.

Geoapify fournit une interface de saisie semi-automatique qui vous permet de créer un champ de saisie avec une fonctionnalité de saisie semi-automatique d’adresse.

Nous créons simplement une variable et utilisons autocomplete.GeocoderAutocomplete() constructeur pour créer un champ de saisie « intelligent ». Il prend trois paramètres :

Dans notre démonstration en direct JSFiddle, le code ressemble à ceci :

<div id="autocomplete" class="autocomplete-container"></div>

const autocompleteInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("autocomplete"),
  myAPIKey, {
    lang: 'en',
    allowNonVerifiedHouseNumber: true,
    allowNonVerifiedStreet: true,
    skipDetails: true
  });

Maintenant que nous avons créé un champ de saisie avec saisie semi-automatique d’adresse, nous devons spécifier ce qui se passe lorsque l’utilisateur sélectionne une adresse dans le champ :

autocompleteInput.on('select', (location) => {
  selectLocation(location);
});

function selectLocation(location) {
  console.log(location);
  // later - show the location on the map
}

Créer une carte cliquable et un marqueur pour sélectionner un point sur la carte

Nous utilisons la bibliothèque de cartes Leaflet pour cet exemple de code. Créons une carte :

<div id="address-map" class="map-container"></div>

// Create a Leaflet map
const map = L.map('address-map').setView([50, 10], 5);

// Retina displays require different mat tiles quality
const isRetina = L.Browser.retina;

// you can use differrent map style from https://apidocs.geoapify.com/docs/maps/map-tiles/
const baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}";
const retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}";

// add Geoapify attribution
map.attributionControl.setPrefix('Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a>')

// Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
L.tileLayer(isRetina ? retinaUrl : baseUrl, {
  attribution: '<a href="https://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors',
  apiKey: myAPIKey,
  maxZoom: 20,
  id: 'osm-bright',
}).addTo(map);

Lorsque les utilisateurs sélectionnent une adresse, le gestionnaire d’événements appelle le sélectionnez l’emplacement() fonction avec un argument – l’emplacement sélectionné par l’utilisateur. Mettons à jour son code pour afficher un emplacement sur la carte :

let selectedLocation;
let locationNeedToBeClarified;
let suggestedLocation;
let locationMarker;

function selectLocation(location) {
  cleanUp();

  // check selected location here
  selectedLocation = location;

  if (location) {
    locationNeedToBeClarified = (location.properties.nonVerifiedParts && location.properties.nonVerifiedParts.length) || !location.properties.housenumber;
  }

  zoomMap();
  showLocationMarker();
}

function cleanUp() {
  if (locationMarker) {
    locationMarker.remove();
    locationMarker = null;
  }

  locationNeedToBeClarified = false;
  suggestedLocation = false;
}

function zoomMap(location) {
  if (selectedLocation) {
    let zoom = selectedLocation.properties.street ? 17 : 12;
    zoom = Math.max(map.getZoom(), zoom);
    map.flyTo([selectedLocation.properties.lat, selectedLocation.properties.lon], zoom, {
      duration: 0.1
    })
  }
}

// add a marker with icon generated by Geoapify Marker Icon API
// https://apidocs.geoapify.com/playground/icon/
const markerWarningIcon = L.icon({
  iconUrl: `https://api.geoapify.com/v1/icon/?type=awesome&color=%23ffd14e&size=large&icon=question&noWhiteCircle&scaleFactor=2&apiKey=${myAPIKey}`,
  iconSize: [38, 56], // size of the icon
  iconAnchor: [18, 51], // point of the icon which will correspond to marker's location
  popupAnchor: [0, -57] // point from which the popup should open relative to the iconAnchor
});

const markerOkIcon = L.icon({
  iconUrl: `https://api.geoapify.com/v1/icon/?type=awesome&color=%2330e970&size=large&icon=check&noWhiteCircle&scaleFactor=2&apiKey=${myAPIKey}`,
  iconSize: [38, 56], // size of the icon
  iconAnchor: [18, 51], // point of the icon which will correspond to marker's location
  popupAnchor: [0, -57] // point from which the popup should open relative to the iconAnchor
});

function showLocationMarker() {
  if (!selectedLocation) return;

  locationMarker = L.marker([selectedLocation.properties.lat, selectedLocation.properties.lon], {
    icon: locationNeedToBeClarified ? markerWarningIcon : markerOkIcon,
    draggable: locationNeedToBeClarified
  }).addTo(map);

  if (locationNeedToBeClarified) {
    // You can also use a tap event with a timeout for touch devices - https://stackoverflow.com/a/56427428
    locationMarker.on('dragend', (event) => {
      getAddressByLatLon(locationMarker.getLatLng().lat, locationMarker.getLatLng().lng).then(address => {
        suggestedLocation = address;
        updateAddressInfo();
      });
    })
  }
}

Tout d’abord, il appelle le nettoyer() fonction pour réinitialiser la carte et les résultats précédents.

Ensuite, il vérifie si l’emplacement est une valeur réelle (pas null, 0, chaîne vide ou autres valeurs ‘fausses’) et définit la valeur de emplacementNeedToBeClarified variable au résultat de la condition suivante :

locationNeedToBeClarified = (location.properties.nonVerifiedParts && location.properties.nonVerifiedParts.length) || !location.properties.housenumber;

Donc, si l’utilisateur sélectionne un emplacement qui a Pièces non vérifiéeset il y a au moins une partie non vérifiée, emplacementNeedToBeClarified sera fixé à vrai. Ou s’il manque une valeur de numéro de maison à l’emplacement, emplacementNeedToBeClarified sera fixé à vrai.

Ensuite, le sélectionnez l’emplacement() la fonction appelle le zoomCarte() fonction pour zoomer plus près de l’adresse sélectionnée par l’utilisateur.
Il appelle également le showLocationMarker() fonction, qui examine la valeur de emplacementNeedToBeClarified et affiche un marqueur jaune si l’emplacement doit être clarifié, et un marqueur vert si la sélection initiale de l’utilisateur est bonne.

Lorsque l’emplacement doit être clarifié, nous rendons le marqueur déplaçable et ajoutons le gestionnaire d’événements « dragend » pour mettre à jour l’emplacement :

locationMarker.on('dragend', (event) => {
  getAddressByLatLon(locationMarker.getLatLng().lat, locationMarker.getLatLng().lng).then(address => {
    suggestedLocation = address;
  });
})

Nous appelons le getAddressByLatLon() fonction, qui utilise l’API Reverse Geocoding pour renvoyer l’adresse pour les coordonnées de latitude/longitude :

function getAddressByLatLon(lat, lon) {
  return fetch(`https://api.geoapify.com/v1/geocode/reverse?lat=${lat}&lon=${lon}&apiKey=${myAPIKey}`).then(result => result.json()).then(result => {
    if (result && result.features && result.features.length) {
      return result.features[0];
    }

    return null;
  });
}

Si vous assistez à une démonstration en direct, vous verrez que les utilisateurs peuvent sélectionner une adresse simplement en cliquant sur la carte.
Pour ce faire, nous définissons le gestionnaire d’événements pour les événements de clic sur la carte :

map.on('click', (event) => {
  if (!selectedLocation || locationNeedToBeClarified) {
    getAddressByLatLon(event.latlng.lat, event.latlng.lng).then(location => {
      if (selectedLocation) {
        if (locationMarker) {
          locationMarker.setLatLng(event.latlng);
        }
        suggestedLocation = location;
        updateAddressInfo();
      } else {
      	if (location) {
        	autocompleteInput.setValue(location.properties.formatted);
        	selectLocation(location);
        }
      }
    });
  }
});

Cliquer sur une carte sélectionnera un emplacement tant que l’emplacement n’est pas déjà sélectionné…