L'intermédiaire

familledaccueil-inclusive.be est un site one page que j’ai réalisé pour l’association La Vague ASBL. J’y ai inclus une carte interactive afin d’afficher et de filtrer les associations d’accompagnement pour enfants et adultes en situation de handicap situées en Belgique. Je vous propose, à travers cet article, une description du projet.

Site « One page »

Oui, il s’agit d’une page, pas plus. En réalité, le site possède également une page 404 habituelle et on ne peut pas vraiment dire qu’il s’agisse d’un site web proprement dit, mais plutôt d’un outil. La particularité de ce projet était d’afficher différents lieux à travers une carte interactive. Avec le web, c’est tout à fait possible et vous avez, comme toujours, plusieurs méthodes. Vous pouvez soit passer par une carte SVG que vous auriez dénichée sur la toile afin d’y placer les différents points (PINS) dans le code, dans le but d’y établir des interactions (actif / passif, filtres, etc.), soit opter pour une API de carte recouvrant, dans la plupart des cas, les longitudes et latitudes des adresses recherchées. Je vous propose de parcourir ces deux solutions.

Un SVG ou une API ?

Personnellement, j’ai choisi, pour ce projet, de passer par une API. Pour avoir déjà expérimenté le SVG, j’ai opté pour la deuxième méthode, mais cela dépendra, à mon sens, de votre projet.

Je suis passé par un SVG quand la carte ou la zone du pays demandait des animations, des changements de couleurs importants ou qu’il s’agissait uniquement d’une portion de la carte qu’il fallait au préalable découper ou travailler via un logiciel de PAO (Illustrator, par exemple). Pour rappel, le SVG est un format vectoriel ; c’est donc bien du code que vous allez pouvoir ensuite travailler et dans lequel vous pourrez placer des données dynamiques. C’est intéressant, mais le code d’un SVG (et pas d’une simple icône) est parfois très lourd et il est difficile de s’y retrouver. Enfin, les points ne se situent pas via des latitudes et longitudes connues des GPS ou des cartes mondiales ; il vous faudra donc placer les points via votre logiciel de PAO en amont du projet. Je vous laisse imaginer les difficultés que cela représente quand vous devrez ajouter une nouvelle adresse / point à votre carte faite maison…

J’utilise donc le SVG quand la carte ne bougera pas trop et pour des raisons visuelles liées au projet. L’API est plus adaptée, à mon sens, pour la dynamisation des données que nous souhaitons afficher via une carte. Mais laquelle choisir ? C’est le point suivant.

Quelle API choisir pour dynamiser une carte interactive ?

Il y en sans doute plus d’une dizaine mais je travaille depuis longtemps sur deux d’entre elles. J’ai déjà écris sur le sujet. Vous pouvez aller lire mon article Google Map et le calcul kilométrique qui utilise l’API de Google : Google Map ou encore l’article Leaflet ; une alternative à Google Map. L’une des deux est open source, je vous laisse deviner laquelle … 🙂

Dans le cadre du projet, j’ai opté pour l’API Leaflet, qui permettait d’atteindre tous les objectifs du prestataire. Ce dernier voulait pouvoir ajouter, éditer ou supprimer des associations qui, avec les coordonnées latitude/longitude, s’afficheraient dynamiquement sur une carte de la Belgique. Concrètement, vous chargez la bibliothèque de Leaflet et, avec du JavaScript, vous jouez sur les interactions du visiteur (filtres, zoom et reset). Mais ce n’est pas tout : Leaflet permet de styliser la carte et de la rendre ainsi en phase avec le design que vous aviez établi au préalable. Comme avec Google Maps, vous pouvez y ajouter des points/pins et les rendre cliquables. À la différence de Google Maps, Leaflet n’est pas payant. En effet, Google Maps a un quota de vues/interactions qui, une fois dépassé, vous demande de passer à la caisse. Il n’est d’ailleurs plus possible d’obtenir une clé API avant de lier le projet à un moyen de paiement. Bref, c’était compliqué de mettre cela en place pour une association et pour un résultat identique avec Leaflet, j’ai préféré choisir Leaflet.

familledaccueil-inclusive.be : un one page dynamique

Comme les données sont dynamiques, il fallait créer un accès restreint aux personnes qui pouvaient en modifier le contenu. D’habitude, vous le savez maintenant avec moi, je choisis dans ce cas mon CMS préféré : WordPress. Mais dans ce cas-ci, les données n’étaient pas conséquentes, il n’y avait pas de système de blog et comme déjà répété, il s’agissait d’un site d’une page.
J’ai donc donné la possibilité à mon partenaire de modifier le contenu avec un tableur Drive en ligne dont les données étaient publiquement accessibles, mais d’une manière différente ; à l’aide d’une carte interactive. Pour plus de détails sur cette application, eh bien, vous pouvez aller lire ou relire mon article précédent qui explique tout cela : Afficher les données d’un Google Sheet. Autrement dit, les admins modifient le site via un tableur en ligne, d’ailleurs visible ici.

Conclusion

Voilà, je pense avoir tout dit. Vous comprendrez facilement que c’est encore une fois le JavaScript qui fait le travail ici. C’est via le JavaScript que j’affiche les données, que je colorie le contour de la carte de la Belgique, ainsi que toutes les couleurs. C’est par le JavaScript que je parle à l’API Leaflet et que j’écoute les interactions du visiteur. C’est donc le fichier principal du projet, inclus dans mon template fait maison, qui a tout pour être référencé et sécurisé.

Au final, voilà un nouveau site web à ajouter à ma liste, et en plus, pour une association dont les objectifs sont nobles : que demander de plus ?