A quoi ça ressemble une carte de France avec port du masque obligatoire ?

C’est un peu la question que je me suis posée hier. J’étais au bureau devant Twitter à défiler mon fil d’actualité, au moment de relever la tête je me suis aperçu d’une chose : nous étions tous masqués.

Car oui, depuis le 1er septembre les masques sont obligatoires sur le lieu de travail.

Ça commence avec un café.

Du coup, je me suis demandé (un peu comme pour l’histoire des 100km) à quoi ressemblait le paysage français avec le masque obligatoire dans les lieux publics.

En réalité, il s’agit d’une question reçue par email (coucou Gilles) il y a quelques jours. J’avoue que j’aimais beaucoup l’idée sans vraiment arriver à voir comment m’en sortir.

J’ai imaginé beaucoup de façon de présenter l’information, mais sans réellement déterminer un point de départ et un point d’arrivée. Tout cela était encore un peu flou, très désordonné et réellement complexe à appréhender. Mais bon, le défi était là, l’envie aussi et surtout il y a un résultat qui peut être intéressant à partager;

À force de lancer des projets dans tous les sens, je sais qu’il faut que je me pose avec un café et un carnet pour mettre à plat cette idée.

Voici ce que j’avais listé :

• Retrouver une explication de la volonté du site : afficher une carte des zones au port obligatoire du masque
• Retrouver une carte de France avec zoom par ville
• Pouvoir retrouver des liens pratiques concernant le port du masque (pour démystifier un peu le sujet)

J’avais commencé par une première version très light qui ne comprenait qu’un paragraphe explicatif et une carte. Après réflexion, je me suis tourné vers une itération un peu plus verbeuse du concept.

J’y étais presque : du texte et une carte. Il ne restait plus qu’à mettre un peu d’huile de coude pour donner vie à ce site. Et à lui trouver un nom explicite : portdumasque.com.

Une difficulté majeure : personne ne fait la même chose ou de la même façon.

Le principal défaut d’une telle carte est la source des données. Lorsque j’ai commencé le projet, le zoom était possible pour aller au plus proche des villes concernées.

Ceci permettait d’aller chercher si la rue que l’on visite actuellement est sujette au port du masque ou non. Cependant, cette information n’est pas disponible de façon uniforme.

Les données sont précieuses, ne les partageons pas trop.

C’est un peu ce que j’ai pensé. La mairie de Paris a mis à disposition un jeu de données avec les rues concernées, la ville de Lille un joyeux PDF avec une carte non clickable et peu lisible, d’autres communes ont juste dit : « partout dans le centre« .

Bon, ça ne m’aidait pas vraiment du coup. J’ai dû alors trouver un plan B.

Les relations presses, c’est cool.

L’avantage d’Internet, c’est de trouver des informations sur tout et partout. Dès que les premiers articles sont sortis à propos du port du masque, j’ai commencé à collecter dans une note l’ensemble des villes concernées, au cas où.

Puis d’autres articles plus complets ont vus le jour et m’ont permis d’aller plus loin dans le listing des zones à afficher sur la future carte.

J’ai du changer ma façon de stocker l’information. Une note, ça ne suffisait plus.

Les bases de données, avouons-le : c’est chiant.

Au tout départ, j’étais parti dans l’idée de créer un bon gros CMS avec des formulaires, des données structurées, disponibles sur un serveur auto scalable, des process de connexion un peu tordus … Et finalement, j’ai repris mon outil fétiche : le tableur.

Toutes les données du site proviennent d’une feuille Google Sheets.

Il y a un énorme intérêt à passer par un tableur : c’est carré et c’est facile. De plus, on peut y créer des macros pour gagner du temps, mais aussi utiliser des fonctions assez pratiques.

En l’occurrence, j’y ai classé l’ensemble des villes (pas les rues, l’info n’est pas encore ultra disponible) où le port du masque en lieu public est recommandé.

Puis, j’ai commencé à jouer avec les formules pour générer les points chauds de la carte. Tout se passe en JavaScript avec un objet à paramétrer. D’où les colones D, E et F qui me servent à formuler correctement mes données sous cette forme :

new google.maps.LatLng(49.4769199,3.4417368)

Ceci était réservé à la première version qui ne m’a pas convaincu bien longtemps car elle n’affichait que des points légers. Je préférais une distinction par regroupement de villes avec une notion d’épaisseur de points chauds.

location: new google.maps.LatLng(49.4769199,3.4417368), weight: 1

Ainsi, j’ai pu avoir une carte qui avait enfin un peu de gueule. Et qui reflète réellement la situation actuelle sur le port du masque.

Appel aux volontaires !

Désormais, l’étape cruciale est de retrouver un peu de finesse dans la donnée. La première étape a été de proposer des villes, mon but est de proposer des rues à l’intérieur des villes.

Plutôt que de partir seul à l’aventure, j’ai ajouté un formulaire de saisie pour récupérer les indications des internautes. Après tout, nous savons bien quelles rues proches de nous sont sujettes au port du masque.

Une nouvelle fois, j’ai utilisé une feuille Google Sheets que je manipule à distance avec un ensemble d’instructions JavaScript. Ceci me permet de me dégager de toute difficulté de maintenance et de manipulation de données dans une base type MySQL.

Ces données, une fois collectées et transformées, serviront à proposer une vue plus proche de la réalité. Il suffit « juste » que nous soyons nombreux à participer.

J’ai failli utiliser un Google Forms pour cette partie, mais soyons directs entre nous : ce n’est pas très joli en iframe sur un site ^^

La suite. La suite !

Après un certain temps de collecte, je mettrais à jour manuellement la carte avec un déblocage du zoom. J’ai hâte !