Imprimer une carte intéractive en 24h chrono

Dans Google Maps, il n’y a pas d’option « Exporter cette zone au format jpeg » pour pouvoir imprimer une zone qui nous intéresse. La seule méthode à disposition est de faire des captures d’écran et de les assembler une à une 

Mais comment faire lorsque le temps est limité et que la sécurité nationale en dépend?

Les cartes intéractives

Google Maps est ce qu’on appelle une « carte intéractive ».
C’est une carte avec plusieurs niveaux de zoom, qui se télécharge au fur et à mesure que l’on se déplace dans la carte.

Et heureusement qu’elle ne se télécharge qu’au fur et à mesure, car sinon pour la seule ville de Paris il faudrait télécharger quelques Go de données pour la consulter.

D’ailleurs l’application Google Maps sur mobile permet de mettre en cache une zone donnée.

Mettre en cache dans Google Maps
Mettre en cache dans Google Maps (source : lifehacker.com)

Cette opération prend du temps et consomme de la mémoire, mais une fois que c’est fait il n’y a plus besoin de télécharger la carte quand on la consulte sur place. Ce qui est pratique lorsqu’on est à l’étranger ou qu’on ne capte pas le réseau.

C’est plus généralement le principe des applis du type plans hors-ligne.

Le problème de l’impression

Alors des cartes interactives c’est très bien, mais le problème c’est qu’il est compliqué de les imprimer.

Aujourd’hui c’est l’ère de la dématérialisation. Si vous regardez cette sélection d’App-Types vous voyez qu’aujourd’hui tout devient numérique.

selection-1
Chaque objet du quotidien va finir transformé en appli. Sauf le smartphone.

Néanmoins on a toujours beaucoup d’avantages à imprimer des plans sur papier :

  • On peut dessiner dessus ou prendre des notes
  • On voit plus de choses sur un A4 que sur un smartphone. Même quand c’est une phablette.
  • On peut facilement en imprimer plusieurs exemplaires

Et imprimer correctement ce type de plan est assez technique :
Il faut d’abord choisir un niveau de zoom, et ensuite récupérer des successions de captures d’écran à assembler.
Plus on veut de détails sur le plan, plus il faut de captures.

En général c’est à ce moment qu’on réalise que ça va être la grosse galère, et on lâche l’affaire.

Le cas du Forum des Halles

Mais dans mon contexte je ne pouvais pas laisser tomber, car j’étais en pleine préparation d’un jeu de piste au Forum des Halles à Paris.

ban

Il me semblait très judicieux d’imprimer pour l’équipe un plan du nouveau forum des halles.
Et sur le site du forum, on ne peut pas télécharger un plan de chez eux.
On n’est en 2016 et le forum vient de finir ses travaux avec la Canopée, donc on ne va pas leur en vouloir.

En fait sur leur site, on trouve juste une carte intéractive.
Et comme prévu, c’est galère à imprimer correctement.

La vue d'ensemble du plan, sur laquelle il n'y a aucun détail
La vue d’ensemble du plan, sur laquelle il n’y a aucun détail

Sur leur plan il y a plusieurs étages, et si on veut avoir le nom de toutes les boutiques il faut zoomer à max. Ce qui fait potentiellement beaucoup d’images à récupérer.
En plus c’est mal fait on ne peut pas se mettre en plein écran pour faire une bonne grosse capture (comme avec Google Maps).

Je ne vous ai pas dis, mais dans notre équipe c’est moi qui joue le rôle de Chloé O’Brian.
Vous connaissez? Dans 24h chrono c’est la super forte en informatique qui aide Jack Bauer à arrêter les attentats.

mysuperlamepic_01c04f1480d14b89d35dcee5afa7100f

Bref vous l’avez deviné, les jeux de pistes avec moi ça ne rigole pas. J’adore faire ça comme au cinéma 
Et là pour sauver Paris pas le choix il fallait que j’arrive à récupérer un plan du forum 

Aspirer le plan

L’idée est de comprendre comment marche cette carte, pour arriver à la récupérer (ou à l’aspirer, dans le jargon).

