Drupal https://www.vincentliefooghe.net/ fr Migration Media et Images Inline https://www.vincentliefooghe.net/content/migration-media-et-images-inline <span class="field field--name-title field--type-string field--label-hidden">Migration Media et Images Inline</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Dans la série d'articles sur la migration de mon site <a href="https://www.vincentliefooghe.net/content/migration-drupal-7-vers-drupal-8">https://www.vincentliefooghe.net/content/migration-drupal-7-vers-drupal-8 </a> j'en viens maintenant à une partie qui m'a pris pas mal de temps et demandé un peu de développement.</p> <p>Sur mon site en Drupal 7, j'avais utilisé le module Media_Wysiwyg et Colorbox, qui me permettaient d'insérer des images directement dans le texte.</p> <p>Je n'ai pas trouvé d'équivalent sous Drupal 8, mais en utilisant comme format d'affichage "Colorbox" pour le champ media_image, ceci répond à mon besoin : ouvrir un champ image dans une "lightbox".</p> <article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/2020-04/Capture%20d%E2%80%99%C3%A9cran%20de%202020-04-20%2021-58-11.png" title="Définition du format d'affichage Media Image" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Définition du format d'affichage Media Image&quot;}"><img src="/sites/default/files/styles/large/public/2020-04/Capture%20d%E2%80%99%C3%A9cran%20de%202020-04-20%2021-58-11.png?itok=nlAgY3jD" width="480" height="154" alt="Définition du format d'affichage Media Image" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> <p>Il reste donc à convertir les fichiers en média, et ensuite à convertir, dans le corps du texte de chaque contenu, les tags "colorbox" en tags "drupal media".</p> <h2>Création des Media liés aux fichiers</h2> <p>Lors de la migration, les fichiers ont bien été importés. Par contre ils ne sont pas reconnus comme <em>media</em> par Drupal ,et donc pas réutilisables.</p> <p>Après avoir cherché - en vain - des modules qui géraient ceci, j'ai fini par passer par un bout de programme PHP qui utilise les fonctions de Drupal pour réaliser cette opération.</p> <p>Le code php est le suivant :</p> <pre style="margin: 0px; text-indent: 0px;"> &lt;?php // Create Media images from file use Drupal\media\Entity\Media; // Requete pour recupérer les fichiers de type Image $results = \Drupal::database()-&gt;query("select * from file_managed where filemime like 'image%'")-&gt;fetchAll(); foreach ($results as $file ) { echo "File name:",$file-&gt;filename," Id : ",$file-&gt;fid," mime : ",$file-&gt;filemime," uid : ",$file-&gt;uid; echo "Creation du Media Image pour ",$file-&gt;filename,PHP_EOL; $media = Media::create([ 'bundle' =&gt; 'image', 'uid' =&gt; $file-&gt;uid, 'langcode' =&gt; $file-&gt;langcode, 'field_media_image' =&gt; [ 'target_id' =&gt; $file-&gt;fid, 'alt' =&gt; $file-&gt;filename ] ]); $media-&gt;setPublished(TRUE); $retour=$media-&gt;save(); if ( $retour != 1 ) { echo "Retour KO ? ",$retour,PHP_EOL; } } return (TRUE);</pre><p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"> </p> <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">On peut le lancer avec drush, via la commande :</p> <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"> </p> <pre> drush --uri=drupal.loc scr /chemin/vers/mon/fichier.php</pre><p>Après cette étape, on récupère bien dans la librairies de media tous les fichiers</p> <h2 style="margin: 0px; text-indent: 0px;">Reprise des images inline</h2> <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"> </p> <p class="western">Pour convertir les tags, j'ai développé un programme PHP qui va remplacer les instructions inline Colorbox, par exemple</p> <pre> &lt;p&gt;[[{"type":"media","view_mode":"colorbox","fid":"88","attributes":{"alt":"","class":"media-image","height":"300","typeof":"foaf:Image","width":"494"}}]]&lt;/p&gt;</pre><p class="western">par</p> <pre> &lt;drupal-media data-align="center" data-entity-type="media" data-entity-uuid="b5631639-11f9-4945-85b7-85a477cbdcf8"&gt;&lt;/drupal-media&gt;</pre><p class="western">Le script sera lancé avec en paramètre le Node Id à traiter :</p> <pre> php mediaInline.php -i nid</pre><p class="western">Par exemple</p> <pre> php mediaInline.php -i 136</pre><p class="western">Note : j'ai fait le choix de traiter les contenus un par un. Au total, j'avais identifié une vingtaine d'articles concernés. La migration unitaire me permettait de vérifier le traitement pour chacun.</p> <p class="western">Afin de voir le résultat, il faut vider le cache Drupal avec la commande :</p> <pre> drush cr</pre><p> </p> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/users/vincentl" typeof="schema:Person" property="schema:name" datatype="">vincentl</span></span> <span class="field field--name-created field--type-created field--label-hidden">lun 20/04/2020 - 21:54</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> <div class="field__item"><a href="/tags/media" hreflang="fr">media</a></div> </div> </div> <div class="field field--name-field-fichier field--type-file field--label-above"> <div class="field__label">Fichier</div> <div class="field__items"> <div class="field__item"> <span class="file file--mime-application-pdf file--application-pdf"> <a href="https://www.vincentliefooghe.net/sites/default/files/mediaInline.php_.pdf" type="application/pdf; length=53900" title="mediaInline.php_.pdf">Script de migration Colorbox vers media</a></span> </div> </div> </div> <section class="field field--name-comment-node-book field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Ajouter un commentaire</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=205&amp;2=comment_node_book&amp;3=comment_node_book" token="fPxOoNJNWdkHGUVo_eQPh31e8VYhG0jBWRM4c513qDE"></drupal-render-placeholder> </section> Mon, 20 Apr 2020 19:54:26 +0000 vincentl 205 at https://www.vincentliefooghe.net Migration avec le module migrate_upgrade https://www.vincentliefooghe.net/content/migration-avec-le-module-migrateupgrade <span class="field field--name-title field--type-string field--label-hidden">Migration avec le module migrate_upgrade</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2>Installation et activation des modules Drush requis</h2> <p>On va installer les 2 modules suivants : migrate_upgrade, migrate_tools.</p> <pre> <code>composer require drupal/migrate_upgrade composer require drupal/migrate_tools </code></pre><p>Puis activer les modules :</p> <pre> <code>drush pm:enable migrate_upgrade migrate_tools -y </code></pre><p>Dans le fichier <em>settings.php</em> , il faut ajouter la définition de la base source.</p> <p><strong>Important</strong> : elle doit s'appeler <strong>migrate</strong>.</p> <p>Par exemple :</p> <pre> <code>$databases['migrate']['default'] = array ( 'database' =&gt; 'dbdrupal7', 'username' =&gt; 'user_drupal7', 'password' =&gt; 'mdp_drupal7', 'prefix' =&gt; '', 'host' =&gt; 'localhost', 'port' =&gt; '3306', 'namespace' =&gt; 'Drupal\\Core\\Database\\Driver\\mysql', 'driver' =&gt; 'mysql' ); </code></pre><h2>Générer la migration Drupal 7 vers Drupal 8</h2> <p>Dans la version que j'ai installé, on peut utiliser <em>migrate_upgrade</em> pour générer les scripts de migration, qui seront lancés avec <em>drush</em>.</p> <h3>Prérequis</h3> <p>Attention : à cause d'une incompatibilité avec drush 10, cette fonction nécessite que l'on modifie le fichier <code>vendor/drush/drush/includes/drush.inc</code> pour ajouter la définition de drush_print :</p> <pre style="margin: 0px; text-indent: 0px;"> function drush_print($message = '', $indent = 0, $handle = NULL, $newline = TRUE) { $msg = str_repeat(' ', $indent) . (string)$message; if ($newline) { $msg .= &amp;quot;\n&amp;quot;; } if (($charset = 'UTF-8' ) &amp;amp;&amp;amp; function_exists('iconv')) { $msg = iconv('UTF-8', $charset, $msg); } if (!$handle) { $handle = STDOUT; } fwrite($handle, $msg);</pre><p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">}</p> <p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"> </p> <p>Sinon on a le message :</p> <pre> drush migrate-upgrade --legacy-db-key=migrate --configure-only [error] Error: Call to undefined function drush_get_option() in drush_print()</pre><p>Lancer la commande avec le chemin vers le répertoire source "legacy", ce qui permet de migrer les fichiers également :</p> <pre> drush migrate-upgrade --legacy-db-key=migrate --legacy-root /var/www/drupal7/vincentl --migration-prefix=upg1_ --configure-only</pre><p class="western"><span style="line-height:100%">On peut ensuite voir le résultat avec la commande drush migrate-status</span></p> <p class="western"><span style="line-height:100%">Et on peut lancer la migration avec :</span></p> <pre> drush migrate:import upg1_d7_taxonomy_vocabulary drush migrate:import upg1_d7_taxonomy_term_categorie drush migrate:import upg1_d7_taxonomy_term_tags drush migrate-import --group=migrate_drupal_7 </pre><p><strong>Note</strong> : je lance d'abord les migrations de taxonomie pour que la génération des liens de menu se passe correctement. Comme dit précédemment, le processus est assez itératif et a demandé plusieurs essais avant de trouver les bons réglages.</p> <p>Après cette étape, le contenu a été migré, ainsi que les types de contenu, les menus, etc.</p> <p>Il reste à faire quelques mises au point et reprise de paramétrage sur les formats de texte (insertion du bouton media par exemple), ainsi que refaire le thème, et traiter le cas des images <em>inline</em>.</p> <p> </p> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/users/vincentl" typeof="schema:Person" property="schema:name" datatype="">vincentl</span></span> <span class="field field--name-created field--type-created field--label-hidden">lun 20/04/2020 - 21:42</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> </div> </div> <section class="field field--name-comment-node-book field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Ajouter un commentaire</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=204&amp;2=comment_node_book&amp;3=comment_node_book" token="KVD93o-80gUsSKm2muCPtDa4b3TQ3e1ZtQ8mC6723F0"></drupal-render-placeholder> </section> Mon, 20 Apr 2020 19:42:22 +0000 vincentl 204 at https://www.vincentliefooghe.net Processus de migration vers Drupal 8 https://www.vincentliefooghe.net/content/processus-migration-vers-drupal-8 <span class="field field--name-title field--type-string field--label-hidden">Processus de migration vers Drupal 8</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2>Processus de migration</h2> <p>Le processus de migration a été testé plusieurs fois. Je suis parti sur la base d'une sauvegarde du site Drupal 7 (fichiers + base de données).</p> <p>J'ai installé ça dans un container LXC sur mon PC, ce qui me permettra de supprimer tout cela une fois la migration terminée.</p> <p>Au final, on a donc un container sous Debian 10 avec PHP 7.3.11 et une base MariaDB 10.1.</p> <p>L'idée est donc la suivante :</p> <ul> <li>création d'une base de données pour Drupal 8</li> <li>installation d'un site en Drupal 8, en mode "standard", mais sans contenu</li> <li>installation et activation des modules portés sous Drupal 8</li> <li>installation et activation des modules de migration</li> <li>lancement de la migration des contenus</li> <li>reprise des média et de leur affichage (la migration ne gère pas ce point a priori)</li> <li>ajustements manuels / reparamétrage dans la cible D8.</li> </ul> <p>Le processus a été fait de manière itérative, je m'y suis repris à 3 ou 4 fois avant d'avoir un processus qui tienne la route.</p> <h2>Installation Drupal 8</h2> <p>Une fois la base de données créée, on procède à l'installation de Drupal 8.</p> <p>A la date d'installation, la version est Drupal 8.8.5.</p> <p>Il est maintenant fortement recommandé d'utiliser <em>composer</em> pour installer et mettre à jour Drupal.</p> <p>Sachant que même l'installation de modules utilise <em>composer</em>, c'est la solution que j'ai utilisé. C'est d'ailleurs très pratique quand on refaire plusieurs fois la même installation, puisqu'une fois le fichier _composer.json _ généré, il est possible de s'en resservir.</p> <p>Mon fichier comprend les modules suivants :</p> <pre> <code>"repositories": [ { "type": "composer", "url": "https://packages.drupal.org/8" } ], "require": { "composer/installers": "^1.2", "drupal/colorbox": "^1.4", "drupal/core-composer-scaffold": "^8.8", "drupal/core-project-message": "^8.8", "drupal/core-recommended": "^8.8", "drupal/honeypot": "^1.30", "drupal/pathauto": "^1.6", "drupal/tagclouds": "^1.0", "drupal/token": "^1.6", "drupal/xmlsitemap": "^1.0@RC", "drush/drush": "^10.2" }, </code></pre><p>On remarquera que <em>drush</em> est installé en même temps que Drupal.</p> <p>Une fois le répertoire d'installation créé, et le fichier <em>composer.json</em> copié dans ce répertoire, l'installation se fait simplement :</p> <pre> composer install</pre><p>A ce niveau, on peut déjà accéder au nouveau site (il faut auparavant avoir paramétré le virtualhost qui pointe sur le bon répertoire), entrer les paramètres de la base de données. J'ai personnellement choisi d'installer uniquement le français, car je ne vais pas gérer le multilingue.</p> <p>Comme le site sera migré, on peut s'arrêter avant la configuration du site.</p> <p>L'étape suivante est de préparer et lancer la migration.</p> <p> </p> <p> </p> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/users/vincentl" typeof="schema:Person" property="schema:name" datatype="">vincentl</span></span> <span class="field field--name-created field--type-created field--label-hidden">dim 19/04/2020 - 12:45</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> </div> </div> <section class="field field--name-comment-node-book field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Ajouter un commentaire</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=203&amp;2=comment_node_book&amp;3=comment_node_book" token="xD-sOgwyT6pbo6nlI2ZTcPkiu5rO3q8ptqPnaVjYMI0"></drupal-render-placeholder> </section> Sun, 19 Apr 2020 10:45:31 +0000 vincentl 203 at https://www.vincentliefooghe.net Migration Drupal 7 vers Drupal 8 https://www.vincentliefooghe.net/content/migration-drupal-7-vers-drupal-8 <span class="field field--name-title field--type-string field--label-hidden">Migration Drupal 7 vers Drupal 8</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Après plusieurs années sous Drupal 7, et l'arrivée imminente de Drupal 9, il était temps pour moi de migrer mon site sur Drupal 8, d'autant que les dernières versions ont maintenant des utilitaires de migration.</p> <h2>Situation initiale</h2> <p>Mon site perso n'est pas très complexe, ni au niveau contenu (environ 200 articles), ni au niveau modules Drupal.</p> <p>La version utilisée est <strong>Drupal 7.69</strong>.</p> <p>En plus des modules du "<em>core</em>", j'utilise des choses plutôt classiques :</p> <ul> <li>ctools (pré-requis pour pas mal de choses)</li> <li>blog (a disparu de la V8, c'est un type de contenu comme les autres)</li> <li>media et media_wysiwyg (pour insérer les images dans le contenu)</li> <li>colorbox (pour afficher les images dans une box en surimpression)</li> <li>pathauto (permet de générer automatiquement un alias)</li> <li>botcha (comme anti-spam)</li> <li>tagclouds (affiche les tags sous forme de <em>nuage</em>)</li> <li>xmlsitemap</li> </ul> <p>Le thème est un développement <em>custom</em>, basé sur Adaptative Theme. Il sera à refaire.</p> <p>Dans tout ça, les seuls module non portés en D8 et pour lesquels il faudra trouver une alternative sont <em>media_colorbox</em> et <em>botcha</em>.</p> <p>Pour l'antispam, j'ai opté pour le module <em>honeypot</em>, et pour <em>media_colorbox</em>, le paramétrage de l'affichage pour les médias de type image va suffire.</p> <p>Côté volumétrie, on a :</p> <ul> <li>159 fichiers</li> <li>199 articles</li> <li>4 "<em>books</em>" (série d'articles sur le même sujet)</li> <li>64 commentaires.</li> </ul> <p>On utilise 2 langues : français et anglais (9 en anglais, le reste en français ou neutre).</p> <h2>Préparation du site sous Drupal 7</h2> <p>Afin de simplifier la migration, je vais changer la langue des articles en anglais pour les assigner au français ou au neutre.</p> <p>Pour les alias d'URL, même modification (on assigne tout au "All languages").</p> <p>Vu la faible volumétrie, je fais cela directement via l'interface web de Drupal, ce qui me permet de m'assurer que tous les champs sont correctement mis à jour.</p> <p>Suite aux tests effectués, j'ai aussi modifié le champ <em>field_alt_text</em> pour enlever <em>colorbox_link</em> du mode d'affichage.</p> <p>Les différentes étapes de la migration seront détaillées dans la suite de cette série d'articles, avec les problèmes que j'ai pu rencontrer.</p> <p> </p> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/1" typeof="schema:Person" property="schema:name" datatype="">Vincent</span></span> <span class="field field--name-created field--type-created field--label-hidden">dim 19/04/2020 - 12:40</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> <div class="field__item"><a href="/tags/planetdrupal" hreflang="fr">planetdrupal</a></div> </div> </div> <section class="field field--name-comment-node-book field--type-comment field--label-hidden comment-wrapper"> <h2 class="title comment-form__title">Ajouter un commentaire</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=202&amp;2=comment_node_book&amp;3=comment_node_book" token="palsdtS-Zk7K9WxnQeMy0V4EXY9tNqt1fpWt9kALVmg"></drupal-render-placeholder> </section> Sun, 19 Apr 2020 10:40:55 +0000 Vincent 202 at https://www.vincentliefooghe.net Créer une vue Drupal sur un type de contenu, pour tous les auteurs ou moi seulement https://www.vincentliefooghe.net/content/cr%C3%A9er-une-vue-drupal-sur-un-type-contenu-pour-tous-les-auteurs-ou-moi-seulement <span property="dc:title" class="field field--name-title field--type-string field--label-hidden">Créer une vue Drupal sur un type de contenu, pour tous les auteurs ou moi seulement</span> <div property="content:encoded" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>J'ai eu récemment un besoin qui semble assez simple à première vue : pour un type de contenu spécifique, je voulais ajouter dans Views un filtre exposé me permettant de sélectionner tous les contenus ou seulement ceux dont j'étais l'auteur.<br /><br />A priori, il suffit de créer une relation de type "Contenu: Auteur", et l'utiliser dans un filtre exposé sur l'utilisateur Actuel.<br /><br />Sauf que... ceci me donne 2 options : les contenus de l'utilisateur actuel (les miens) ou les autres (pas les miens).<br /><br />J'ai cherché pas mal de manière de faire, jusqu'à tomber sur une discussion qui parlait du module "Composite Views Filter", qui m'a finalement permis de faire ce que je voulais.</p> <h2>Création de la vue avec la relation Contenu : Auteur</h2> <p>Pour cela on crée une vue (Structure / Vue / Ajouter).</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_072.png" title="Tutos_072.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_072.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_072.png?itok=8Xw-uzm6" width="480" height="269" alt="Tutos_072.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On lui donne un nom, et on va afficher les contenus de type "Signalement", puis on clique sur Continue &amp; Edit. On ajoute les champs qui nous intéressent : pour la démo, ce sera le titre du contenu, l'UID de l'auteur et la date.</p> <p>Puis on va ajouter une relation. Pour cela déplier "Avancé", et choisir Ajouter sur les <strong>Relations</strong>.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_073.png" title="Tutos_073.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_073.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_073.png?itok=FSUWU9Va" width="443" height="222" alt="Tutos_073.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On choisit alors la relation Contenu / Auteur : c'est celle qui nous intéresse.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_074.png" title="Tutos_074.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_074.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_074.png?itok=Y1f1ADYQ" width="480" height="342" alt="Tutos_074.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On modifie l'identiiant (par défaut c'est "author", je vais mettre Auteur). Puis on confirme en cliquant sur "Appliquer (tous les affichages).</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_075.png" title="Tutos_075.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_075.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_075.png?itok=uRtKjYw1" width="480" height="216" alt="Tutos_075.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>A ce stade, la preview donne le tableau avec tous les auteurs :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_077.png" title="Tutos_077.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_077.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_077.png?itok=NJ5lidj9" width="480" height="135" alt="Tutos_077.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h2>Première tentative avec un filtre exposé sur l'auteur</h2> <p>On ajoute un filtre exposé (FILTER CRITERIA / Ajouter). On va sélectionner "Utilisateur : Actuel" :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_078.png" title="Tutos_078.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_078.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_078.png?itok=qF1W_owA" width="480" height="246" alt="Tutos_078.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Dans l'écran suivant, on choisit la relation que l'on a défini auparavant. On définit le filtre comme exposé, afin de laisser l'utilisateur choisir sa valeur.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_079.png" title="Tutos_079.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_079.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_079.png?itok=71g1AORK" width="480" height="326" alt="Tutos_079.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Remarque : j'utilise Better Exposed Filter, qui ajoute une valeur "-Tous-", mais qui ne peut pas être sélectionnée par défaut.</p> <p>Au final, les options sont réduites à Oui et Non :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_080.png" title="Tutos_080.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_080.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_080.png?itok=7ddYelPL" width="480" height="180" alt="Tutos_080.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Pas possible donc dans ce cas d'avoir mes contenus (correspondant à UID = 1) ou tous. Lorsqu'on sélectionne l'option Non, on a les autres contenus, mais pas le sien...</p> <p>J'ai donc commencé à regarder du côté du développement Views, avant d'avoir vent du module <a href="https://www.drupal.org/project/composite_views_filter">Composite Views Filter</a>.</p> <h2>Deuxième essai avec le module Composite Views Filter</h2> <p>Ce module nécessite d'être téléchargé et activé. Comme d'habitude, je fais cela avec Drush :</p> <pre>drush dl composite_views_filter drush en -y composite_views_filter</pre><p>Ensuite, il faut ajouter un filtre exposé de type "Global : Composite Filter".</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_081.png" title="Tutos_081.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_081.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_081.png?itok=JLu6jKO6" width="480" height="225" alt="Tutos_081.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On va ensuite donner les propriétés de ce filtre : une étiquette, et une description (optionnelle).  Ensuite, dans Groups, une liste de champs de type clé|valeur, qui seront utilisés par la suite.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_082.png" title="Tutos_082.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_082.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_082.png?itok=RBAwWT51" width="480" height="274" alt="Tutos_082.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Pour terminer, on donne un libellé pour "Tous". Dans l'option "Plus", il faut aussi donner un ID au filtre.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_084.png" title="Tutos_084.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_084.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_084.png?itok=mwIWvA9i" width="480" height="251" alt="Tutos_084.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>A ce stade, on a un nouveau filtre exposé, mais qui n'est pas actif. Il reste une étape : créer un filtre qui utilise ce filtre global. Pour cela, on ajoute un nouveau filtre, sur l'utilisateur Actuel :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_085.png" title="Tutos_085.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_085.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_085.png?itok=BoZQ2ACn" width="480" height="286" alt="Tutos_085.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On valide via le bouton "Appliquer (tous les affichages)". C'est à ce niveau que le groupe défini auparavant peut être utilisé. On sélectionne la valeur correspondant au libellé saisi.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_087.png" title="Tutos_087.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_087.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_087.png?itok=r5ThZX0I" width="480" height="374" alt="Tutos_087.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Le filtre exposé est alors actif. Si on sélectionne l'option "Mes contenus uniquement", on a bien les contenus de l'UID = 1 :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_088.png" title="Tutos_088.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_088.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_088.png?itok=2czHj5Qu" width="480" height="210" alt="Tutos_088.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Si on sélectionne "Tous les utilisateurs" on a la totalité des UID :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Tutos_089.png" title="Tutos_089.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Tutos_089.png&quot;}"><img src="/sites/default/files/styles/large/public/Tutos_089.png?itok=QyY8l5Pn" width="480" height="160" alt="Tutos_089.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On sauvegarde la vue, et le tour est joué.</p> <p> </p> </div> <span rel="sioc:has_creator" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/users/vincentl" typeof="schema:Person" property="schema:name" datatype="">vincentl</span></span> <span property="dc:date dc:created" content="2016-07-28T15:28:39+00:00" datatype="xsd:dateTime" class="field field--name-created field--type-created field--label-hidden">jeu 28/07/2016 - 17:28</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> <div class="field__item"><a href="/tags/views" hreflang="fr">Views</a></div> </div> </div> <section class="field field--name-comment-node-blog field--type-comment field--label-hidden comment-wrapper"> </section> Thu, 28 Jul 2016 15:28:39 +0000 vincentl 161 at https://www.vincentliefooghe.net Importer et tenir à jour les traductions Drupal avec Drush https://www.vincentliefooghe.net/content/importer-et-tenir-%C3%A0-jour-les-traductions-drupal-avec-drush <span property="dc:title" class="field field--name-title field--type-string field--label-hidden">Importer et tenir à jour les traductions Drupal avec Drush</span> <div property="content:encoded" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Lorsqu'on utilise Drupal, <a href="http://www.drush.org/en/master/"><strong>drush</strong></a> est un outil qui permet de gagner beaucoup de temps.</p> <p>Par exemple, pour mettre à jour les traductions des différents modules d'un site, on peut passer par l'interface, mais ceci suppose d'aller télécharger chaque fichier de traduction.</p> <p>Avec <strong>drush</strong>, quelques lignes de commandes suffisent :</p> <pre># Telechargement du module drush_language (c'est une fonctionnalité additionnelle de drush) drush dl drush_language # Téléchargement du module Drupal l10n_update drush dl l10n_update # Activation de ce module drush en -y l10n_update # Ajout du langage "fr" pour le Français drush language-add fr # Activation de la langue fr drush language-enable fr # On nettoie le cache drush cache-clear drush # On fait une vérification des traductions drush l10n-update-refresh # On lance la mise à jour des traductions drush l10n-update</pre><p>La dernière commande va télécharger les fichiers de traduction, et les importer dans la foulée.</p> <p>Exemple sur un site réel :</p> <pre>drush l10n-update Fetching update information for all projects / all languages. [status] Found 19 projects to update. [status] Mise à jour des traductions [status] [status] Traduction de better_exposed_filters vérifiée. [ok] Traduction de colorbox vérifiée. [ok] Traduction de colorbox_node vérifiée. [ok] Traduction de ctools vérifiée. [ok] Traduction de date vérifiée. [ok] Traduction de drupal vérifiée. [ok] Traduction de email vérifiée. [ok] Traduction de entity vérifiée. [ok] Traduction de entityreference vérifiée. [ok] Traduction de eu_cookie_compliance vérifiée. [ok] Traduction de field_formatter_settings vérifiée. [ok] Traduction de field_group vérifiée. [ok] Traduction de field_permissions vérifiée. [ok] Traduction de geocoder vérifiée. [ok] Traduction de geofield vérifiée. [ok] Traduction de geofield_gmap vérifiée. [ok] Traduction de geophp vérifiée. [ok] Traduction de hybridauth vérifiée. [ok] Traduction de ip_geoloc vérifiée. [ok] Traduction de l10n_update vérifiée. [ok] Traduction de leaflet vérifiée. [ok] Traduction de leaflet_markercluster vérifiée. [ok] Traduction de leaflet_more_maps vérifiée. [ok] Traduction de libraries vérifiée. [ok] Traduction de media vérifiée. [ok] Traduction de memcache_storage vérifiée. [ok] Traduction de pathauto vérifiée. [ok] Traduction de role_delegation vérifiée. [ok] Traduction de select_or_other vérifiée. [ok] Traduction de services vérifiée. [ok] Traduction de token vérifiée. [ok] Traduction de views vérifiée. [ok] Traduction de views_data_export vérifiée. [ok] Traduction de wysiwyg vérifiée. [ok] Traduction du module colorbox_node téléchargée. [ok] Traduction de colorbox_node importée. [ok] Traduction du module ctools téléchargée. [ok] Importation de la traduction de ctools. (6%). [ok] Importation de la traduction de ctools. (16%). [ok] Importation de la traduction de ctools. (35%). [ok] Importation de la traduction de ctools. (54%). [ok] Importation de la traduction de ctools. (75%). [ok] Importation de la traduction de ctools. (88%). [ok] Traduction de ctools importée. [ok] Traduction du module date téléchargée. [ok] Importation de la traduction de date. (28%). [ok] Importation de la traduction de date. (72%). [ok] Traduction de date importée. [ok] Traduction du module drupal téléchargée. [ok] Importation de la traduction de drupal. (1%). [ok] Importation de la traduction de drupal. (2%). [ok] Importation de la traduction de drupal. (3%). [ok] Importation de la traduction de drupal. (5%). [ok] Importation de la traduction de drupal. (7%). [ok] Importation de la traduction de drupal. (9%). [ok] Importation de la traduction de drupal. (12%). [ok] Importation de la traduction de drupal. (15%). [ok] Importation de la traduction de drupal. (18%). [ok] Importation de la traduction de drupal. (20%). [ok] Importation de la traduction de drupal. (25%). [ok] Importation de la traduction de drupal. (30%). [ok] Importation de la traduction de drupal. (33%). [ok] Importation de la traduction de drupal. (39%). [ok] Importation de la traduction de drupal. (46%). [ok] Importation de la traduction de drupal. (52%). [ok] Importation de la traduction de drupal. (59%). [ok] Importation de la traduction de drupal. (66%). [ok] Importation de la traduction de drupal. (73%). [ok] Importation de la traduction de drupal. (79%). [ok] Importation de la traduction de drupal. (86%). [ok] Importation de la traduction de drupal. (92%). [ok] Importation de la traduction de drupal. (95%). [ok] Traduction de drupal importée. [ok] Traduction du module entity téléchargée. [ok] Importation de la traduction de entity. (58%). [ok] Traduction de entity importée. [ok] Traduction du module entityreference téléchargée. [ok] Traduction de entityreference importée. [ok] Traduction du module eu_cookie_compliance téléchargée. [ok] Traduction de eu_cookie_compliance importée. [ok] Traduction du module field_formatter_settings téléchargée. [ok] Traduction de field_formatter_settings importée. [ok] Traduction du module field_group téléchargée. [ok] Traduction de field_group importée. [ok] Traduction du module field_permissions téléchargée. [ok] Traduction de field_permissions importée. [ok] Traduction du module geofield téléchargée. [ok] Traduction de geofield importée. [ok] Traduction du module ip_geoloc téléchargée. [ok] Traduction de ip_geoloc importée. [ok] Traduction du module l10n_update téléchargée. [ok] Traduction de l10n_update importée. [ok] Traduction du module leaflet téléchargée. [ok] Traduction de leaflet importée. [ok] Traduction du module media téléchargée. [ok] WD l10n_update: Import of string "Ce processus est requis lors de l'installation de media sur un [error] site existant. Media nécessite de scanner les fichiers existants et d'identifier le type de fichier. Mettre à jour les types de fichier pour les fichiers @file ?&gt;" was skipped because of disallowed or malformed HTML. Importation de la traduction de media. (95%). [ok] Traduction de media importée. [ok] Traduction du module memcache_storage téléchargée. [ok] Traduction de memcache_storage importée. [ok] Traduction du module select_or_other téléchargée. [ok] Traduction de select_or_other importée. [ok] Traduction du module views téléchargée. [ok] Importation de la traduction de views. (3%). [ok] Importation de la traduction de views. (7%). [ok] Importation de la traduction de views. (16%). [ok] Importation de la traduction de views. (25%). [ok] Importation de la traduction de views. (39%). [ok] Importation de la traduction de views. (50%). [ok] Importation de la traduction de views. (64%). [ok] Importation de la traduction de views. (76%). [ok] Importation de la traduction de views. (90%). [ok] Traduction de views importée. [ok] Traduction du module views_data_export téléchargée. [ok] Traduction de views_data_export importée. [ok] WD l10n_update: 1 disallowed HTML string(s) in files: translations://media-7.x-1.4.fr_0.po. [warning] 19 translation files imported. 1732 translations were added, 0 translations were updated and 0 [status] translations were removed. One translation string was skipped because of disallowed or malformed HTML. See the log for [warning] details. </pre><p>La commande <strong>drush</strong> a pris quelques minutes à peine, pour importer 19 fichiers...</p> <p>Quand je vous dis que c'est un outil magique !</p> <p> </p> </div> <span rel="sioc:has_creator" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/users/vincentl" typeof="schema:Person" property="schema:name" datatype="">vincentl</span></span> <span property="dc:date dc:created" content="2016-07-27T13:57:50+00:00" datatype="xsd:dateTime" class="field field--name-created field--type-created field--label-hidden">mer 27/07/2016 - 15:57</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> <div class="field__item"><a href="/tags/drush" hreflang="fr">drush</a></div> <div class="field__item"><a href="/tags/traduction" hreflang="fr">traduction</a></div> </div> </div> <section class="field field--name-comment-node-blog field--type-comment field--label-hidden comment-wrapper"> </section> Wed, 27 Jul 2016 13:57:50 +0000 vincentl 160 at https://www.vincentliefooghe.net Cartographie Drupal : Views + Geofield Map https://www.vincentliefooghe.net/content/cartographie-drupal-views-geofield-map <span class="field field--name-title field--type-string field--label-hidden">Cartographie Drupal : Views + Geofield Map</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Dans les articles précédents (<a href="https://www.vincentliefooghe.net/node/153">stockage des données</a> notamment) , nous avons vu comment ajouter un champ de type <em>Geofield</em> et l'afficher sous forme de carte.</p> <p>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.</p> <pre>drush dl views drush en views views_ui geofield_map</pre><h2>Création de la vue</h2> <p>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).</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_085.png" title="Drupal-geoMapping_085.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_085.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_085.png?itok=YCEHlZB-" width="480" height="322" alt="Drupal-geoMapping_085.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Si on veut on peut également créer une page, tout dépend de ce que l'on veut faire.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_086.png" title="Drupal-geoMapping_086.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_086.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_086.png?itok=B8Gzm8XT" width="480" height="241" alt="Drupal-geoMapping_086.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On clique ensuite sur Continue &amp; Edit pour continuer la création de la vue.</p> <h2>Choix des champs</h2> <p>Par défaut, seul le titre est affiché :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_088.png" title="Drupal-geoMapping_088.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_088.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_088.png?itok=kBSVgYgt" width="423" height="338" alt="Drupal-geoMapping_088.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Il faut alors cliquer sur "Add", puis choisir le champ Coordonnées qui est de type <em>Geofield</em>.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_089.png" title="Drupal-geoMapping_089.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_089.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_089.png?itok=5vM8UZDC" width="480" height="139" alt="Drupal-geoMapping_089.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p> </p> <p>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.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_090.png" title="Drupal-geoMapping_090.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_090.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_090.png?itok=f9orS7TD" width="480" height="433" alt="Drupal-geoMapping_090.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On valide tout cela. Dans les chjamps, on doit donc avoir Title et Coordonnées.</p> <h2>Choix du format d'affichage</h2> <p>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 :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_091.png" title="Drupal-geoMapping_091.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_091.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_091.png?itok=aaxhzRbo" width="480" height="356" alt="Drupal-geoMapping_091.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>A ce niveau, on peut choisir "<strong>Geofield Map</strong>" :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_092.png" title="Drupal-geoMapping_092.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_092.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_092.png?itok=AO-twfL6" width="480" height="288" alt="Drupal-geoMapping_092.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>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 :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_093.png" title="Drupal-geoMapping_093.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_093.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_093.png?itok=hcUX_i5V" width="480" height="333" alt="Drupal-geoMapping_093.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>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 :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_094.png" title="Drupal-geoMapping_094.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_094.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_094.png?itok=4fE6acpH" width="480" height="232" alt="Drupal-geoMapping_094.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Si on clique sur l'un des marqueurs, le titre apparaît.</p> <h2>Amélioration de l'affichage</h2> <p>En modifiant la vue on peut facilement :</p> <ul> <li>Ajouter des informations dans la Pop-Up</li> <li>Permettre le scroll dans la carte (ScrollWheel)</li> <li>Mettre un niveau de zoom par défaut (Zoom / Zoom minimum et maximum)</li> </ul> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_096.png" title="Drupal-geoMapping_096.png" data-colorbox-gallery="gallery-all-dYQlb9N-wgA" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_096.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_096.png?itok=5YG0hAI2" width="480" height="329" alt="Drupal-geoMapping_096.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>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.</p> <p>C'est globalement la limite du couple Views + Geofield Map, qui offre un premier niveau de formatage, sans beaucoup de souplesse.</p> <p>On peut aller plus loin, avec d'autres modules. Ceci fera l'objet d'un autre article.</p> <p> </p> <p> </p> <p> </p> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/users/vincentl" typeof="schema:Person" property="schema:name" datatype="">vincentl</span></span> <span class="field field--name-created field--type-created field--label-hidden">mer 06/04/2016 - 22:08</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> <div class="field__item"><a href="/tags/cartographie" hreflang="fr">cartographie</a></div> </div> </div> <section class="field field--name-comment-node-book field--type-comment field--label-hidden comment-wrapper"> <article data-comment-user-id="0" id="comment-37" class="comment js-comment by-anonymous"> <mark class="hidden" data-comment-timestamp="1469172660"></mark> <footer class="comment__meta"> <p class="comment__submitted">Soumis par <span lang="" typeof="schema:Person" property="schema:name" datatype="">Qazema</span> le ven 22/07/2016 - 09:31</p> <a href="/comment/37#comment-37" hreflang="und">Permalien</a> </footer> <div class="content"> <h3><a href="/comment/37#comment-37" class="permalink" rel="bookmark" hreflang="und">Sympa ce tuto.J&#039;ai eu l</a></h3> <div class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item">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.</div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=37&amp;1=default&amp;2=und&amp;3=" token="lR-WekmowQGEFeNNV8QwfZx3Hke08bhfGSSSnDNb6z4"></drupal-render-placeholder> </div> </article> </section> Wed, 06 Apr 2016 20:08:56 +0000 vincentl 156 at https://www.vincentliefooghe.net Cartographie Drupal : utilisation de AddressField + Geocoder https://www.vincentliefooghe.net/content/cartographie-drupal-utilisation-addressfield-geocoder <span class="field field--name-title field--type-string field--label-hidden">Cartographie Drupal : utilisation de AddressField + Geocoder</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Dans la série Cartographie, nous avons vu <a href="https://www.vincentliefooghe.net/node/153">auparavant</a> quels modules utiliser pour stocker les données géographiques, et les présenter de manière simple.</p> <p>Cependant, à ce stade la saisie d'une adresse n'était possible que via ses coordonnées géographiques, ou sur une carte.</p> <p>Si on veut coupler la saisie d'une adresse et l'encodage, on peut utiliser 2 modules complémentaires :</p> <ul> <li><a href="https://www.drupal.org/project/addressfield">Address Field</a> : très utilisé dans Drupal Commerce, il permet de fournir un champ de saisie des adresses, de manière normalisée, avec un formulaire propre au pays</li> <li><a href="https://www.drupal.org/project/geocoder">Geocoder</a> : couplé avec Address Field, il pemettra d'encoder l'adresse pour la transformer en coordonnées géographiques.</li> </ul> <p>A priori, il semble qu'il faille également installer le module <a href="https://www.drupal.org/project/entity">Entity</a>, sinon on a des messages d'erreur de type :</p> <pre>PHP Fatal error: Call to undefined function entity_get_all_property_info() in /var/www/drupal/sites/all/modules/contrib/geocoder/geocoder.widget.inc on line 89</pre><p>L'installation des modules s'effectue normalement. Par exemple avec drush :</p> <pre>drush dl geocoder addressfield entity drush en geocoder addressfield entity</pre><h2>Address Field</h2> <p>Imaginons que nous voulions gérer des magasins dans plusieurs pays : France, Belgique, Suisse. Nous allons créer un type de contenu Magasin, avec un Nom, une description et y ajouter un champ Adresse :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_053.png" title="Drupal-geoMapping_053.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_053.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_053.png?itok=3--lLdyH" width="480" height="205" alt="Drupal-geoMapping_053.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Au niveau du Widget, on pourra alors sélectionner les pays : Belgium, France, Switzerland (pour la démo, j'utilise un site en anglais). Et définir la France comme pays par défaut.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_054.png" title="Drupal-geoMapping_054.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_054.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_054.png?itok=rvJmSdmZ" width="466" height="480" alt="Drupal-geoMapping_054.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>En saisie, on a alors le formulaire qui s'affiche, avec la France comme pays par défaut :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_056.png" title="Drupal-geoMapping_056.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_056.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_056.png?itok=oGqjZeNT" width="480" height="279" alt="Drupal-geoMapping_056.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Mais à ce stade, l'adresse est uniquement affichée de manière textuelle, car nous n'avons pas encore introduit l'encodage :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_057.png" title="Drupal-geoMapping_057.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_057.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_057.png?itok=raqFbVzs" width="373" height="280" alt="Drupal-geoMapping_057.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h2>Geofield + Encodage</h2> <p>Pour permettre la cartographie, il faut donc un champ qui stocke les coordonnées géographiques (apporté par Geofield). Le fait d'avoir ajouté le module Geocoder permet d'ajouter une option dans les Widgets :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_058.png" title="Drupal-geoMapping_058.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_058.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_058.png?itok=qierOp6x" width="480" height="174" alt="Drupal-geoMapping_058.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Lorsqu'on ajoute un champ de type Geofield, on peut alors sélectionner le widget de type "Geocode from another field". Au niveau des paramètres du champ, on laisse le défaut.</p> <p>On va ensuite choisir quel champ sera utilisé comme base de géocoding, et le "moteur" à utiliser. Plusieurs choix sont possibles :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_059.png" title="Drupal-geoMapping_059.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_059.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_059.png?itok=ElPdUAUx" width="480" height="380" alt="Drupal-geoMapping_059.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Ayant fait plusieurs tests, il faut bien avouer que c'est le service de Google qui est le plus pertinent, et quasiment le seul à trouver l'équivalence avec l'adresse. OpenStreetMap peut également renvoyer des résultats. Pour certains services (Yahoo, Bing, Yandex), il faut utiliser une clé d'API. Le service Yahoo semble payant.</p> <p>Dès lors, lorsqu'on saisit une adresse, celle-ci est envoyée au service de géocodage. Les coordonnées sont bien récupérées. Dans l'exemple ci-après, elles sont juste affichées au format WKT.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_060.png" title="Drupal-geoMapping_060.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_060.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_060.png?itok=Y2h68bOC" width="444" height="314" alt="Drupal-geoMapping_060.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>En effet, le paramétrage de l'affichage du champ est le suivant :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_061.png" title="Drupal-geoMapping_061.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_061.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_061.png?itok=4gETqrQV" width="480" height="81" alt="Drupal-geoMapping_061.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h2>Conclusion</h2> <p>Nous avons vu dans cet article comment utiliser les modules AddressField, Geocoder, Geofield et Entity pour ajouter un champ de type adresse et un champ de type Geofield sur un type de contenu, et récupérer les coordonnées géographiques de l'adresse via les services de Geocodage.</p> <p>Les données stockées dans le champ Geofield peuvent ensuite servir à l'affichage.</p> <p>Si on modifie le type de format du champ en Dynamic Google Map par exemple :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_062.png" title="Drupal-geoMapping_062.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_062.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_062.png?itok=1rJyqD5X" width="480" height="98" alt="Drupal-geoMapping_062.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>L'affichage se présente sous la forme d'une carte :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_063.png" title="Drupal-geoMapping_063.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_063.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_063.png?itok=ZW6Fznjx" width="451" height="480" alt="Drupal-geoMapping_063.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Dans de prochains articles, nous verrons comment intégrer Views et d'autres affichages (Leaflet par exemple)</p> <p> </p> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/users/vincentl" typeof="schema:Person" property="schema:name" datatype="">vincentl</span></span> <span class="field field--name-created field--type-created field--label-hidden">sam 12/03/2016 - 19:11</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> <div class="field__item"><a href="/tags/cartographie" hreflang="fr">cartographie</a></div> </div> </div> <section class="field field--name-comment-node-book field--type-comment field--label-hidden comment-wrapper"> </section> Sat, 12 Mar 2016 18:11:59 +0000 vincentl 154 at https://www.vincentliefooghe.net https://www.vincentliefooghe.net/content/cartographie-drupal-utilisation-addressfield-geocoder#comments Cartographie avec Drupal : stockage des données et affichage simple https://www.vincentliefooghe.net/content/cartographie-avec-drupal-stockage-des-donn%C3%A9es-et-affichage-simple <span class="field field--name-title field--type-string field--label-hidden">Cartographie avec Drupal : stockage des données et affichage simple</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Dans un précédent article (<a href="https://www.vincentliefooghe.net/content/cartographie-rapide-avec-drupal">https://www.vincentliefooghe.net/content/cartographie-rapide-avec-drupal</a>), j'ai montré comment on pouvait ajouter rapidement et en quelques modules des fonctions de cartographie.</p> <p>Dans cet article, nous allons aller un peu plus loin dans ce domaine, avec la présentation des principes et de différents modules.</p> <h2>Principes et composants de la cartographie</h2> <p>Lorsque l'on parle de cartographie, on pense souvent à la restitution des données. Google Maps a permis de démocratiser cet aspect.<br />Cependant, la chaîne complète repose sur un ensemble de composants :</p> <ul> <li><a href="stockage">Stockage des coordonnées géographiques (latitude / longitude)</a></li> <li><a href="#encodage">Encodage des coordonnées</a></li> <li><a href="#saisie">Saisie des coordonnées</a></li> <li><a href="#visu">Visualisation / restitution</a></li> </ul> <p>Pour chacun de ces composants, Drupal propose souvent plusieurs solutions, parfois incompatibles. Il convient donc de faire le bon choix afin de construire une solution globale pérenne et fonctionnelle.</p> <p>Nous allons voir, dans les différentes parties de cet article, quels sont les composants / modules Drupal que nous pouvons utiliser.</p> <p>Et pour ceux qui sont pressés et qui veulent rapidement mettre en oeuvre une solution, ils peuvent s'orienter vers le<a href="https://www.vincentliefooghe.net/content/cartographie-rapide-avec-drupal"> guide du mapping rapide</a>, qui permet d'avoir une solution complète en installant 5 modules :</p> <ul> <li>geophp : pré-requis pour les fonctions de géolocalisations</li> <li>ctools : pré-requis pour geofield et views</li> <li>geofield : stockage des données</li> <li>geofield_gmap : widget de saisie Google Maps pour le champ geofield</li> <li>views : pour l'affichage des différents contenus sur une seule page</li> </ul> <p><a name="stockage" id="stockage"> </a></p> <h2><a name="stockage" id="stockage">Stockage des données</a></h2> <p>Pour le stockage des données géographiques, c'est <a href="https://www.drupal.org/project/geofield">geofield</a> qui est le plus utilisé et le plus supporté.<br />Il nécessite en pré-requis les modules <a href="https://www.drupal.org/project/geophp">geophp</a> et <a href="https://www.drupal.org/project/ctools">ctools</a>.</p> <p>L'installation et l'activation du module via <em>drush</em> consiste donc en :</p> <pre>drush dl ctools geophp geofield <em> Project ctools (7.x-1.9) downloaded to sites/all/modules/ctools. [success] Project ctools contains 10 modules: term_depth, ctools_access_ruleset, views_content, page_manager, bulk_export, stylizer, ctools_ajax_sample, ctools_custom_content, ctools_plugin_example, ctools. Project geophp (7.x-1.7) downloaded to sites/all/modules/geophp. [success] Project geofield (7.x-2.3) downloaded to sites/all/modules/geofield. [success] Project geofield contains 2 modules: geofield_map, geofield. </em> drush en -y ctools geophp geofield <em>Do you really want to continue? (y/n): y ctools was enabled successfully. [ok] ctools defines the following permissions: use ctools import geofield was enabled successfully. [ok] geophp was enabled successfully. [ok] </em> </pre><p>A ce stade, on a uniquement un nouveau type de champ, qui peut être ajouté à des contenus.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_001.png" title="Drupal-geoMapping_001.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_001.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_001.png?itok=vviQGIEX" width="480" height="191" alt="Drupal-geoMapping_001.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h2><a name="saisie" id="saisie">Saisie des coordonnées</a></h2> <p>La saisie des coordonnées peut utiliser plusieurs options :</p> <ul> <li>saisie directe des valeurs de latitude, longitude</li> <li>définition d'une zone à partir d'une carte</li> <li>encodage à partir d'une adresse</li> <li>positionnement direct du marqueur sur une carte</li> <li>combinaison de l'adresse et du positionnement</li> </ul> <p>Le plus intuitif, à mon sens, reste la saisie d'une adresse et/ou le positionnement du marqueur sur la carte, qui est intéressant lorsque la position à saisir n'est pas une adresse (par exemple un point perdu dans la campagne ou la montagne...).</p> <h3>Défaut avec Geofield</h3> <p>Par défaut, une fois que <em>geofield</em> est installé, on peut voir sur la capture d'écran, que seuls 4 types de <em>widgets</em> sont disponibles par défaut :</p> <ul> <li>GeoJSON : données au format json</li> <li>Well Known Text (WKT) : format <a href="https://en.wikipedia.org/wiki/Well-known_text">WKT</a>, un format qui permet de définir le type de d'objet et ses coordonnées</li> <li>Latitude / Longitude : 2 champs de saisie, un pour chaque donnée</li> <li>Bounds : saisie de plusieurs points pour définir une frontière</li> </ul> <p>Dans notre exemple, nous avons choisi Latitude / Longitude. L'ajout d'un contenu de type POI demande donc la saisie de la latitude et de la longitude du point.<br />C'est précis, mais pas très intuitif.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_002.png" title="Drupal-geoMapping_002.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_002.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_002.png?itok=I5WySLLI" width="480" height="232" alt="Drupal-geoMapping_002.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p><p><br />Si on a activé la géolocalisation HTML 5, on peut récupérer la localisation actuelle du navigateur en cliquant sur "Find my location" .</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_003.png" title="Drupal-geoMapping_003.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_003.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_003.png?itok=RSCetiQY" width="480" height="278" alt="Drupal-geoMapping_003.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Dans ce deuxième exemple, on a changé le widget de saisie en GeoJSON. La saisie demande donc ce format, par exemple :</p> <pre>{"type":"Point", "coordinates":[3.1,50.0] } </pre><p> <article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_004.png" title="Drupal-geoMapping_004.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_004.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_004.png?itok=WBfJzrkg" width="480" height="312" alt="Drupal-geoMapping_004.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On constate également que l'affichage (pour l'instant) n'utilise que des champs textes : WKT, GeoJSON, KML, etc. :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_005.png" title="Drupal-geoMapping_005.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_005.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_005.png?itok=y79esEHv" width="480" height="272" alt="Drupal-geoMapping_005.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h3>Avec des widgets Graphiques</h3> <p>Plutôt que de faire une saisie manuelle des coordonnées, on peut vouloir placer le marqueur directement sur une carte. Pour ce faire, on peut utiliser plusieurs modules, tels que :</p> <ul> <li><a href="https://www.drupal.org/project/geofield_gmap">Geofield Gmap</a></li> <li><a href="https://www.drupal.org/project/leaflet_widget">Leaflet Widget for Geofield</a></li> </ul> <h4>Geofield Gmap</h4> <p>L'installation est simple avec <em>drush</em> :</p> <pre>drush dl geofield_gmap drush en -y geofield_gmap </pre><p>Une fois le module téléchargé et activé, on dispose d'un nouveau Widget pour notre champ Localisation : Google Map.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_014.png" title="Drupal-geoMapping_014.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_014.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_014.png?itok=hQtrM8Yo" width="480" height="251" alt="Drupal-geoMapping_014.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p><p><br />On peut alors entrer une adresse, ou une ville dans le champ d'adresse, mais aussi travailler directement sur la carte.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_016.png" title="Drupal-geoMapping_016.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_016.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_016.png?itok=aFreydQe" width="480" height="265" alt="Drupal-geoMapping_016.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>A ce stade, on a donc une saisie et un rendu graphiques de la localisation sur notre type de contenu, en ayant installé 4 modules : ctools, geophp, geofield et geofield_gmap.</p> <p>Ceci fonctionne bien pour un affichage individuel, mais si on veut afficher sur une seule carte les différents points, il va falloir aller plus loin et utiliser notamment les fonctionnalités de <em><a href="#views">Views</a></em></p> <p><a name="encodage" id="encodage"> </a></p> <h2><a name="encodage" id="encodage">Encodage</a></h2> <p>L'encodage consiste à transformer les données saisies en latitude / longitude, afin d'alimenter le champ <em>geofield</em>. Jusqu'ici, notre exemple n'a pas utilisé d'encodage, et il faut donc saisir ces données manuellement, ce qui n'est pas très <em>user friendly</em>.</p> <p>Des modules d'encodage à partir d'adresse sont souvent utilisés. Dans ce domaine, on utilise souvent le couple de modules :</p> <ul> <li>Address pour la saisie des adresses</li> <li>Geocoder pour l'encodage à partir de l'adresse saisie</li> </ul> <p>Cette partie sera traitée dans un autre article.</p> <p><a name="visu" id="visu"></a></p> <h2>Restitution / affichage</h2> <h3>Avec le module Geofield</h3> <p>Par défaut avec <em>geofield</em>, lorsqu'on visualise le contenu, le résultat est assez austère. L'affichage utilise le format WKT (Well Known Text). Par exemple :</p> <pre>POINT (3.1 50) </pre><p> <article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_010.png" title="Drupal-geoMapping_010.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_010.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_010.png?itok=obWml_2l" width="256" height="191" alt="Drupal-geoMapping_010.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On peut modifier cet affichage, pour voir les différents autres formats texte.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_008.png" title="Drupal-geoMapping_008.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_008.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_008.png?itok=uiDQCUUD" width="480" height="307" alt="Drupal-geoMapping_008.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Par exemple, si on choisit GeoJSON, on a alors les coordonnées en format JSON :</p> <pre>{"type":"Point","coordinates":[3.1,50]} </pre><p>Pour améliorer la restitution, on peut activer le module Geofield map qui permet d'avoir un nouveau formatter pour la visualisation.</p> <p>Une fois choisi Geofield Map, on dispose de beaucoup plus d'options pour l'affichage</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_013.png" title="Drupal-geoMapping_013.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_013.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_013.png?itok=Pg2_HIQA" width="474" height="480" alt="Drupal-geoMapping_013.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Le résultat est déjà plus intéressant ; quand on affiche un contenu, la localisation est affichée sous la forme d'une Map Google :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_009.png" title="Drupal-geoMapping_009.png" data-colorbox-gallery="gallery-all-bWCmYtHevIc" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_009.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_009.png?itok=HZ-P1taJ" width="480" height="349" alt="Drupal-geoMapping_009.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h3>Affichage avec d'autres modules</h3> <p>Il existe d'autres modules qui gèrent l'affichage du contenu, et qui peuvent être intégrés avec Views, afin de réaliser des cartes englobants plusieurs points.<br />Ces modules utilisent généralement des librairies Javascript, qui effectuent le rendu côté client.</p> <p>On peut citer notamment :</p> <ul> <li>Leaflet</li> <li>OpenLayers</li> <li>IP Geoloc</li> </ul> <p>Nous verrons dans un autre article comment utiliser Leaflet, avec des <em>clusters</em> de point et des icônes spécifiques selon une taxonomie.</p> <p> </p> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/users/vincentl" typeof="schema:Person" property="schema:name" datatype="">vincentl</span></span> <span class="field field--name-created field--type-created field--label-hidden">sam 12/03/2016 - 18:04</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/tags/cartographie" hreflang="fr">cartographie</a></div> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> <div class="field__item"><a href="/tags/planetdrupal" hreflang="fr">planetdrupal</a></div> </div> </div> <section class="field field--name-comment-node-book field--type-comment field--label-hidden comment-wrapper"> </section> Sat, 12 Mar 2016 17:04:17 +0000 vincentl 153 at https://www.vincentliefooghe.net Cartographie rapide avec Drupal https://www.vincentliefooghe.net/content/cartographie-rapide-avec-drupal <span class="field field--name-title field--type-string field--label-hidden">Cartographie rapide avec Drupal</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Comme nous le verrons dans cet article, il peut être très rapide d'ajouter des fonctions de cartographie sur un site Drupal, avec quelques modules simples.</p> <p>Nous allons ici travailler avec une poignée de modules : <a href="https://www.drupal.org/project/geolocation">geolocation</a>,  <a href="https://www.drupal.org/project/ctools">ctools</a>, <a href="https://www.drupal.org/project/views">views,</a><a href="https://www.drupal.org/project/ip_geoloc"> ip_geoloc</a> et <a href="https://www.drupal.org/project/libraries">libraries</a></p> <p>Quelques étapes seulement sont nécessaires pour y arriver :</p> <ul> <li>Activer les modules</li> <li>Créer ou modifier un type de contenu pour ajouter un champ de type "<em>geolocation</em>"</li> <li>Pour aller plus loin, créer une vue reprenant nos différents points de vue</li> </ul> <h2>Télécharger et activer le module Geolocation</h2> <p>Avec <em>drush</em> le téléchargement et l'installation se font en deux lignes de commande :</p> <pre>drush dl geolocation drush en geolocation geolocation_googlemaps geolocation_html5 </pre><p>Ceci active le module principal, ainsi que le "widget" Google Maps et la possibilité de géolocaliser via HTML5.</p> <h2>Création / Modification du contenu</h2> <p>Une fois le module activé, on peut ajouter un champ de type "Geolocation".</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_037.png" title="Drupal-geoMapping_037.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_037.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_037.png?itok=O9TafZI3" width="480" height="205" alt="Drupal-geoMapping_037.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On choisit alors le type de "<em>widget</em>" pour la saisie : Google Map (une carte), Latitude / Longitude (2 cases pour la saisie) ou la géolocalisation HTML5.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_038.png" title="Drupal-geoMapping_038.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_038.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_038.png?itok=aF-aigx_" width="438" height="178" alt="Drupal-geoMapping_038.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Voyons le comportement de chacun en saisie...</p> <h3>Latitude / Longitude</h3> <p>Dans ce mode, il faut saisir directement la latitude et longitude. Cela peut être intéressant si on dispose déjà de ces informations.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_039.png" title="Drupal-geoMapping_039.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_039.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_039.png?itok=MdOMrk-C" width="480" height="296" alt="Drupal-geoMapping_039.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h3>Géolocalisation HTML 5</h3> <p>Dans ce mode, lorsqu'on coche la case, le navigateur nous propose d'utiliser nos coordonnées.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_041.png" title="Drupal-geoMapping_041.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_041.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_041.png?itok=6O6gV4Tx" width="480" height="312" alt="Drupal-geoMapping_041.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_042.png" title="Drupal-geoMapping_042.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_042.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_042.png?itok=aIMAV7vk" width="480" height="341" alt="Drupal-geoMapping_042.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Ceci n'est évidemment intéressant que dans certains cas, lorsqu'on veut par exemple établir une localisation d'utilisateurs, ou éventuellement avec un site affiché sur mobile.</p> <h3>Google Map</h3> <p>Cette option est beaucoup plus visuelle. Elle s'appuie sur les API de Google Map pour réaliser un premier géocodage, à partir des informations saisies (via le bouton "Get location")</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_044.png" title="Drupal-geoMapping_044.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_044.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_044.png?itok=eyjwo214" width="480" height="266" alt="Drupal-geoMapping_044.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Dès lors, la carte s'affiche avec le marqueur, que l'on peut bouger (ceci se paramètre), afin d'affiner la position directement sur la carte.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_045.png" title="Drupal-geoMapping_045.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_045.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_045.png?itok=Ih5dyJIP" width="480" height="428" alt="Drupal-geoMapping_045.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h2>Visualisation</h2> <p>De la même manière que pour la saisie, le module propose différents types de formateurs : simple texte, latitude ou longitude en text, carte google map statique, carte google map dynamique, html5 map.<br />Voyons donc les différents modes de rendu / affichage.</p> <h3>Simple texte</h3> <p>Pas très visuel, on affiche uniquement les données de longitude et latitude.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_040.png" title="Drupal-geoMapping_040.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_040.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_040.png?itok=5k9vSHtu" width="415" height="223" alt="Drupal-geoMapping_040.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Par exemple, pour le mont Saint Michel on va trouver quelque chose comme</p> <pre>Geolocation is 48.63559154226376, -1.5108776092529297 </pre><h3>Texte simple Latitude ou Latitude</h3> <p>Ceci affiche sous forme de texte la latitude OU la longitude selon le choix défini, de la même manière que précédemment.</p> <h3>Carte Google Map Statique</h3> <p>Ce format d'afichage nous permet déjà de rentrer dans le monde de la cartographie, et d'afficher les coordonnées sur une carte. On dispose de quelques options : la taille de la carte, le format d'image (PNG 8 bits par défaut), le type (route, satellite, hybride) et le niveau de zoom.</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_046.png" title="Drupal-geoMapping_046.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_046.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_046.png?itok=8Oqaqs31" width="480" height="122" alt="Drupal-geoMapping_046.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>Tout ceci est réglable. Par défaut on obtient une carte statique (pas de zoom ni de déplacement).</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_047.png" title="Drupal-geoMapping_047.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_047.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_047.png?itok=8BdO6-lm" width="374" height="471" alt="Drupal-geoMapping_047.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h3>Carte Google Map dynamique</h3> <p>Nous allons ici un cran plus loin, avec une carte dynamique, sur laquelle on va pouvoir zoomer et scroller. De la même manière que précédemment, on pourra fixer la taille de la carte, le niveau de zoom par défaut et le type de carte (route, satellite).</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_048.png" title="Drupal-geoMapping_048.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_048.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_048.png?itok=m6s-3TQQ" width="380" height="480" alt="Drupal-geoMapping_048.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>C'est souvent ce type d'affichage que l'on utilisera avec ce module.</p> <p>On y retrouve les possibiltiés offertes par Google Map : zoom, déplacement de la carte, choix de l'affichage en mode route ou satellite.</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <h3>HTML5 Image</h3> <p>Cet affichage montre une planisphère, avec la localisation de manière très vague. Personnellement je ne vois pas trop l'intérêt ?</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_049.png" title="Drupal-geoMapping_049.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_049.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_049.png?itok=kZ6nIlfW" width="475" height="429" alt="Drupal-geoMapping_049.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <h2>Afficher plusieurs points sur la carte</h2> <p>Pour le moment, nous n'avons pu afficher qu'un seul point sur la carte, celui qui correspond à notre contenu.</p> <p>Si on veut aller plus loin, il faut passer par le module <em>Views</em>. Il faut cependant ajouter un module qui permettra de faire le lien entre <em>Geolocation</em> et <em>Views</em> : <a href="https://www.drupal.org/project/ip_geoloc">IP Geolocation Views and Maps</a>. Sans cela, il ne sera pas possible d'afficher une seule carte avec tous les contenus.<br />Commençons par télécharge et activer ces modules (<em>libraries</em> est un pré-requis pour ip_geoloc):</p> <pre>drush dl ctools views ip_geoloc libraries drush en ctools views views_ui ip_geoloc libraries</pre><p>Il faut alors créer une vue, qui va afficher les champs de nos contenus. On peut choisir un format "Map (Google API)" :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_050.png" title="Drupal-geoMapping_050.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_050.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_050.png?itok=RErv7Mu3" width="480" height="291" alt="Drupal-geoMapping_050.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>ainsi que le champ qui contient les données de géolocalisation, le type de marqueur, etc. :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_051.png" title="Drupal-geoMapping_051.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_051.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_051.png?itok=gPwOFNo_" width="480" height="386" alt="Drupal-geoMapping_051.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>On sauvegarde et on peut alors voir le résultat :</p> <p><article class="media media--type-image media--view-mode-default" data-align="center"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"><a href="https://www.vincentliefooghe.net/sites/default/files/Drupal-geoMapping_052.png" title="Drupal-geoMapping_052.png" data-colorbox-gallery="gallery-all-Ql3WHMi3B4o" class="colorbox" data-cbox-img-attrs="{&quot;alt&quot;:&quot;Drupal-geoMapping_052.png&quot;}"><img src="/sites/default/files/styles/large/public/Drupal-geoMapping_052.png?itok=a4V0D4qY" width="480" height="234" alt="Drupal-geoMapping_052.png" typeof="foaf:Image" class="image-style-large" /> </a> </div> </div> </article> </p> <p>D'autres paramètres sont disponibles dans le module IP Geolocation : choix du marqueur, niveau de zoom et centre de la carte par défaut, etc. C'est un module très riche, et qui peut également s'interfacer avec d'autres modules tels que Leaflet, si l'on ne veut pas dépendre de Google Maps.</p> <p>On peut aussi afficher des marqueurs différents, sur la base d'une taxonomie liée au contenu, par exemple</p> <h2>Conclusion</h2> <p>Nous avons vu qu'il est possible très rapidement d'ajouter des fonctions de cartographie dans Drupal. Nous verrons dans d'autres articles qu'il existe plusieurs modules permettant d'arriver au même résultat, avec plus ou moins de richesse et de souplesse.</p> <p>L'avantage du module Geolocation est de proposer une approche tout en un : stockage des coordonnées, widget de saisie et modes d'affichage. Par contre, il n'est pas possible d'avoir une version textuelle de l'adresse en plus de la carte. C'est l'une des limitations de ce module.</p> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/users/vincentl" typeof="schema:Person" property="schema:name" datatype="">vincentl</span></span> <span class="field field--name-created field--type-created field--label-hidden">mar 26/01/2016 - 11:40</span> <div class="field field--name-field-categorie field--type-entity-reference field--label-above"> <div class="field__label">Catégorie</div> <div class="field__item"><a href="/cat%C3%A9gorie/cms" hreflang="fr">CMS</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tag</div> <div class="field__items"> <div class="field__item"><a href="/taxonomy/term/1" hreflang="fr">Drupal</a></div> <div class="field__item"><a href="/tags/cartographie" hreflang="fr">cartographie</a></div> </div> </div> <section class="field field--name-comment-node-book field--type-comment field--label-hidden comment-wrapper"> <article data-comment-user-id="0" id="comment-31" class="comment js-comment by-anonymous"> <mark class="hidden" data-comment-timestamp="1459969823"></mark> <footer class="comment__meta"> <p class="comment__submitted">Soumis par <span lang="" typeof="schema:Person" property="schema:name" datatype="">bv</span> le mer 06/04/2016 - 18:56</p> <a href="/comment/31#comment-31" hreflang="und">Permalien</a> </footer> <div class="content"> <h3><a href="/comment/31#comment-31" class="permalink" rel="bookmark" hreflang="und">Lorsque je créai une view</a></h3> <div class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item">Lorsque je crée une view pour afficher ma carte dans un block, je ne vois pas le format "Map (Google API)" .J'ai mon champ Localisation qui m'affiche : sds Geolocation is 48.63559154226376, -1.5108776092529297 au lieu de la carte attendue.  J'ai installé tous les modules. La carte s'affiche lorsque je crée simplement un type de contenu avec le champ Localisation comme dans le tuto.</div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=31&amp;1=default&amp;2=und&amp;3=" token="AdOMnN7KH7DXBOIGOCFas3SwAJ09LdE-7tgzrZXxvLQ"></drupal-render-placeholder> </div> </article> <article data-comment-user-id="0" id="comment-32" class="comment js-comment by-anonymous"> <mark class="hidden" data-comment-timestamp="1459962720"></mark> <footer class="comment__meta"> <p class="comment__submitted">Soumis par <span lang="" typeof="schema:Person" property="schema:name" datatype="">bv</span> le mer 06/04/2016 - 19:12</p> <a href="/comment/32#comment-32" hreflang="und">Permalien</a> </footer> <div class="content"> <h3><a href="/comment/32#comment-32" class="permalink" rel="bookmark" hreflang="und">View : affichage carte</a></h3> <div class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item">J'ai réussi à choisir le format "Map (Google API)".La suite, je n'arrive pas à afficher la carte.. Je ne sais pas quoi choisir parmi les options. Je ne sais pas où je dois dire qu'il faut qu'il récupère les infos du champ "localisation" de mon type de contenu . ..dans  -&gt; Grouping field Nr.1ou dans -&gt; Name of latitude field in Views query et Name of longitude field in Views query   </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=32&amp;1=default&amp;2=und&amp;3=" token="iiGy4ySxw4N1Qbm3yURpzVuWzNAAg6YPisRJjNTX0KE"></drupal-render-placeholder> </div> </article> </section> Tue, 26 Jan 2016 10:40:57 +0000 vincentl 147 at https://www.vincentliefooghe.net https://www.vincentliefooghe.net/content/cartographie-rapide-avec-drupal#comments