Cartographie Drupal : Views + Geofield Map

Dans les articles précédents (stockage des données notamment) , nous avons vu comment ajouter un champ de type Geofield et l'afficher sous forme de carte.

Nous allons voir ici comment afficher plusieurs points sur une seule carte. Pour cela, nous devons juste installer Views, et activer les modules Views, Views UI et Geofield Map.

drush dl views
drush en views views_ui geofield_map

Création de la vue

Il faut ensuite créer une vue. Pour cela, on va dans Structure /  Vues, puis on va ajouter une vue (admin/structure/views/add). Nous allons nous baser sur le type de contenu créé auparavant,  qui contient un champ Geofield. On donne un nom à la vue, puis on sélectionne le type de contenu (Magasin). On peut créer un block, sur la base d'une liste de champs (Unformatted list of fields).

Image

Si on veut on peut également créer une page, tout dépend de ce que l'on veut faire.

Image

On clique ensuite sur Continue & Edit pour continuer la création de la vue.

Choix des champs

Par défaut, seul le titre est affiché :

Image

Il faut alors cliquer sur "Add", puis choisir le champ Coordonnées qui est de type Geofield.

Image

 

On supprime l'affichage du libellé, et on laisse les valeurs par défaut (y compris le formatter en Well Known Text). En effet c'est dans le type de formatage global que l'on choisira Google Map.

Image

On valide tout cela. Dans les chjamps, on doit donc avoir Title et Coordonnées.

Choix du format d'affichage

A ce stade, on a uniquement le titre et les coordonnées. Rien de très sympathique. Il faut alors changer le format de la vue :

Image

A ce niveau, on peut choisir "Geofield Map" :

Image

On valide en cliquant sur "Apply". On peut alors choisir quel champ sert de source. On va choisir le champ field_coordonnees que l'on vient d'ajouter à notre vue :

Image

On peut laisser les valeurs par défaut dans un premier temps. Si on se rend à l'url de la vue, on a un premier résultat :

Image

Si on clique sur l'un des marqueurs, le titre apparaît.

Amélioration de l'affichage

En modifiant la vue on peut facilement :

  • Ajouter des informations dans la Pop-Up
  • Permettre le scroll dans la carte (ScrollWheel)
  • Mettre un niveau de zoom par défaut (Zoom / Zoom minimum et maximum)

Image

Dans l'exemple, la hauteur de la carte a été modifiée à 450 pixels, et on a mis la description plutôt que le titre dans la pop-up.

C'est globalement la limite du couple Views + Geofield Map, qui offre un premier niveau de formatage, sans beaucoup de souplesse.

On peut aller plus loin, avec d'autres modules. Ceci fera l'objet d'un autre article.

 

 

 

Catégorie
Permalien

Sympa ce tuto.

J'ai eu l'occasion de réaliser ce genre de views auparavant, notamment avec Leaflet (qui n'est pas mal du tout aussi). Il est possible de pousser le schmilblick assez loin, en ajoutant des filtres de vue, des modales qui s'ouvrent au click en AJAX, etc. C'est assez pratique. J'aurais aimé tomber sur ce tuto avant d'avoir à créer ces fameuses interfaces de cartes, ça aurait été plus rapide :)

À noter qu'avec ce genre de vues, un trop grand nombre de nodes à afficher peut causer des soucis de perfs.

Salut et bonne continuation.