Donc premier réflexe regarder le code source de la page. C’est là que ça devient un peu technique.
Ceux qui paniquent à l’évocation du mot « code source » vous pouvez passer directement à la partie suivante.

Pour rappel dans Chrome on fait Menu > Plus d’Outils > Outils de développement, et on reste dans l’onglet Elements.

Ensuite on utilise l’outil « inspecter » tout en haut à gauche, et on va cliquer sur le plan, pour voir le html au niveau du plan.
Constatation : on voit plein d’éléments avec des classes préfixées leaflet-.

Direction Google, et on comprend que Leaflet est la librairie open-source qu’ils ont utilisé pour faire leur plan intéractif.

logo

Leaflet

On pourrait aller voir ce qui se passe dans le code source pour comprendre un peu, mais il y a plus rapide.
L’idée est d’aller voir les échanges réseau qui ont lieu au fur et à mesure qu’on charge la carte.

Donc on retourne dans les outils de développement, on se place dans l’onglet Network et on voit ce qui transite.
On trouve tout de suite : il y a plein de petits bouts de carte carrés qui sont requêtés.

On regarde leur url, et on voit qu’elles sont constituées de façon bien régulière, avec numéro de ligne et de colonne. Pratique!

A partir de ce moment la méthode est trouvée : il suffit d’automatiser le téléchargement de toutes les images, et de reconstituer les images complètes.
Pour ce faire il va falloir écrire du code, et je vous propose un script en java qui fait le travail.

Et Google Maps?

Alors Google Maps j’ai regardé et c’est plus compliqué : bizarrement ils n’utilisent pas Leaflet
Chez eux c’est un plan sans bord, ce qui fait qu’il n’y a pas vraiment de lignes/colonnes.
Et quand on regarde les url des bouts d’images elles ne sont pas régulières. Il y a un code qui change et qu’il ne semble pas possible de déterminer.

Donc il y a encore un peu de boulot, et si quelqu’un trouve comment faire je veux bien qu’il me le dise pour que je mette à jour cet article 

Le plan est récupéré

Mission accomplie j’ai le plan! Il n’empêche que pour l’imprimer c’est quand même la galère puisque pour qu’on voie quelque chose à l’impression il faut le faire en plusieurs parties.
Donc redécouper l’image. Mais c’est bon ça va vite.

2016-09-23_10-33-21
Ça fait pas mal de feuilles à imprimer

Du coup j’imprime le plan, j’arrive au forum des halles tout content, et je vois qu’à l’entrée ils distribuent des plans papier du forum.
En plus il sont plus petits donc plus pratiques, en couleur, bref c’est beaucoup mieux 

Le plan distribué à l'entrée du forum des Halles
Le plan distribué à l’entrée du forum des Halles

Sur le coup je me dis pas grave, ça arrive, et on commence le jeu de piste.
Et à un moment il faut trouver une boutique dont l’indice est une forme géométrique.

enigme
L’énigme

Du coup avec l’équipe on regarde sur le plan une boutique qui serait de la forme géométrique en question, mais impossible d’en trouver.

detail-plan
La zone en question sur le plan distribué à l’entrée

A tout hasard je regarde sur mon plan précis imprimé, et là miracle : elle y est! C’est grâce au niveau de zoom plus élevé !

Mon plan détaillé
Mon plan détaillé

Vous vous en doutez il y avait d’autres énigmes, et la bonne nouvelle c’est qu’on a fini premiers au jeu de piste ! 
Je ne sais pas si c’était grâce au plan, mais c’est sûr que ça y a contribué, parce qu’on était suivis d’assez près 

Voilà c’est la fin de l’article, merci de m’avoir lu. Si vous aussi vous faites vos jeux de pistes et escape games à fond, dites-le en commentaire 

portrait

Johan van Santen

Développeur fullstack web et Android indépendant.

Après avoir travaillé 4 ans en banque d’investissement et dans du développement de logiciels topographique, j’ai travaillé sur mes projets d’applications Android et ma plateforme web App-Types. Aujourd'hui je suis à plein temps sur mon nouveau projet Random Lunch.

   

Commentaires

commentaire