Articles dynamiquement cartographiés

Notre équipe de pigistes sort des proses à tire-la-rigole et c’est super chouette méga kikoo. Mais plusieurs questions ont taraudé nos esprits : comment booster la chose, comment lui donner un goût de nouveauté, comment lui apporter du dynamisme tout en servant la cause de chacun ? Nous avons consulté l’oracle. Il nous a guidé et soutenu dans la confection du tintouin.

C’est parti pour la mise en place d’une idée de foufou

Avec Anne Onlymousse (la seconde webmaîtresse du site), nous nous sommes concertées pour savoir ce qu’on pourrait bien apporter en terme de dynamique pour les articles. Oui, c’est bien moignon d’en faire sortir à la pelle par nos écrivaines chevronnées (ce qui m’ammène à penser que nous, les pelles, on les utilise pour construire et non pour faire l’inverse) mais que pourrait-on leur apporter comme plus-value ? Comment les mettre en valeur et par quels biais ? Oui, car on ne va pas se mentir : les blog des sites, tout le monde s’en tamponne le coquillard avec un tibia de langoustine (tu connais combien de kiki qui lisent le blog de Pronhub ?! Perso aucun. Et savais-tu seulement qu’ils avaient un blog déjà, hein ?!).

Alors nous avons fait comme Néo : nous avons consulté l’oracle. Notre oracle à nous, le bienveillant, le suisse. Cet oracle, certes imaginaire mais bien réel. Celui qui ne nous l’a faite jamais à l’envers. Jamais. Ce qui est cool avec lui c’est qu’il n’oeuvre pas dans le négatif ni dans la destruction. Il ne nous hait point en secret. Il ne peut pas faire de secret. Tu ne peux que créer avec. Un amour. Bref, on a pris des cookies certes mais on a aussi pris une fort bien chouette idée de fifou.

L’objectif : une carte intéractive qui répertorie toutes les prestations effectuées. Cette carte dynamique récupère donc tous les articles du blog et les place géographiquement. A chaque publication d’un nouvel article, un extrait de ce dernier muni d’un heading + quelques infos est automatiquement récupéré et affiché.
D’après l’oracle : notre level ovni dans le paf est monté d’un cran (et je pense qu’il est sincère).
Muy Bien.

Il fait beau, remplis-moi

Mise en place des meta-box utiles dans l’interface admin et remplissage des champs requis pour la population des données et le remplissage automatique de la carte. Il est question de remplir 7 champs :

• coord gps
• id de l’img
• département
• lieu
• Type de presta
• Matos déployé
• Petit descriptif mignon et concis

7 champs à multiplier par environ 120, 120 étant le nombre d’épopées originales, d’environ 1000 à 1500 mots, écrites avec style, passion, poésie et humour, réalisées jusqu’à ce jour grâce aux efforts de Julianna et de Lucie_FR (Nous les remercions encore).

Et puisqu’on est dans une ambiance cartographièsque, il va de soi que les coordonnées GPS de chaque lieu soient fixées propre. Go la recherche des points et saluons la chronophagie de la chose au passage (nous avons mis toute l’équipe sur le coup : la production d’articles fût momentanément interrompue)

Pour ce faire, un site rudement utile : coordonneesgps.net

