Cartes Dans Drupal - Un Guide Complet

Le soutien cohérent des adresses, coordonnées, cartes et de la recherche de lieux est définitivement le talon d'Achille de la plupart des CMS modernes. C'est une affaire compliquée et cela nécessite l'intégration d'un grand nombre de solutions indépendantes. Le sujet de la géolocalisation a également été abordé dans de nombreux grands projets réalisés par Droptica. Je vais vous montrer quelques bonnes pratiques sur leur base.

Je commencerai par présenter les 10 meilleurs modules de géolocalisation pour Drupal. Familiarisez-vous avec eux et choisissez ceux qui conviennent le mieux à vos besoins. À la fin, nous construirons ensemble une base de données de lieux, facile à éditer et attrayante.

Modules pour la prise en charge des adresses

Adresse

Ce module fournit un champ nécessaire pour enregistrer l'adresse, fonctionnant dans tous les pays du monde. Grâce à lui, vous n'avez pas besoin de créer des champs séparés pour le nom de rue, le numéro d'appartement, la ville et le code postal. Les capacités du module seront particulièrement appréciées par les personnes qui ont besoin de prise en charge des adresses pour différents pays. Sa configuration est très simple : il suffit de sélectionner les éléments d'adresse que vous souhaitez rendre visibles ou requis. Le set comprend des validateurs prêts à l'emploi (y compris ceux pour les codes postaux) et des champs supplémentaires "Pays" et "Zone".

Le module Address affiche les adresses enregistrées dans leur forme de base ; personnaliser l'apparence de ces champs nécessite d'avoir des connaissances en création de vos propres modèles et en codage CSS. Alternativement, il est possible de combiner les champs d'adresse avec d'autres modules, qui seront abordés plus tard dans l'article.

Modules de la famille de géolocalisation

Geolocation Field

C'est un module qui ajoute un champ avec latitude et longitude à Drupal. Sa base est simple, mais elle contient également plus de 20 modules d'accompagnement. Dans sa version la plus simple, il comprend une définition de champ, deux types de contrôles pour le modifier (coordonnées et un widget HTML5 qui récupère la localisation depuis le navigateur), et des formateurs qui affichent la localisation sous forme de texte (décimal, sexagésimal – sous forme de degrés, minutes et secondes, et utilisant des jetons). 

Si vous souhaitez utiliser des champs avec des coordonnées dans les vues, vous obtenez des fonctionnalités intéressantes. Vous pouvez, par exemple, utiliser des distances en kilomètres à partir d'un point donné. Cela vous permet de créer une liste de lieux dans un rayon donné à partir de l'utilisateur. Vous pouvez déterminer la position du visiteur du site en utilisant le service de localisation fourni par le navigateur ou basé sur l'adresse IP.

La géolocalisation montre tout son potentiel après l'exécution des modules secondaires. Les capacités supplémentaires incluent :

• Un widget de carte fonctionnant à la fois avec des fournisseurs commerciaux (Google Maps, Baidu, Yandex, Here) et avec la bibliothèque Open Leaflet (avec des couches de carte OpenStreetMap fonctionnant par défaut). Il y a de nombreuses options de configuration ici, et aucun module supplémentaire n'est requis dans la solution CMS.

• Support pour les cartes statiques Google sous forme de fichier PNG standard.
• Support expérimental pour les formes géométriques sur les cartes – simples et complexes. Des contours prêts à l'emploi des pays et des états des USA et du Canada sont fournis avec le module de géolocalisation.
• Intégration avec le module Address, fournissant l'accès à un formateur avec une carte pour les champs d'adresse. Cela permet de montrer une adresse postale sur la carte, sans avoir à entrer des coordonnées géographiques. La conversion automatique d'une adresse physique en coordonnées est effectuée à l'aide du service de géocodage sélectionné (par exemple, Google API payant ou Nominatom gratuit). Le module Geocoder offre une fonctionnalité similaire.
• Intégration avec le module Geofield, ajoutant un formateur avec une carte aux champs avec des coordonnées.
• Intégration avec le module Search API, ajoutant la capacité de limiter la recherche à une zone rectangulaire donnée.

