Comment créer une carte interactive ?

[szass]

Dernier message de la page précédente :

Je vous ai MP.

[Zothike]

Ca m'interesse aussi j'avoue

Tu comptes faire une carte interactive de quelle ville, de quel univers ?

[LLyr]

Eterneme et Helion pardi
Voir p'tre celle du port d'entrée du Neshjra à terme

[Zothike]

@Szass

Travail très impressionnant !

Questions

• Est-ce que typiquement, pour le cas de la ville de Laelith, la carte a été conçue pour être un "standalone" à savoir la carte se suffit à elle-même pour les joueurs et le DM ou ell est en soutiens d'une ou plusieurs pages web (voir livret ?) où la ville est décrite ? (ou c'est en support de ce qui est présent ici ?) https://www.donjondudragon.fr/univers/laelith.html

• Beaucoup de choses semblent de se jouer dans ce fichier D:\OneDrive\donjplay\map\map laelith\files\data\laelith\laelith.js
-Les zones qui se déclenchent en rollover de la souris semblent être les coordonnées de la variable "path:" quel outil ou comment faire pour sélectionner chaque point ?

• Où se trouvent les icônes des lieux (Temples, Pics des mages, Bâtiments et monuments officiels, etc.) ou ce sont des d'une ou de plusieurs tables Unicode ? et si oui, lesquels et comment sont-elles déclarées ?


Debug
/univers/laelith/12736-laelith-v-1-5.html ne semble pas exister ou le sous-répertoire /univers/ est lié au site du DDD ?
Dans le fichier laelith.html, la ligne des meta description "keywords" peut être supprimée, c'est une légende urbaine, cette meta-description n'a jamais été prise en compte par les moteurs de recherche sauf un moteur de recherche Coréen, mais ce n'est peut-être même plus le cas.

[szass]

Beaucoup de textes du magazine Laelith sont mis sur la carte (les lieux essentiellement), mais il faut avoir lu quand même le reste du magazine pour tout bien comprendre de la ville.
Dans laelith.js tu as en effet les coordonnées de toutes les zones (path) et celles de tous les points (x et y).
Pour les path, j'utilise ceci :
https://summerstyle.github.io/summer/
Tu uploades ta carte, et ensuite tu utilises l'outil Polygon. Tu traces tes zones, et quand tu as fini, tu récupères les coordonnées en cliquant sur le bouton To html qui te donne un truc comme ceci :

Code : Tout sélectionner

<img src="/image.jpg" alt="" usemap="#map" />
<map name="map">
    <area shape="poly" coords="840, 611, 1101, 677, 1109, 823, 879, 907, 791, 729" />
</map>

Tu récupères juste les numéros : 840, 611, 1101, 677, 1109, 823, 879, 907, 791, 729
Et tu les mets dans le fichier js dans path, entre M et Z, comme ceci :

Code : Tout sélectionner

path:"M 840, 611, 1101, 677, 1109, 823, 879, 907, 791, 729 Z"

Les icônes des lieux sont déclarées dans le fichier html (laelith.html) dans la variable icon_dot :

Code : Tout sélectionner

var icon_dot = [
				"\uf66f", // Temples ou \uf19c
				"\uf72b", // Pics des mages ou \uf6e8 ou \ue2ca
				"\ue51c", // Bâtiments et monuments officiels
				"\uf594", // Guildes
				"\ue54f", // Ambassades
				"\uf2e7", // Auberges et restaurants
				"\uf0fc", // Tavernes
				"\uf54e", // Commerces
				"\uf7ab", // Animaux ou \uf6f0
				"\ue00d", // Habitations
				"\uf3c5", // Autres lieux
				"\uf1bb", // Jardins
				"\uf7e5", // Voirie
				"\uf6d9", // Portes
				"\ue4ce" // Ponts
			];

C'est la police Font Awesome :
https://fontawesome.com/icons
Une fois que tu as l'icône souhaitée, tu récupères l'unicode en haut à droite du modal qui s'ouvre.

