Localisation et cartes

Dernière édition : Juin 2020

Lors de la saisie d’une annonce, on peut activer la localisation et

  • l’utilisateur est alors invité à géolocaliser son adresse (ou détectée automatiquement par une fonctionnalité native de son Navigateur)
  • l'adresse saisie est vérifiée via des services web (Google Map API ou OpenStreetmap API) pour compléter cette localisation avec des informations supplémentaires comme la région, le pays, les coordonnées GPS, …

Ainsi, le script est compatible avec tous les pays du monde sans avoir à renseigner des tables statiques (en base de donnée) de villes/département/pays comme le font certains sites.

La localisation par coordonnées GPS permet aussi d’afficher toutes les annonces sur une carte dynamiques (comme AirBnB) ou permettre de trier par distance entre les visiteurs et les annonceurs ou encore restreindre les annonces à des département, pays ou regions.

Google MAP API ou OpenStreetMap ?

Google Map API présente des services de localisation très aboutis (Streetview, localisation mondiale, radidité et fiabilité de l'API…). Depuis fin Novembre 2018, l'usage de l'API est payante au dela d’un certain quota d’usage.

ZADS supporte nativement Google MAP API mais aussi propose une alternative OpenSource gratuite appelée OpenStreetMap : Il s’agit d’un projet international fondé en 2004 dans le but de créer une carte libre du monde. En plus de fournir des cartes, open source, de nombreuses API permettent de rendre leur utilisation très proche de Google Maps, ce qui en fait une alternative très crédible. ZADS utilise une librairie javascript très connue pour interagir avec les serveurs OpenStreetMap qui s’appelle Leaflet

Localisation d’une annonce

Lors de la saisie d’une annonce, l’usager est invité (ou obligé suivant le paramétrage) à saisir une adresse sous forme texte ou des coordonnées GPS.

Il peut aussi se localiser sur un carte (placer un marqueur pour placer correctement l’adresse) : site-loc-mark

La confirmation de l’adresse complétera automatiquement les informations détaillées de l’annonce. site-loc-form

Annonce est alors localisée et la carte affichée sur la fiche de l’annonce. site-loc-display

Lorsqu'on place un marqueur sur la carte et qu'aucune adresse est detectée ou saisie, la carte se positionne par défaut sur la coordonnée GPS renseignée dans ADMIN > CONFIG > LOCALISATION > localisation par défaut comme ci-dessous. Vous devez adapter cette position à votre site. Il est également possible de régler le niveau de ZOOM de toutes les cartes affichées au même endroit. admin-loc-latlng

Localisation assistée

Dans ce mode assisté, la barre de recherche (simplifiée) ou de saisie d'une adresse lors de la créatoin d'une annonce ou un usager, permet à patir d'une adresse ou un code postal de proposer des adresses valides. L'utilisateur peut donc choisir la bonne adresse. site-loc-auto

Pour activer le mode d'auto-completion dans ADMIN > CONFIG > LOCALISATION admin-loc-auto

On peut restreindre la zone de recherche à certains pays uniquement. Ci-dessous , l'exemple de France et Tunisie.

Localisation "autour de/ dans un rayon de"

La barre de recherche simplifiée permet de saisir une ville/code postal et de faire une recherche dans un rayon de X kilomètres. site-loc-radius

activation de la fonction dans ADMIN > CONFIG > LOCALISATION admin-loc-radius

Les annonces sont alors affichées par rapport à ce critère (coordonnée GPS de la ville + cercle de rayon de X kilomètres). site-loc-listrayon

Le champ « le plus proche en premier s’affiche ». On peut alors choisir de trier par les annonces les plus proches. site-loc-ckeck

La distance entre votre localisation et l'annonce s'affiche. site-loc-listdist

Pour activer ce mode : activer « Dans un rayon de … » dans la section LOCALISATION

Attention le mode "rayon" est incompatible avec la barre de recherche standard - uniquement affiché avec la barre de recherche « compacte ».

Liste des annonces localisées

Il est possible d’afficher les annonces sur une carte et de naviguer dessus. Avec OpenStreetMap site-loc-maposm

Avec Google Map site-loc-mapgoogle

Lorsque l’affichage est en mode carte, une pop-up indique les détails de l’annonce accessible en cliquant sur les marqueurs de position ou sur les indicateurs (A, B, C, …) de la liste des annonces (ici A sur l’exemple). site-loc-mappinosm

Adresses partielles ou complétes

Il est possible de restreindre l’adresse visible pour les visiteurs dans les listes ou dans le fiche de l'annonce. Si restreinte, on affiche uniquement la ville et le département. Sinon on affiche l'adresse complète.

Ce paramètres dans ADMIN > CONFIG > LOCALISATION admin-loc-partial

Voici les deux affichages fonction de l'activation. site-loc-partial

Activer / désactiver la localisation

Pour activer ou désactiver la localisation sur les annonces ou usagers dans ADMIN > CONFIG > LOCALISATION

Pour désactiver admin-loc-dis

Pour chaque champs de localisation (code postal, présence obligatoire des chalmps, ...), des contrôles automatiques sont effectués qui peuvent dans dcertains cas bloquer la validation d'annonces. On peut les desactiver comme suit : admin-loc-disctrl

Changement des Icônes des markers

Il est possible d’avoir sa propre icone pour les marqueurs de localisation. Il suffit de renseigner l’URL de l’Icon

admin-loc-mark

Affichage de votre icone personnalisée site-loc-markcusto

Limiter la localisation à une zone

Il est possible de limiter la locatisation automatique à une zone (pays, ville, région, ..) en indiquant la restriction sous forme d'un champ et des valeures autorisées.
admin-loc-restriction

Le nom du champ doit être choisi dans la liste ci-dessous (champs retorné par Google Map Api)

street_number, route, locality, dept, region, country, countrycode, postal_code

Cette fonction est compatible uniquement avec la localisation par Google Map API

Affichage d'un drapeau pays

Il est possible d'afficher devant la localisation un drapeau du pays considéré.

La configuration suivante ... admin-loc-flag

... affichage le drapeeau suivant site-loc-listflag

Régions et départments en dehors de la France

Pour certains pays, la notion de région ou de département peut avoir une signification différente. Exemple, en belgique, la province est l'equivalent du département.

On peut donc renommer à travers la systéme de traduction comme suite . gestion des traductions

// -- localisation 
my_dictionary['fr_FR']["user locregion"]  = "ma région";
my_dictionary['fr_FR']["user locdept"]  = "ma province";

On peut également ne pas afficher les regions ou département via le menu ADMIN > CONFIG > CHAMPS ANNONCE (avancés), les informations (si elles existent) seront sauvegardées mais pas affichées. admin-loc-fields

Enfin, le script contient des filtrages automatiques par défaut comme inqué ci-dessous :

  • ENEGAL & COTE D'IVOIRE : pas ce code postal
  • ALGERIE : pas de code postal, pas département

Carte vectorielle en première page

Il est possible d'avoir une carte cliquable stylisée (format vectoriel SVG) en première page.
site-code-map

Si la carte est activée, le script charge la carte du pays indiqué par le code dans ADMIN > CONFIG > LOCALISATION : Le code doit être en majuscule sur 2 caractères (voir https://fr.wikipedia.org/wiki/ISO_3166-1 ). admin-loc-subcode

Si ce code n'est pas renseigné alors le script prendra automatiquement le code pays général du site
admin-loc-countrycode

Dans le cas spécial de la carte francaise, les régions ayant changés, le script supporte également les anciennes régions. Il faudra activer l'option spéciale suivante pour activer les nouvelles régions (Grand-est) ou rester sur les anciennes (Alsace)

admin-loc-nregion

Exemple avec anciennes régions site-loc-mapfroldregion

La liste des cartes SVG est en constante évolution. Pour voir la liste des cartes incluses dans votre installation en consultant le répertoire /map/ de votre site. admin-loc-maplist

Pour plus d’information sur comment l'activer, consulter la page de gestion de la page d'accueil

Langues et traductions

Les langues disponibles pour un utilisateur sont paramétrables via ADMIN > CONFIGURATION > LOCALE. admin-lang-auth

La liste indiquée sera présentée au visiteur via une icône en haut à droite. site-lang-select

Attention : il faut vous assurer que ces langues sont disponibles et 100% traduites au moment de définir cette liste.

Pour plus d’information sur les traductions, consulter la page de gestion des traductions

Unités de mesure et devise monétaire

Pour choisir ces élements, rendez-vous dans ADMIN > CONFIG > LOCALE :

Unité de mesure de distance admin-loc-km

Devise principale et multi-devises admin-loc-currency

Affichage du multi-devises lors de la saisie de l'annonce site-loc-currency

Formatage des numéros de téléphone

ZADS implémente un méchanisme automatique d'aide à la saisie et de vérification du bon format des numéros de téléphones. Pour activer cette option, aller dans ADMIN > CONFIG > LOCALE et activer l'option téléphone internationnal . Vous pouvez également indiquer une liste de code pays pour lesquels vous acceper le numéro. admin-loc-tel

Assistance lors de la création d'une annonce site-loc-tel

Si le format du numéro de téléphone n'est pas en format international (format Local sauvegardé dans la base de donnée), il faudra alors configurer le prefixe international téléphonique du pays (exemple : 33 pour la france) pour pouvoir utiliser les fonctions d'envoi de SMS ou de click-2-chat via WhatsApp. Le site ne pourra par nature être que mono-pays.

Recherche multi-pays

Lorsque vous avez un site multi-pays (exemple : France, Belgique et Allemagne) et que vous souhaitez avoir dans la barre de recherche le choix du pays comme filtre de recherche.

Ajouter le filtre dans la barre de recherche admin-loc-multicountrysearch

Indiquez les pays à proposer admin-loc-multicountry

Le code doit être en minuscule sur 2 caractères (voir https://fr.wikipedia.org/wiki/ISO_3166-1 ).

Affichage dans la barre de recherche site-loc-multicountrysearch

Ce mode n'est possible qu'avec une barre de recherche personnalisée (pas compact)

ANNEXE - Configuration de OpenStreetMap

Pour choisir OpenStreetMap : dans ADMIN > CONFIG > LOCALISATION : admin-loc-osm

Aucun autre paramètre n’est nécessaire. Le script charge la tile (type de cartes) par défaut (example : https://tile.openstreetmap.org/7/63/42.png) .

ANNEXE - Configuration de Google Map API

Pour choisir :

admin-loc-google

Pour fonctionner, Google demande une clef secrète(API KEY) et que le domaine soit en HTPS. Pour obtenir cette clef, vous pouvez suivre des tutos sur internet comme celui la  : https://www.e-monsite.com/pages/tutoriels/configuration-avancee-du-site/obtenir-une-cle-google-maps-api.html. Ou suivre les décrans suivants

  1. Se créer un compte google
  2. Accéder à la console de gestion des APIs. https://console.cloud.google.com/apis/
  3. Accéder à la page Identifiants
  4. Cliquer sur Créer des identifiants

admin-loc-gcp1

admin-loc-gcp2

Indiquer le nom de la clés et les restrictions d’utilisation (domaine et liste des APIs) comme ci-dessous. ZADS utilise les API suivantes : admin-loc-gcp2

On peut alors copier la clés API et la renseigner dans le script comme indiqué ci-dessous . admin-loc-gcp2

Depuis le 29 Novembre 2018, Google a changé sa politique tarifaire de gratuite à freemium et  rend certaines APIs payantes au delà d’un certain quota par type d’APIs. (voir ici des details)

Par exemple :

  • MAP JAVASCRIP API : 25 000 appels/jours gratuits

  • GEOCODING API : 2 500 appels gratuits/jour
 - PLACE API : 1000 ou 150 000 Appels/jour