Il convient de mentionner que l'architecture du module Geolocation est ouverte et bien affinée, vous pouvez donc facilement ajouter votre fonctionnalité basée sur celles listées ci-dessus.

Modules de la famille Geofield

Geofield

Une alternative au module Geolocation Field, étant une sorte d'"écosystème" concurrent de modules géographiques. Geofield dans sa forme de base est très simple et pratique. Par rapport aux fonctionnalités offertes par Geolocation, Geofield comprend également :

• Possibilité d'ajouter le bouton "Trouver ma position" à un widget standard avec latitude et longitude.
• Widget avec des champs de coordonnées divisés en degrés, minutes, secondes (mais ne prend pas en charge le bouton "Trouver ma position").
• Widget prenant en charge le format WKT (Well-known text) décrivant les objets vectoriels sur les cartes. En utilisant WKT, vous pouvez définir une zone de toute forme au lieu d'un point spécifique.
• Widget vous permettant de définir un cadre de délimitation - c'est-à-dire une zone délimitée par un rectangle.

Concernant l'intégration de Geofield avec Views – des champs et des filtres basés sur la distance à un point donné sont disponibles, mais leurs options de configuration n'incluent pas la détection automatique de la position de l'utilisateur.

Il n'y a pas beaucoup d'options d'affichage de champ dans la version de base de Geofield. Vous pouvez soit choisir l'un des formats populaires (WKT, EWKT, WKB, EWKB, GeoJSON, KML, GPX, GeoRSS, GeoHash) ou simplement présenter les coordonnées sous forme de nombres décimaux ou sexagésimaux. Il n'est pas possible d'afficher la position sur une carte.

Il semblerait que le module Geolocation soit un meilleur choix, mais la vraie force de Geofield réside dans les modules additionnels externes :

Geofield Map

Ce module fournit une intégration avec l'API Google Maps payante. Il est très facile à configurer, il contient un widget de formulaire pour sélectionner des emplacements (avec recherche de coordonnées basée sur l'adresse), un formateur montrant un lieu donné sur Google Maps, et un nouveau mode d'affichage de vue qui permet d'afficher les résultats sous forme d'épingles sur une carte. Les utilisateurs avancés ont beaucoup de choix, en commençant par une couche de carte et en terminant par leurs propres icônes. 

Le plus gros inconvénient du module Geofield Map est le coût inévitable de l'utilisation de l'API Google. Cela est important pour les sites avec un grand nombre de vues de pages. Les créateurs du module ont mis en œuvre trois mécanismes qui permettent des économies significatives :

• Support pour le service OpenStreetView gratuit via la bibliothèque Leaflet.js. Cela s'applique uniquement au widget du formulaire d'édition.
• Support pour les cartes statiques, c'est-à-dire générées par Google sous forme de fichier PNG. Elles ne sont pas interactives, mais elles sont suffisantes pour certaines applications.
• Support pour les cartes Google simples disponibles sans limites gratuitement. Elles sont interactives, mais leurs options de configuration sont très limitées.

Leaflet

Une alternative à Geofield Map, basée sur la bibliothèque ouverte Leaflet.js. Par défaut, elle inclut le support pour le site OpenStreetMap gratuit. Les fonctionnalités les plus importantes du module Leaflet sont :

• Formateur de champ Geofield solide qui vous permet de configurer tous les aspects de la carte.
• Support des vues – mode d'affichage de carte ou en utilisant le module Views GeoJSON pour montrer des structures plus complexes que des points individuels.
• Support intégré pour la bibliothèque Leaflet.markercluster groupant les épingles lors du zoom arrière d'une carte.
• Possibilité de définir des couches de carte en utilisant un hook.
• Support pour les widgets de formulaire pris en charge par le module externe Leaflet Widgetmodule. C'est une fonctionnalité très avancée, incluant le dessin de formes géométriques et le placement de divers types d'icônes. Pour des applications de base, il vaut mieux utiliser le widget Leaflet.js fourni par Geofield Map qui a été décrit précédemment.

