Try   HackMD

☠️ Une carte pour les pirates

Mardi 31 mars 2020 - #ConfinementJour15

Aujourd'hui, nous allons voir comment réaliser simplement une carte de pirates sur l'outil Ma carte de l'IGN.

🦜 Etape 1 : préparer la carte

Cette étape n'est pas obligatoire mais comme on est confiné à l'intérieur et qu'on a un peu de temps, autant en profiter
Si vous ne le sentez pas, passer directement à l'étape 2

L'idée est de superposer à la carte le plan de son appartement (confinement oblige, pas possible de sortir) en utilisant un outil de géoréférencement.
Pour cela vous devez scanner le plan de votre appartement (ou de votre maison) et le mettre en ligne sur un site de partage d'image tel que imgur par exemple. Pas besoin de connexion, il suffit de glisser-déposer une image et de récupérer l'url fournie par le site.
Par exemple cette image : https://i.imgur.com/8Ap6x09.png

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Une fois fait, rendez-vous sur l'outil de géoréférencement et saisissez l'url de votre image dans le champ prévu à cet effet. Puis cliquez sur le bouton Georef.

La partie gauche de l'écran contient maintenant votre plan et la droite une carte.
Centrez-vous sur votre zone puis cliquez un point sur le plan et un sur l'endroit correspondant de la carte.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Généralement 2 points suffisent pour un plan simple.
A l'aide de l'outil de détourage

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
, détourer votre plan pour supprimer les parties inutiles.

Un fois que le résultat vous semble bon, exportez la carte en utilisant le bouton

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
.
Cliquez sur le bouton export Map pour exporter un fichier au format carte.

🗺️ Etape 2 : Créer la carte

Si vous n'avez pas de plan ou si vous voulez simplement créer une carte de votre quartier ou de votre jardin, vous pouvez commencer directement à cette étape en vous rendant sur le site Ma carte proposé par l'IGN pour publier ses propres cartes en ligne
Je rappelle que l'IGN propose une déclinaison pour l'Education Nationale au travers de l'outil Edugéo.

Si vous avez réussi à géoréférencer votre logement vous pouvez le retrouver sur la carte en faisant glisser le fichier carte récupéré à l'étape précédente sur la carte.

Reste à créer des énigmes sur la carte.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Utilisez les outils de dessin pour saisir une ligne qui marquera le parcourt à effectuer. Dans le volet de gauche, donnez lui une couleur et choisissez des pointillés (parce que c'est comme cela que font les pirates !).

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Puis changez d'outil et saisissez des points pour y mettre des énigmes. Choisissez un symbole pour représenter le point. Ma carte possède une liste de symboles spécialement étudiés pour les pirates.
En mode avancé, vous aurez plus de possibilité pour personnaliser votre symbole. Vous pouvez également utiliser une image comme symbole pour votre point.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Reste maintenant à inclure une énigme dans la bulle du point sélectionné.
Pour cela utilisez l'outil de personnalisation de la bulle de l'objet et cochez la case Personnaliser la bulle.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

La description utilise un langage Markdown étendu pour afficher le contenu de la bulle.
Rien de bien compliqué surtout qu'une barre d'outils recensant les différentes fonctionnalités est disponible.

Ici, nous allons utiliser l'insertion de blocs pour afficher le résultat de l'énigme. Il va nous permettre d'insérer un bloc rétractable qui ne sera visible que quand on clique dessus pour masquer la réponse.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Notre bulle va donc contenir :

J'ai un **chapeau** mais je n'ai point de tête. J'ai un **pied** mais pas de soulier.
Qui suis-je ?
[-- Solution --]
Un champignon
[----]

On peut lui ajouter un titre (de niveau 4 avec ####)

#### Devinette

et pourquoi pas une image dans la solution (en utilisant la syntaxe !(url_image)).

[-- Solution --]
Un champignon
!(https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Champignon_inconnu_1a.jpg/180px-Champignon_inconnu_1a.jpg)
[----]

Voilà, maintenant quand on clique sur le point, une bulle apparaît avec le contenu qu'on vient de rentrer. Il ne reste plus qu'à déplier le bloc pour afficher la solution.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Vous pouvez varier les plaisirs en utilisant des images ou des vidéos dans le contenu que vous publierez.

Une fois enregistrée, la carte peut alors être envoyée à un ami ou insérée sur son blogue en utilisant le bouton de partage

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
.

😎 Et voilà le résultat !

Cliquez sur la carte et répondez aux questions !
Voir en grand

En route pour une chasse au trésor virtuelle dans l'appartement (profitez-en pour cacher des énigmes ou des indices dans le monde réel) !
Bien sûr pour utiliser ce genre d'outil à plus grande échelle et aller se promener et découvrir son quartier, il faudra attendre la fin du confinement