Pour le lien sinon, il faut bien sûr ajouter l'url du DDD devant :
https://www.donjondudragon.fr/univers/l ... v-1-5.html

[Zothike]

@Szass thanks super outils, et pas mal intuitif !

Sinon, où sont alimentées les pop-up "Lire la suite"


Et, comment faire pour déterminer un point unique (pour placer les icônes "temples", "habitations", etc.) c'est possible en bricolant à partir de l'outil pour définir les zones imagemap mais c'est pénible.

Et est-il possible de faire des imagemap discontinues ?, ce serait pour empiler les imagemaps, pour faire apparaître certaines zones en cliquant sur une autre zone.

[szass]

Pour les lire la suite, il faut suivre ces étapes :

- dans le fichier html, tu définis la variable "dossier_articles" avec le nom que tu veux (ex : xitragupten)
- tu créés le dossier xitragupten dans le répertoire files/items
- pour les articles où tu veux un Lire la suite, il te faut mettre la variable "article" à 1 (dans le fichier files/data/*ta_carte*.js)
- pour chaque article complet, il te faut créer un fichier html nommé comme le lieu, en minuscules et avec des _ à la place des espaces et des apostrophes. Tu places ces fichiers dans le dossier files/items/xitragupten

Pour les coordonnées des points (x et y), tu utilises n'importe quel logiciel de retouche d'image pour avoir les coordonnées.

Tu peux superposer des zones entre elles, mais c'est pas ultra pratique en l'état. Si une zone est par-dessus une autre, celle du dessous ne sera pas cliquable.
Si tu as un quartier qui se divise en plusieurs sous quartiers ou en vue plus rapprochée, tu peux par contre créer une autre carte interactive.
Comme pour Laelith et le quartier Basse-eau : https://www.donjondudragon.fr/map/laelith.html#l145

[Zothike]

Pour les lire la suite, il faut suivre ces étapes :

- dans le fichier html, tu définis la variable "dossier_articles" avec le nom que tu veux (ex : xitragupten)
- tu créés le dossier xitragupten dans le répertoire files/items
- pour les articles où tu veux un Lire la suite, il te faut mettre la variable "article" à 1 (dans le fichier files/data/*ta_carte*.js)
- pour chaque article complet, il te faut créer un fichier html nommé comme le lieu, en minuscules et avec des _ à la place des espaces et des apostrophes. Tu places ces fichiers dans le dossier files/items/xitragupten

Pour les coordonnées des points (x et y), tu utilises n'importe quel logiciel de retouche d'image pour avoir les coordonnées.

Tu peux superposer des zones entre elles, mais c'est pas ultra pratique en l'état. Si une zone est par-dessus une autre, celle du dessous ne sera pas cliquable.
Si tu as un quartier qui se divise en plusieurs sous quartiers ou en vue plus rapprochée, tu peux par contre créer une autre carte interactive.
Comme pour Laelith et le quartier Basse-eau : https://www.donjondudragon.fr/map/laelith.html#l145

[nflqt]

Pardon pour le déterrage.

Je suis intéressé par la création de carte modifiable : je pense notamment à un outil qui permettrait lors d’une campagne Birthright de modifier le tracé frontalier des différents états des PJ au cours de la partie.

Est-ce que ce serait possible à partir de cela : https://www.donjondudragon.fr/map/cerilia.html ?

Il y a deux ans : j’avais posé la question à un expert Inkscape et il avait réalisé ce tutoriel vidéo. C’est une possibilité…

[szass]

En l'état ce n'est pas aisément modifiable, les délimitations des régions sont des coordonnées dans un fichier javascript, qu'il faudrait donc modifier au fur et à mesure, mais c'est loin d'être pratique à l'usage. Sachant que si tu modifies les contours d'une région, il te faudra aussi modifier les contours des régions limitrophes.

[nflqt]

Hé oui ! C’est un problème qui a pourtant été résolu dès 97 par les développeurs du jeu vidéo Birthright, et qui l’est toujours par ceux de tous les jeux de gestion de royaumes ou d’état… Je me demande comment on fait…