Sinon, après nous être rendu compte que tous les points sus-mentionnés n’étaient pas listés sur le site précédemment cité, nous avons trouvé une méthode toute simple, encore plus simple finalement, pour récupérer les coordonnées gps en degrés décimaux (DD) d’un lieu (ça se passe sur PC) : ouvrir le GoogleMap, sélectionner l’endroit qui par défaut nous intéresse, effectuer un click droit et pouf, une fenêtre pop-up s’ouvre. les coordonnées (latitude et longitude) au format décimal (ceux dont nous avons besoin pour renseigner la meta-key s’affichent en haut de la page. Un simple click dessus et c’est automatiquement copié dans le presse-papier. Ils ont pensé à tout… Voir la réponse la réponse de GG bien plus sérieuse.

Avec ou sans filtre ?

Nous avons également mis en place des filtres de recherches. La recherche peut s’effectuer soit par ville, soit par matériel mis en place soit par département. Un champ pour du mot-clé libre a été confectionné également (copyright Phenix Event (Julien) sur le placeholder). Pour le reset de tous les filtres, un simple bouton « réinitialiser » vit le jour.

Contraintes rencontrées au fil de l’élaboration du biniou

Des plugins, nous n’en créeons pas tous les jours. Nous avons donc fait face à certains petits soucis pour la mise en oeuvre propre, sans mouilles dans le potage.

Le navigateur (oé oé capitaine…💜)

Bon, encore faut-il gérer le côté navigateur de la chose : ouais, car faire du dynamique c’est bien mignon, gentil, toussa toussa, mais si on ne le force pas à mettre à jour les données, rien ne sera mis à jour en « temps réel » ou du moins à chaque fois que la carte sera à nouveau consultée (d’autant plus que la politique de cache déclarée dans notre bui-bui est d’un mois et des bananes). Donc on enqueue gentiment le script avec un filemtime qui va bien. True est conservé pour la déclaration en toute fin de chargement. Alors filemtime rajoute une version au fichier, donc de la longueur au fichier, certes, mais à ce niveau-là, on s’en branlouz un peu… Au moins, je suis sûre que la version la plus fraîche est récupérée.

Overflow masqué et tronquerie

Après test en environnement mobile, je me suis aperçu que lors du click sur le pop-up, l’image sortait du flow (hauteur trop grande) et ressortait du coup tronquée. Nul. Pour pallier : -> ajout dans le JS principal (avec une balise style) d’un aspect-ratio:16/9, d’un object-fit et d’un width à 100%. Maintenant, à chaque passage d’un pop-up à l’autre, le navigateur passe d’icons en icons de façon fluide et ajuste automatiquement sa hauteur en fonction de l’image. Elle ne sort plus du cadre. On est pas mal.
Pour l’instant on t’a claqué ça dans le script pour accélerer le truc mais ça partira dans la css à un moment ou un autre. La feuille css est la pour pimper 💄.

Taillons des… images

Ajout d’une condition pour l’image illustrative récupérée & générée : ne sortir que les tailles 300, 600 et 1024 (quoique peut-être un peu trop grande…). Quel interêt de claquer les autres avec ? Aucun. ‘fin je n’en vois pas.

Gérer la superposition des points

Etant donné que ce sont souvent les même salles qui reviennent dans les installations (il n’y a pas 300 000 salles dans la zone), et comme les coordonnées renseignées sont les coord précises des salles (autant être précis et honnête dans les données… faire dans le flou ou dans « l’à peu près en fonction de » ne nous intéresse pas) il y a de fortes probabilités pour que des points se chevauchent : par exemple, 3 prestas réalisées dans la même salle mais en des dates différentes vont automatiquement générer 3 icônes superposées. Donc, seulement 1 seul article sera visible, donc la visibilité pour l’utilisateur des autres est inexistante (seul le robot les verra, mais on s’en fout un peu d’eux), donc l’UX est pété.

Pour pallier à cela, l’équipe qui a développé Leaflet 💛💙 (ou un des dev, coeur à lui aussi) a imaginé et conçu un script permettant de séparer les points aux même coordonnées et de les faire tenir en grappe. Le fichier en question permettant de réaliser ce tour de force se nomme leaflet.markercluster.js. C’est bougrement pas con et ça résoud bien des problème. Respect.

Caractères non-décodés

Les caractères qui ne s’encodent pas correctement, c’est frustrant et c’est « inlecturable ». Bref c’est pénible. Par exemple, les H3 récupérés dans les pop-up affichaient des « ’ » (entité HTML de l’apostrophe).

Pour régler le problème d’entités HTML, il faut appliquer html_entity_decode() au moment où est récupéré le titre avec get_the_title() avant de le mettre dans le tableau des datas.

$data[] = [
  'title'       => html_entity_decode(get_the_title()),

Par la suite, dire au JS de les échapper :

  function escapeHtml(unsafe) {
    if (typeof unsafe !== 'string') return '';
    return unsafe
      .replace(/&/g, "&")
      .replace(//g, ">")
      .replace(/"/g, """)
      .replace(/'/g, "'");
  }

Reste à pimper

Actuellement, la chose et toute la mécanique qu’elle contient est « terminée ». En tous cas, ainsi elle nous plaît. Ne nous reste qu’à faire joli les boutons, aligner et harmoniser… cela se fera au fil du temps et dès que le temps nous le permettra.

Où trouver cette carte interactive ?

Pour le moment, nous avons fait le choix de la claquer tout seule sur sa propre page =>Voir la carte des prestations Phenix Event. Là, dans un premier temps, elle est bien. Bien évidemment et vu la portabilité de la chose, elle ira trouver sa place encore ailleurs.

Somme toute

Bon ça n’aura pas été super simple, ça aura été relativement long, mais la mise en place et en fonction de cette carte répertoriant dynamiquement tous nos pâtés est une expérience sympa et au delà-de ça, me donne plein d’idées. L’ampleur qu’elle représente à nos yeux et les applications de l’outil sont juste incroyables. C’est juste de la furie… Tout plein d’idées d’un coup. Va falloir faire le tri (et c’est là que ça devient encore plus dur).

Angeleak

Voir tous ses articles