Pour résumer – vous avez ici une solution complètement gratuite, qui devrait suffire pour la plupart des besoins.

Geocoder

En décrivant les modules de l'écosystème Geofield, je n'ai pas encore mentionné la conversion d'une adresse postale en coordonnées. C'est le domaine du module Geocoder admirablement conçu. Il étend les widgets, les formateurs et les vues avec la possibilité de géocodage basé sur plusieurs fournisseurs payants et gratuits. Le choix du fournisseur est effectué séparément pour chaque élément configuré, ce qui permet de planifier très précisément les coûts possibles.

Avec l'aide de Geocode, vous pouvez, par exemple :

• Montrer les coordonnées sous forme d'adresse postale (à travers un formateur dédié séparé).
• Inclure une recherche de localisation par adresse dans les formulaires d'édition.
• Lire une adresse depuis des champs de tout type (même ceux définis par le module Address) et la remplacer par la position sur une carte (et vice versa – remplacer les coordonnées par une adresse). Plus tard dans l'article, je présenterai un exemple de configuration pour une telle solution.
• Il vaut également la peine d'utiliser le module Geocoder AJAX Prepopulate permettant de trouver des coordonnées basées sur une adresse, sans quitter le formulaire d'édition. Cela est dû au fait que l'implémentation standard contenue dans Geocoder permet le géocodage uniquement lors de l'enregistrement du formulaire. S'il est nécessaire d'apporter des corrections à une localisation sur la carte, vous devez entrer à nouveau l'option d'édition.

Autres modules

Simple Google Maps

Il est possible que vous n'ayez pas du tout besoin d'options de géolocalisation étendues. Le module Simple Google Maps est une simplification significative de ce que j'ai décrit jusqu'à présent. Il fournit simplement un formateur de carte qui peut être défini pour tout champ de texte. Lorsque vous entrez une adresse dans ce champ, l'utilisateur final verra une carte Google générée en fonction de leur adresse. C'est gratuit et vous n'avez pas besoin d'obtenir la clé API. Pour des raisons évidentes, il n'offre pas l'intégration avec Views ni un widget pour marquer la position sur une carte dans un formulaire.

Base de données d'exemples de lieux

Vous avez déjà appris les modules de base pour la géolocalisation. Maintenant, il est temps de les utiliser sur un exemple concret. Nous allons créer une base de données de lieux où chaque entrée aura un titre, une description, une adresse et des coordonnées. Nous afficherons la liste des lieux sous forme d'épingles sur une carte. Nous rencontrons souvent ce type de solution lorsque nous créons des sites d'entreprise, par exemple lors de la publication d'informations sur des événements ou des installations d'une entreprise donnée.

Nous devrons installer les modules suivants pour les besoins de notre base de données de lieux (je recommande de le faire en utilisant Composer car des bibliothèques externes sont requises) :

• Address, 
• Geofield, 
• Geofield Map, 
• Leaflet – y compris Leaflet Views et Leaflet Markercluster,
• Geocoder – y compris Geocoder Address, Geocoder Field et Geocoder Geofield,
• Geocoder AJAX Prepopulate.

Édition

L'édition des lieux sera définitivement le plus grand défi. Nous voulons que l'adresse s'applique à n'importe quel pays. Chaque lieu doit avoir des coordonnées, mais elles peuvent être remplies en fonction de l'adresse. L'adresse peut également être remplie en fonction des coordonnées. Une telle approche simplifiera grandement le travail des créateurs de contenu. Une supposition supplémentaire est n'utiliser que des outils gratuits.

Au début, nous créons un nouveau type de contenu Place. Nous lui ajoutons les champs suivants :

• Nouveau champ d'adresse nommé field_address (masquer le nom, le prénom et le nom de l'entreprise dans les paramètres du champ)
• Nouveau champ Geofield nommé field_coordinates

