Le fil d'actu GC
Accéder au site
Accéder au site

Partagez
Voir le sujet précédentAller en basVoir le sujet suivant
SimonRyr
SimonRyr
Apprenti Membre

Messages : 37

Créer des Cartes Cliquables, le Dim 23 Sep 2018, 16:20
Il est possible de créer sur le Wiki GC des cartes complexes à lien, cliquables. Elles rendent la navigation plus simple et interactive et permettent d'accéder facilement à l'information.

Un exemple de carte cliquable. Tous les textes ici sont cliquables.

Avant de commencer la création, il faut savoir qu'une telle carte peut prendre beaucoup d'espace texte. Si vous souhaitez utiliser votre carte à plusieurs endroits différents sur le wiki, il est recommandé de créer un modèle dédié.


1) Base de la carte

La première chose à faire est de trouver un fichier image que l'on va utiliser sur la carte. Ici, j'utilise Carte Vasel Vierge.png pour l'exemple. Si votre carte n'est pas encore importée sur le wiki, vous pouvez le faire ici.
Nous allons commencer par ajouter les bornes de la carte puis la carte elle-même dans le wikitexte :
Code:
{{Début de carte}}
[[Fichier:Carte Vasel Vierge.png|920px]]
{{Fin de carte}}
Ici, je précise que la carte fera 920 pixels de largeur : c'est ici une largeur fixe, c'est-à-dire que quel que soit le zoom, la carte fera toujours 920 pixels sur l'écran, mais on peut modifier ça par la suite.
Quoi qu'il en soit, tout le contenu cliquable de la carte sera situé entre le fichier et la borne de fin de carte.


2) Les éléments cliquables

A. Positionnement de base

Tous les éléments cliquables sont des modèles de points. Il en existe de toutes sortes, vous pouvez les retrouver ici.
On commence par ajouter la capitale du Vasel, Maris Cantii. On utilise pour cela le modèle Point/Capitale :
Code:
{{Début de carte}}
[[Fichier:Carte Vasel Vierge.png|920px]]
{{Point/Capitale|48.6|68.8|'''[[Maris Cantii]]'''|localisation=o}}
{{Fin de carte}}
Plusieurs éléments sont à noter :

  • Les deux premières valeurs numériques ( 48.6 et 68.8 ) correspondent respectivement à la distance depuis la gauche et depuis le haut de l'image, en pourcentages (ici mon point sera à 48.6% de l'image depuis la gauche et à 68.8% depuis le haut). C'est la position de mon point.
  • la localisation correspond à l'emplacement du texte par rapport au point (ici, mon texte sera situé à l'ouest). Par défaut : ne (nord-est)
  • bien sûr le texte peut être stylisé (ici, "Maris Cantii" est en gras et avec un lien, mais il est possible de ne pas avoir de lien)

Les modèles Point/Ville, Point/Ville importante et Point/Mont fonctionnent de la même manière. (Ville importante sert à marquer des villes plus grosses que Ville,  et Mont sert à marquer des montages ou des volcans)

Le modèle Point/Drapeau permet d'ajouter une image de drapeau au lieu d'une icône de localisation de ville (voir ici)

B. Modèles de points texte et rotation

Nous allons maintenant ajouter le Cap Clamato sur notre carte. Pour cela nous utilisons le modèle Point/Océan, qui est le plus adapté. Celui-ci n'ajoute pas d'icône mais simplement le texte choisi :
Code:
{{Début de carte}}
[[Fichier:Carte Vasel Vierge.png|920px]]
{{Point/Capitale|48.6|68.8|'''[[Maris Cantii]]'''|localisation=o}}
{{Point/Océan|66|94|[[Cap Clamato]]|rotation = -5|taille=100%}}
{{Fin de carte}}

  • Les valeurs numériques correspondent toujours à la position. Le texte a le même fonctionnement également.
  • La taille est ici modifiée à 100%. Pour le modèle Point/Océan elle est par défaut de 112%.
  • La rotation aussi est ici modifiée : -5° permettent au texte de rentrer à l'emplacement dédié (voir image ci-dessus)

Les modèles Point/Fleuve et Point/Lac fonctionnent de la même manière. (la seule différence est le style du texte et la valeur par défaut de la taille du texte)

L'exemple de l'image est donné par ce code :
Code:
{{Début de carte}}
[[Fichier:Carte Vasel Vierge.png|920px]]
{{Point/Capitale|48.6|68.8|'''[[Maris Cantii]]'''|localisation=o}}
{{Point/Ville importante|45.6|51.3|'''[[Saint-Martin en Leu]]'''|localisation=se}}
{{Point/Ville|30.1|47|[[Leiplein]]|localisation=so}}
{{Point/Mont|75|77|[[Mont Aléatoire]]}}
{{Point/Ville|65|71|[[Vitsal]]|localisation=e}}
{{Point/Océan|66|94|[[Cap Clamato]]|rotation = -5|taille=100%}}
{{Point/Océan|8|74|[[Océan Atlantide]]}}
{{Point/Fleuve|47.5|44|[[Leu|Le Leu]]|rotation = -6}}
{{Point/Fleuve|41|33|[[Lac Évre]]|rotation=-10}}
{{Fin de carte}}


Dernière édition par SimonRyr le Dim 23 Sep 2018, 22:13, édité 1 fois
Yeskiomach
Yeskiomach
Membre Chevronné

Messages : 876

Re: Créer des Cartes Cliquables, le Dim 23 Sep 2018, 16:42
Au top, c'est parfait ça j'adore ces cartes
Saynwen
Saynwen
Président de l’OCGC
Sceau de la République norroise
Messages : 7034

https://www.instagram.com/standx_photo/
Re: Créer des Cartes Cliquables, le Dim 23 Sep 2018, 22:37
Super boulot. Je m'y attelle dès que j'en ai le temps.
Maori
Maori
Modérateur

Messages : 2004

Re: Créer des Cartes Cliquables, le Dim 23 Sep 2018, 23:33
Merci pour ce petit tuto, c'est très apprécié, je vais voir si je peux en faire une. ça me changera des cartes illustrator d'il y a un an maintenant :aie:
Myname
Myname
Directeur de l'Institut d'Économie
Nombre d Eiffel remportés
Messages : 10468

http://squirrel.romukulot.fr/
Re: Créer des Cartes Cliquables, le Ven 28 Sep 2018, 17:38
Ah, génial comme tuto ! cheers
Merci vraiment pour tout le travail que vous mettez dans ce wiki Wink


Contenu sponsorisé
Voir le sujet précédentRevenir en hautVoir le sujet suivant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum