Map RER A, afficher informations au clic

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Map RER A, afficher informations au clic

jeanmichjeanmich

Bonjour à tous,

Pour le taf je suis en train de créer une carte de suivi des travaux du RER A.

J'aimerais que les informations qui s'affichent lors du survol du nom d'une gare à la souris, s'affichent également et reste affichées, lorsque je clique sur le nom d'une gare.

Après avoir checker sur le net, il me semble qu'il m'est impossible de le faire via du CSS mais du JS.
Avez-vous des idées ?

Je vous remercie d'avance

Publicité

mechkurt

C'est un peu vague comme question, on peut parfois "tourner autour" du problème en css avec les pseudo class :active mais effectivement il y'a souvent besoin de faire encore du js pour ce genre de pop-up informative...

Y'a aussi des bidouilles en pure css pour faire des animations de menu déroulant avec des input donc tout est possible, des idées (comme tu le dit), on peut en avoir, il faut par contre définir le besoin réel (contrainte de navigateur, contrainte de CMS ou de framework, etc.).

---------------
D3

jeanmichjeanmich

Merci de ta réponse,

Je voudrais juste que le texte qui s'affiche lorsque je survole le nom d'une gare, reste en place lors du clic.
Les informations doivent rester où elle s'affichent.

Voici la map en lien :

https://codepen.io/gkerfers/pen/BaNpzdR

mechkurt

Bon ben on avances ! ^^
Déjà ton truc c'est plus du svg que de l'html, modifier des svg en css (et même en js) c'est pas forcément anodin.

Est ce que tu as une contrainte de navigateur (genre pour afficher sur un TV connecté dans un lieu spécifique) ou alors faut être compatible avec le plus grand nombre de navigateur possible (y compris mobile ?), pacque tout n'est pas forecement possible partout...

---------------
D3

TotalRecall

Si tu as d'autres besoins d'interactivité c'est pas envisageable de faire ca en html 5 (canvas) ?

---------------
Topic .Net - C# @ Prog

jeanmichjeanmich

Salut Mechkurt, non juste un écran de PC portable simple et un écran 24/27".
C'est juste une map que plusieurs personnes pourront checker en interne.

mechkurt

Je suis retourné voir et en fait tu as déjà du javascript dans ton truc, donc suffit d'ajouter des onclick qui ajoute une classe (et qui supprimes tous les autre noeuds l'ayant) et dans ta css faire le même display block que tu fait pour les :hover...

D'ailleurs si tu pouvais nettoyer un peu ton codepen en mettant juste le svg dans l'html, le contenu de <script> dans javascript et le contenu de <style> dans css on y verrait plus clair ! ^^

Ca donnerait quelque chose comme ça pour le css :

Code :

.ville.clicked > text.desc {display: block;}

Et un truc du genre pour le javascript :

Code :

var villes= document.querySelectorAll('.ville');
// Cercle des stations
villes.forEach(element => {
element.onclick = function(e){
//on masque tous les elements prcedement cliqué
document.querySelectorAll('.ville.clicked').classList.remove('clicked');
//on ajoute la classe pour celui ci
element.classList.add('clicked');
}
});

---------------
D3

mechkurt

jeanmichjeanmich a écrit :

Bonjour à tous,

Je suis en pleine création de map de suivi travaux pour le RER A.

Cette map est en .SVG.

voici le lien :https://codepen.io/gkerfers/pen/BaNpzdR

Je bloque sur les fonctions onclicks.

VOICI LE RESUME DU FONCTIONNEMENT DE LA MAP
Chaque logo d'une gare représente un type de travaux.
Lorsque je clique sur un logo, la couleur de ce dernier change.
Par exemple, lorsque je clique sur un logo, il passe au orange, cela montre que ce type de travaux est en cours de travaux…
Le passage de couleur d'un logo ou plusieurs influe sur la couleur d'un cercle d'une gare.

CE QUE J'ARRIVE A FAIRE :

1) Lorsqu'un symbole passe au orange, la couleur du cercle de la gare (qui était initialement blanc) passe au orange.
2) Lorsque tous les symboles sont au vert, la couleur du cercle de la gare passe au vert.
3) Lorsque tous les symboles sont au noir, la couleur du cercle de la gare est blanc.

Nb: Je ne l'ai fait que pour la gare de Saint-Germain-en-Laye

CE QUE J'AIMERAIS FAIRE:

1) Lorsque tous les logos sont noirs, la couleur du cercle de la gare en question est blanc.

2) Lorsque la couleur d'un des deux logos "Système de Téléphonie Avancée" et "Système d'Aide à l'Exploitation (AGS6)" passe au orange :
--> le logo Phase 2.1 passe au orange et la couleur du cercle de la gare passe également au orange

3) Lorsque les logos "Système de Téléphonie Avancée" et "Système d'Aide à l'Exploitation (AGS6)" sont au vert :
--> le logo Phase 2.1 passe au vert et la couleur du cercle de la gare repasse au blanc (couleur initiale)

4) Lorsque la couleur d'un des trois logos "Sonorisation locale" et "Nouveau pupitre de supervision" et "Volume Technique Protégé" passe au orange :
--> le logo Phase 2.2 passe au orange et la couleur du cercle de la gare passe au orange
Nb : le logo phase 2.1 reste au vert
Nb2 : on effectue d'abord les travaux phase 1 ensuite les travaux phase 2

5) Lorsque la couleur d'un des trois logos "Sonorisation locale" et "Nouveau pupitre de supervision" et "Volume Technique Protégé" sont au vert :
--> le logo Phase 2.2 passe au vert et la couleur du cercle de la gare passe au vert
Nb : le logo phase 2.1 est également au vert

Si quelqu'un pourrait m'aider ça serait super cool de votre part

Tu devrais nettoyer un peu ton projet et simplifier (séparer) ton code entre informations (le svg dans ton bloc html), son apparence (le css dans le bloc idoine) et l’interactivité (dans le bloc javascript).

Il serait peut être plus simple pour toi d'avoir des classes step1 step2 step3 associé à tes noeuds en javascript lors des clicks successif et un affichage correspondant en css...

---------------
D3

jeanmichjeanmich

Je vais faire ça, c'est vrai que ce n'est pas très facile de compréhension vu la longueur du code.
Je vais tester tes lignes pour voir si ça fonctionne merci
Je reviens vers toi après.
Pour l'autre post je trouvais ça plus simple de le séparer.
Désolé pour le "spam" du coup

jeanmichjeanmich

J'ai essayé tes lignes et ça ne fonctionne pas, tu es sûr du css ?
J'ai rangé le codepen comme il faut

Publicité

mechkurt

Je suis repartis de ton truc mais y'a pas mon code (et tu as encore des trucs en trop comme la balise style dans le css et idem pour l'html, vire tous ce qui n'est pas le svg).

En ajoutant mon code j'ai vu que y'avais un soucis avec la partie qui éteint les zones :

Code :

document.querySelectorAll('.ville.clicked').classList.remove('clicked')

Ce n'est pas sémantiquement juste, je supposes qu'il faudrait faire un foreach sur le document.querySelectorAll('.ville.clicked') car la on a pas accès à la propriété classList (désolé, j'ai tellement l'habitude de Jquery que je ne suis pas très à l'aise en javascript vanilla).
Si tu commentes cette ligne ça fonctionne (sauf qu'il s'allume les uns par dessus les autres).

Sinon je pensais à un truc, tu te rends compte qu'il n'ya pour le moment aucune persistance des données et que si tu fermes le navigateur du portable, aucune info d'état ne sera conservé ?

---------------
D3

jeanmichjeanmich

Salut Mechkurt !
Désolé mais je ne suis vraiment pas à l'aise en javascript ...
Tu ferais cette manip de quelle manière du coup ?
Je vais remettre ton code.

C'est une map qui sera consultable en interne à la RATP.
En gros, j'enregistrerai les données en faisant clic droit + enregistré sous firefox, ce qui créera une nouvelle map (un nouveau fichier .Html)

Pour modifier ensuite les informations sans passer par le code, j'utiliserai cette ligne java suivante :
<a href="javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200">Modifier date de Début et/ou de Fin de travaux</a>
Cette ligne me permettra de supprimer, ajouter, modifier n'importe quel texte.

mechkurt

Code :

var villes= document.querySelectorAll('.ville');
// Cercle des stations
villes.forEach(element => {
element.onclick = function(e){
//on masque tous les elements prcedement cliqué
var tmp = document.querySelectorAll('.ville.clicked');
villes.forEach(element => {
element.classList.remove('clicked');
});
//on ajoute la classe pour celui ci
element.classList.add('clicked');
}
});

---------------
D3

jeanmichjeanmich

Super ça fonctionne !

Connais-tu la fonction pour "désafficher" le texte ?

BTW:
Je viens de trouver la solution pour les couleurs des logos
Je mettrai à jour la carte, lorsqu'elle sera entièrement finie (il faut que je modifie gare par gare et ça prend pas mal de temps )

mechkurt

Code :

//on masque tous les elements prcedement cliqué
var tmp = document.querySelectorAll('.ville.clicked');
villes.forEach(element => {
element.classList.remove('clicked');
});

---------------
D3

jeanmichjeanmich

Salut Mechkurt et merci pour ton aide

J'ai remis à jour la map et j'ai un petit soucis:

https://codepen.io/gkerfers/pen/BaNpzdR

Il y a un conflit entre l'automatisation des couleurs des logos/cercle de gare et l'affichage des informations gare.

Lorsque je sors les informations gare du groupe <g class="stations-infos"> et que je mets le tout dans <g class="ville"> (donc au tout début, après le <circle id=...> ) tout fonctionne mais l'automatisation des couleurs des logos ne fonctionne plus.

Lorsque je le remets (dans <g class="stations-infos"> ), l'automatisation des couleurs fonctionne mais l'affichage des informations gare ne fonctionne plus.

J'aimerais (si c'est possible) que:
- le hover fonctionne
- lorsque je clique sur le nom d'une gare, ses informations s'affichent
- lorsque je reclique sur le nom de cette gare, ses informations se "désaffichent"
- ou lorsque je clique sur le nom d'une autre gare, les information de la nouvelle gare s'affiche (et de l'autre se "désaffiche)

J'ai l'impression que je ne peux pas faire ça, à cause de ce problème de groupe, ou mon java concernant l'automatisation des couleurs est caduque ...

Je te remercie

jeanmichjeanmich

J'ai trouvé la solution
Par contre je n'arrive pas à "désafficher" en cliquant sur le nom de la gare en question exemple :
Je clique sur le nom de la gare de La Défense
--> les infos de La Défense s'affichent
Je reclique sur le nom de la gare de La Défense
--> les infos de La Défense reste affichées

La seule manière de "désafficher" est de cliquer sur le nom d'une autre gare.
Tu aurais la soluce ?

Je te remercie

jeanmichjeanmich

Hello Mechkurt,
J'ai remis la map à jour : https://codepen.io/gkerfers/pen/BaNpzdR
J'ai retourné le truc, mais je n'arrive pas à faire disparaitre les informations gares qui s'affichent au clic.
J'aimerais lorsque je reclique sur le nom de la gare que les informations gare se "désaffichent".
Aurais-tu une idée ?

mechkurt

Quelque chose comme ca ?

Code :

// Variables
var circles = document.querySelectorAll(".ville circle" );
var stationInfos = document.querySelectorAll(".station-infos" );
var stationIcon = document.querySelectorAll(".station-icon" );
var gareIcon = document.querySelectorAll(".gare-icon" );
var tcIcon = document.querySelectorAll(".tc-icon" );
// Icones des stations phase 1
for (let n = 0; n < stationIcon.length; n++) {
let nbclick = 0;
stationIcon[n].onclick = function (e) {
nbclick += 1;
// Au 5eme clique on reprend à 0
if (nbclick == 4) nbclick = 0;
let stationCircle = this.parentNode.previousElementSibling;
stationCircle.style.fill = "orange";
switch (nbclick) {
case 1:
this.style.fill = "orange";
break;
case 2:
this.style.fill = "deepskyblue";
break;
case 3:
this.style.fill = "limegreen";
break;
default:
this.style.fill = "black";
break;
}
let thisStationIcons = this.parentNode.querySelectorAll(".station-icon" );
let nbGreen = 0;
let nbBlack = 0;
let nbOrange = 0;
thisStationIcons.forEach((element) => {
// Phase 1 vert = icon vert
//if(element.style.fill == "limegreen" ) nbGreen+1;
//if(nbGreen == thisstationicons.lenght) .style.fill='limegreen'
// Tous verts
if (element.style.fill == "limegreen" ) nbGreen += 1;
if (nbGreen == thisStationIcons.length)
stationCircle.style.fill = "white";
// Tous noirs
if (element.style.fill == "black" ) nbBlack += 1;
if (nbBlack == thisStationIcons.length) {
stationCircle.style.fill = "white";
if (stationCircle.classList.contains("not-click" ))
stationCircle.classList.remove("not-click" );
}
// A partir d'un orange
if (element.style.fill == "orange" ) nbOrange += 1;
if (nbOrange == 1) {
stationCircle.classList.add("not-click" );
}
});
};
}
// Icones des stations phase 2
for (let n = 0; n < gareIcon.length; n++) {
let nbclick = 0;
gareIcon[n].onclick = function (e) {
nbclick += 1;
// Au 5eme clique on reprend à 0
if (nbclick == 4) nbclick = 0;
let stationCircle = this.parentNode.previousElementSibling;
stationCircle.style.fill = "orange";
switch (nbclick) {
case 1:
this.style.fill = "orange";
break;
case 2:
this.style.fill = "deepskyblue";
break;
case 3:
this.style.fill = "limegreen";
break;
default:
this.style.fill = "black";
break;
}
let thisgareIcon = this.parentNode.querySelectorAll(".gare-icon" );
let nbGreen = 0;
let nbBlack = 0;
let nbOrange = 0;
thisgareIcon.forEach((element) => {
// Tous verts
if (element.style.fill == "limegreen" ) nbGreen += 1;
if (nbGreen == thisgareIcon.length)
stationCircle.style.fill = "limegreen";
// Tous noirs
if (element.style.fill == "black" ) nbBlack += 1;
if (nbBlack == thisgareIcon.length) {
stationCircle.style.fill = "white";
if (stationCircle.classList.contains("not-click" ))
stationCircle.classList.remove("not-click" );
}
// A partir d'un orange
if (element.style.fill == "orange" ) nbOrange += 1;
if (nbOrange == 1) {
stationCircle.classList.add("not-click" );
}
});
};
}
// Icone des stations du TC
for (let n = 0; n < tcIcon.length; n++) {
let nbclick = 0;
tcIcon[n].onclick = function (e) {
nbclick += 1;
// Au 5eme clique on reprend à 0
if (nbclick == 4) nbclick = 0;
let stationCircle = this.parentNode.previousElementSibling;
stationCircle.style.fill = "orange";
switch (nbclick) {
case 1:
this.style.fill = "orange";
break;
case 2:
this.style.fill = "deepskyblue";
break;
case 3:
this.style.fill = "limegreen";
break;
default:
this.style.fill = "black";
break;
}
let thistcIcon = this.parentNode.querySelectorAll(".tc-icon" );
let nbGreen = 0;
let nbBlack = 0;
let nbOrange = 0;
thistcIcon.forEach((element) => {
// Tous verts
if (element.style.fill == "limegreen" ) nbGreen += 1;
if (nbGreen == thistcIcon.length) stationCircle.style.fill = "limegreen";
// Tous noirs
if (element.style.fill == "black" ) nbBlack += 1;
if (nbBlack == thistcIcon.length) {
stationCircle.style.fill = "white";
if (stationCircle.classList.contains("not-click" ))
stationCircle.classList.remove("not-click" );
}
// A partir d'un orange
if (element.style.fill == "orange" ) nbOrange += 1;
if (nbOrange == 1) {
stationCircle.classList.add("not-click" );
}
});
};
}
var villes = document.querySelectorAll(".ville" );
// Cercle des stations
villes.forEach((element) => {
element.onclick = function (e) {
var show = true;
if (element.classList.contains("clicked" )) {
show = false;
}
//on masque tous les elements prcedement cliqué
HideClicked();
if (show) {
//on ajoute la classe pour celui ci
element.classList.add("clicked" );
}
};
});
function HideClicked() {
//on masque tous les elements prcedement cliqué
var tmp = document.querySelectorAll(".ville.clicked" );
villes.forEach((element) => {
element.classList.remove("clicked" );
});
}

---------------
D3

FORUM HardWare.fr

Programmation

Javascript/Node.js

Map RER A, afficher informations au clic

Sujets relatifs
Afficher un bouton "envoyer" après validation reCAPTCHA	Ajouter bouton Afficher Plus / Voir Plus Automatiquement
Afficher plusieurs webcams du monde entier sur un ecran	Comment afficher une image provenant d'un formulaire type "radio"
Afficher l'arborescence des dossiers	[Wordpress] Afficher un contenu différent suivant des adresses IP
Afficher flux http dans page html	Afficher / masquer div en fonction d'une liste déroulante (jQuery/JS)
Comment afficher des information différentes d'un même champ ?	Afficher une google map dans un pdf
Plus de sujets relatifs à : Map RER A, afficher informations au clic

Page générée en 0.122 secondes