Ensuite, nous déterminons la relation entre ces deux champs. Nous voulons que le champ d'adresse soit rempli sur la base de la carte si l'utilisateur n'a pas saisi l'adresse. Et vice versa – pour que le lieu sur la carte soit rempli sur la base de l'adresse après avoir appuyé sur le bouton. Pour cela :

Nous entrons dans les paramètres du champ field_address et dans la section Geocode, nous sélectionnons l'option "Geocode inverse" (conversion des coordonnées en adresse). Nous choisissons "Coordonnés" dans la liste des champs et sélectionnons également "Ignorer le géocodage/le géocodage inverse si la valeur cible n'est pas vide". Nous choisissons Nominatim sur la liste des fournisseurs.

Nous entrons dans les paramètres du champ field_coordinates et dans la section Geocode, nous choisissons l'option "Pré-remplir par le géocodage d'un champ existant" (conversion d'une adresse en coordonnées). Nous choisissons "Adresse" dans la liste des champs et sélectionnons également "Ignorer le géocodage/le géocodage inverse si la valeur cible n'est pas vide". Nous choisissons également Nominatim sur la liste des fournisseurs.

Lorsque nous tentons de créer un nouveau lieu, nous conclurons rapidement que l'utilisation de la latitude et de la longitude est peu pratique. Il est beaucoup plus facile d'utiliser la carte à cette fin. Nous allons ensuite aux paramètres du formulaire pour le type de contenu Place et sélectionnons le widget Geofield Map pour le champ field_coordinates. Un avertissement concernant la clé API Google non configurée apparaîtra, mais nous pouvons l'ignorer. En effet, nous allons utiliser la bibliothèque Leaflet.js gratuite.

La dernière étape consiste à configurer le site Nominatim mentionné précédemment. Nous allons à l'adresse /admin/config/system/geocoder et entrons L'URL racine https://nominatim.openstreetmap.org et Locale pl. C'est tout !

Maintenant, essayons d'ajouter un nouveau lieu. Après avoir rempli les champs d'adresse, nous cliquons sur le bouton Remplir à partir du champ Adresse, et avec un peu de chance, nous devrions obtenir la localisation de l'adresse sur la carte. Si nous n'ajoutons pas du tout d'adresse, juste un lieu sur la carte – l'adresse sera lue en fonction des coordonnées.

Affichage

Il est maintenant temps d'afficher le lieu. Nous allons aux modes d'affichage pour notre type de contenu Place et définissons un formateur pour le champ field_coordinates. Voyons maintenant la page avec une carte fonctionnelle créée à l'instant :

Vues

Afficher une liste de lieux est tout aussi simple. Nous créons une nouvelle vue dans laquelle nous ne montrons que les nœuds avec le type de contenu Place. Nous définissons la carte Leaflet comme format d'affichage. 

Pour que la carte fonctionne, nous devons ajouter le champ field_coordinates.

Ensuite, dans les paramètres de format de la carte Leaflet, nous sélectionnons Champ de regroupement n° 1 comme "Coordonnées de contenu".

Nous enregistrons la vue, ajoutons quelques lieux, allons à l'adresse /places. Nous obtenons une carte interactive avec des épingles marquées. Nous pouvons rapidement l'enrichir d'autres fonctionnalités, telles que l'affichage uniquement des lieux situés à moins de 30 km de notre emplacement.

Les cartes dans Drupal - résumé

Comme vous pouvez le voir, le support de la géolocalisation dans Drupal nécessite beaucoup de connaissances, mais il permet également de créer des solutions parfaitement fonctionnelles pour vos clients. Les possibilités sont presque illimitées, tandis que le temps de mise en œuvre est relativement court. Dans notre exemple, nous avons à peine effleuré la surface du sujet des cartes et du géocodage – c'est en réalité bien plus vaste. Je vous encourage à expérimenter par vous-même, en essayant également les composants payants de Google ! Mais si vous avez besoin d'aide pour implémenter la géolocalisation dans Drupal, consultez nos services de développement Drupal.