...du verbe Drupaler (1er groupe)

Créer une géolocalisation sous drupal7 avec OpenLayer

2. Août 2012 - 10:02 -- Thomas
  1. Installation des modules + librairies
  2. Création des données
  3. Le layer
  4. La map
  5. Afficher sa carte
  6.  Harmoniser son formulaire et son affichage de nœud.
  7. Utilisation de GeoCode.
  8. GeoCoder autocomplete.
  9. Problèmes connus.
  1. Installation des modules + librairies

« OpenLayers est un logiciel libre, publié sous licence BSD. Il constitue une bibliothèque de fonctions JavaScript assurant un noyau de fonctionnalités orienté vers la mise en place d'applications clientes Web cartographiques fluides. OpenLayers permet d'afficher des fonds cartographiques tuilés ainsi que des marqueurs provenant d'une grande variété de sources de données. Une partie de cette bibliothèque permet aussi de gérer l'ergonomie proposée à l'utilisateur, mais ce n'est pas directement son rôle.Framweork de géolocalisation JS » wikipédia source.

Vous aurez besoins des modules suivnats ( version Drupal 7):

  • GeoField :

Module de stockage de donnée liée à la cartographie.

http://drupal.org/project/geofield

 

  • OpenLayer :

Module servant de passerelle entre le framework OpenLayer et Drupal.

http://drupal.org/project/openlayers

 

  • Librairies

Module contenant des librairies requises par les autres modules.

http://drupal.org/project/libraries

  • Address Field

Module servant à créer des champs spécialisés dans l'enregistrement de coordonnées.

http://drupal.org/project/addressfield

  • GeoCoder

Module servant à lier des champs d’entrés  (champs qui vont comporter des adresses) à geofield afin de géo localiser à partir de ces champs.

http://drupal.org/project/geocoder

  • GeoCoder Autocomplete

Module servant à réaliser un autocomplete d’adresse en utilisant une API Google.

http://drupal.org/project/geocoder_autocomplete

 

Nota : Ces trois derniers modules ne servent qu'a automatiser l'enregistrement de la géolocalisation par rapport à un éventuel champs d'adresse déjà présent dans le formulaire. Ils ne sont donc pas indispensable au bon fonctionnement de la géolocalisation mais pratiquement incontournable pour avoir un fomulaire viable pour le client.

Installation des librairies externes

  • GeoPHP
  • OpenLayer (Recommandé)

 

Si vous mettez OpenLayer dans votre espace de travail (au lieu d’allez chercher la librairie en ligne) il faudra la renseigner dans les configurations  de OpenLayer.

  1. Création des données

Créer un champ de type GeoField dans votre type de contenu :

Le type de widget (définit donc comment on va enregistrer la géo localisation dans le formulaire) ici est géocode, vous pouvez le régler sur OpenLayer pour avoir quelque-chose de plus intuitif et visuel au départ, mais sachez que le widget GéoCode permet notamment de se servir du champs adresse (adress field)pour automatiser votre géo localisation.

A ce stade lorsque vous ajouté un nouveau contenu vous devriez obtenir ce genre de carte pour géo localiser votre contenu (dans le cas où le widget Openlayer à été choisis).

La particularité du module OpenLayer est qu’il donne la possibilité d’entièrement customiser ses cartes, leurs affichages ainsi que de s’interfacer avec views.

  1. Le layer

Pour créer de nouveau rendu de map il faut passer par views.

Céer une nouvelle vue de type « contenu » ayant pour type de contenu celui concerné par la géolocalisation (vous pouvez bien entendu créer des vue d'un autre type d'entité commerce, entity form.... , du moment qu'il y est un champs de géolocalisation)

Une fois la vue créé, vous pouvez alors ajouter un affichage de type OpenLayers Data Overlay

Cette vue va donc représenter les données de la carte (les contenues enregistrés).

Dans les champs, sélectionner le champs qui vous sert à géolocaliser votre contenu

Dans les paramètres du format faite correspondre les champs de géo localisation ainsi que son formatage.

 

Enregistrer la vue.

C’est bien sur cette vue qui va jouer le rôle de « calque » sur votre map avec les filtrages & tri que vous aurez configuré dans views.

Normalement vous devriez avoir un nouveau layer dans les configs de OpenLayer

  1. La map

Vous pouvez maintenant créer une map qui va utiliser le rendu de votre layer que vous venez de créer via views.

Dans l’onglet Maps, cliquer sur ajouter.

Vous avez alors pas mal de paramètres à configurer :

Basics :
Informations de base sur la map
Center & bounds :
Définit la zone de la map par défault
On peut également régler une option qui interdit l’utilisateur de dézommer (restreint la zone géographique).
Layer  & style :
Dans cette section vous pouvez régler les différents  type de cartes, ainsi que les layers disponibles. C'est ici que vous pouvez activer/ désactiver des bases de layer qui correpondent a des API de map tel que Google Map.

A noter que le layer « Placeholder geofield formater » sert a activer votre map pour l’affichage de votre type de contenu (admin/structure/types/manage/%/display)

 

Nota : ce tutoriel n’est fait qu’avec un seul layer, vous pouvez bien entendu ajouter autant d’overlay que vous le désirez et donnez la possibilité à l’utilisateur de les affichers.

  1. Afficher sa carte

Une fois votre map créée il suffit de créer un nouveau display ou une nouvelle avec un format d’affichage de type OpenLayers Map.

Attention  si vous optez pour le nouveau display, faite bien attention de bien supplanter le format de sortie.

Une fois la vue enregistrée vous pouvez utiliser votre map dans les paramètres du format d’affichage.

Pour vérifier si tout fonctionne vous pouvez ajouter un nouveau contenu (node/add/%), renseigner vos coordonnées et normalement il devrait apparaitre sur la carte de la vue que vous venez de créer.