Partage

Carte de la france en liens ?

1 2 >>

3 mai 2017 à 22:19:07

Bonjour à tous, les zéros ! J'ai besoin de vos précieux avis et de votre aide pour réaliser quelque chose :

Je suis entrain de créer un faux site pour m’entraîner à programmer. Lors de l'inscription des membres, j'aimerais qu'ils puissent indiquer où ils habitent grâce à une carte de la France blanche, avec les départements bordés en noir. Lorsque les futurs inscrits survoleront un département, celui-ci changera de couleur, et le nom de ce département apparaîtra au milieu du département lui-même. Lorsque les invités cliqueront sur le département de leur choix, cela sera enregistré sur la bdd et l'inscription se finalisera (ça je sais faire).

J'ai donc besoin de votre aide pour réaliser cette carte interactive. Ce serait génial si je pouvais le faire en Html/Css grâce à des images, mais s'il faut utiliser un autre langage, je pourrais toujours m'y pencher de plus près.

Merci d'avance et bonne soirée !

Lamecarlate

3 mai 2017 à 23:16:44

Bonjour,

je pense que tu trouveras ton bonheur ici : http://jvectormap.com/ (il faut prendre le plugin - qui dépend de jQuery - et la carte des départements de France, que tu trouveras dans Maps).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

4 mai 2017 à 14:00:01

Oh, parfait, merci beaucoup ! Concernant la mise en place, j'aurais besoin d'un tout p'tit peu d'aide, j'ai encore du mal avec l'anglais

J'ai essayé de me renseigner sur le site de jvectormap.com et sur google, pour tenter de savoir concrètement comment ça marche, mais je mouline un peu, je ne comprend pas beaucoup de notions.. Je sais que j'en demande beaucoup et que ça peut être fastidieux, mais je suis vraiment un débutant, et j'aimerais quelques pistes pour mettre cette carte en place, une explication la plus concrète possible. J'ai aussi visionné cette vidéo pour tenter d'y voir un peu plus clair, mais c'est encore flou dans la façon dont je dois m'y prendre pour intégrer cette map : https://www.grafikart.fr/tutoriels/jquery/carte-interactive-177

Voila, si tu t'y connais un peu, j'aimerais que tu me donnes quelques pistes pour commencer Je te remercie infiniment de ton aide, à plus tard !

-
Edité par SheepBild 4 mai 2017 à 14:36:51

Lamecarlate

4 mai 2017 à 15:31:36

Tu as lu le tutoriel : http://jvectormap.com/tutorials/getting-started/ ? Si oui, que n'as-tu pas compris dedans, qu'on puisse te guider ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

4 mai 2017 à 17:39:31

Ok, j'ai compris pour le début, j'ai créé la page de test. J'ai téléchargé les fichiers css et js de base de jvectormap, et je les ai lié à la page de test, tout ça c'est ok. Maintenant, je choisis la map que je veut : http://jvectormap.com/maps/countries/france-departments/

J'ai remplacé $('#world-map').vectorMap({map:'world_mill'}); par $('#map').vectorMap({map:'fr_mill'});, tout va bien.

Pour finir, j'ai cliqué sur "Download (140KB)" pour télécharger la map, et un code s'ouvre. C'est ce dont je ne sais pas quoi faire. Dois-je le mettre dans un fichier .min.js aussi ?

Merci d'avance

-
Edité par SheepBild 4 mai 2017 à 17:40:19

Lamecarlate

4 mai 2017 à 17:59:49

Normalement si tu fais Ctrl + S sur la page ça te crée le fichier JS correspondant. Tu peux aussi faire clic droit > enregistrer la cible sur le lien.

Et ce fichier, tu le mets à côté de jvectormap, et tu l'appelles aussi dans ton html. C'est un bout de JS qui crée littéralement la carte.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

4 mai 2017 à 19:00:23

Ah, d'accord, merci beaucoup

Donc j'ai mis les 2 fichiers de base + le fichier de la map dans le dossier, j'ai ensuite appelé ces fichiers dans mon code :

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
  <script src="jquery.js"></script>
  <script src="jquery-jvectormap-2.0.3.min.js"></script>
  <script src="jquery-jvectormap-fr-mill.js"></script>
</head>
<body>
  <div id="world-map" style="width: 600px; height: 400px"></div>
  <script>
    $(function(){
      $('#map').vectorMap({map: 'fr_mill'});
    });
  </script>
</body>
</html>

Apparemment, tout semble ok, mais lorsque je charge la page, la map ne se lance pas. Je me suis donc penché sur le code, et j'ai remarqué que je n'avais aucun fichier "jquery.js", alors que ce fichier est appelé dans le head. Je ne connais absolument rien au jquery, mais je me suis dit qu'il fallait peut-être télécharger une bibliothèque ou quelque chose comme ça, non ?

Lamecarlate

4 mai 2017 à 19:44:01

Ah, oui, en effet, jQuery est une dépendance de jVectorMap, il est essentiel ici. C'est comme tu l'as deviné une bibliothèque de fonctions : https://jquery.com. Prends la version la plus récente, minifiée pour un souci de performance.

Un détail : appelle plutôt tes deux fichiers jvectormap dans "body", tout à la fin, juste avant la balise de fermeture - avant ton script d'appel quand même Ceci afin de permettre à la page de se charger sans être bloquée par la lecture et l'interprétation de ces fichiers. Laisse jQuery dans le head en revanche, lui doit être traité en premier.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

4 mai 2017 à 20:25:59

Ok ça marche Donc j'ai modifié ce code :

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
  <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
  <div id="world-map" style="width: 600px; height: 400px"></div>
  <script>
    $(function(){
      $('#map').vectorMap({map: 'fr_mill'});
    });
  </script>
  <script src="jquery-jvectormap-2.0.3.min.js"></script>
  <script src="jquery-jvectormap-fr-mill.js"></script>
</body>
</html>

Le fichier jquery-3.2.1.min.js étant le fichier jquery. Lorsque j'actualise la page, toujours rien.. :/ Que faire ?

Lamecarlate

4 mai 2017 à 22:19:50

Je me cite :

appelle plutôt tes deux fichiers jvectormap dans "body", tout à la fin, juste avant la balise de fermeture - **avant ton script d'appel quand même**

(pense à regarder la console de ton navigateur, elle est d'une aide présente quand on joue avec JavaScript)

-
Edité par Lamecarlate 4 mai 2017 à 22:20:09

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

6 mai 2017 à 18:24:05

Mais c'est quoi le script d'appel ?

Lamecarlate

6 mai 2017 à 19:35:30

<script>
    $(function(){
      $('#map').vectorMap({map: 'fr_mill'});
    });
</script>

Le script dans lequel tu appelles jVectormap

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Lenny Obez

6 mai 2017 à 22:14:59

Bonsoir,

Je n'ai pas lu tout le fil de la conversation, juste le problème initial.

Tu peux t'amuser avec du vectoriel en code svg, dans ce cas, pas besoin de Javascript/JQuery (voir: http://hublab.xyz/?p=vndo#be) ce qui te fait gagner en performance.

Lenny Obez

Besoin d'une aide rapide ? Tweetez-moi @LennyObez ou vous souhaitez en savoir plus sur le Web? Voir mon site

SheepBild

7 mai 2017 à 15:10:52

Lamecarlate, j'arrive pas à faire marcher cette map, je me creuse la tête depuis tout à l'heure, c'est censé marcher là non ? x)

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
  <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
	<div id="world-map" style="width: 600px; height: 400px"></div>
	<script src="jquery-jvectormap-2.0.3.min.js"></script>
	<script src="jquery-jvectormap-fr-mill.js"></script>
	<script>
		$(function(){
		$('#map').vectorMap({map: 'fr_mill'});
		});
	</script>
</body>
</html>

Et Lenny, comment ça marche le lien que tu m'as envoyé ?

Merci pour votre aide

Lenny Obez

7 mai 2017 à 15:30:46

En fait, il faut jouer avec le sélecteur CSS "+" qui sélectionne l'élément frère directement à côté et tu joues de cette manière dans le dom :

<body>
    <p>France 1</p>
    <p>France 2</p>
    <svg>
        <g></g> <-- représente France 1 -->
        <g></g> <-- représente France 2 -->
    </svg>
</body>

Et donc, si tu veux animer quoi que ce soit dans ce contexte, il suffit de faire :

p:first-of-type:hover + svg g:first-of-type { ... }

p:nth-of-type(2):hover + svg g:nth-of-type(2) { ... }

Étant donné que tu vas avoir plus d'éléments que ça, je te déconseille d'utiliser ":last-of-type" en cas d'ajout, tu pourras créer ton code SVG directement dans Illustrator et avoir quelque chose de fonctionnel et performant. Mais il y a un revers à la médaille, ce n'est pas scalable sans Javascript, il faut donc tout créer - en terme de contenu - en amont, tu ne peux pas, en milieu de route, dire que t'aimerais qu'il y ai X choses en plus.

Besoin d'une aide rapide ? Tweetez-moi @LennyObez ou vous souhaitez en savoir plus sur le Web? Voir mon site

Lamecarlate

7 mai 2017 à 15:37:40

Sheepbuild > ton script cible un élément d'id "map" (#map), alors que tu n'en as pas dans la page. Ta carte a un id "world-map", c'est ça que tu dois utiliser

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

7 mai 2017 à 16:49:37

Hmm, je vois Lenny, merci Je pense plutôt choisir la solution de Lamecarlate car je n'ai aucune connaissance en SVG, et ça a l'air quand même assez compliqué, mais je retiens

Merci beaucoup Lamecarlate ! La carte marche, c'est parfait Maintenant j'ai simplement quelques questions, dont je n'ai pas trouvé de réponse sur le site :

Comment amener un clic sur une région à une page en ajoutant un lien ?

Comment bloquer le zoom ?

Comment changer la couleur du fond ?

Merci beaucoup !

Lamecarlate

7 mai 2017 à 22:42:52

> Comment amener un clic sur une région à une page en ajoutant un lien ?

Je n'ai pas compris :/

> Comment bloquer le zoom ?

zoomOnScroll (et si tu veux empêcher de zoomer avec les boutons… ben faut les cacher en CSS, rustique mais fonctionnel)

> Comment changer la couleur du fond ?

backgroundColor

Ces deux propriétés sont des options à rajouter dans l'appel à la fonction vectorMap, en plus de "map".

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

8 mai 2017 à 0:46:35

Ok, merci ! Pour la première question, j'ai mal formulé, "Je veux que toutes les régions soient des liens amenant à des pages spécifiques"

-
Edité par SheepBild 8 mai 2017 à 0:46:47

Lamecarlate

8 mai 2017 à 7:20:16

Ok, faut jouer avec onRegionClick (à déclarer au même endroit que les trois autres), mais comme ça :

onRegionClick: function(code){ // des trucs }

C'est une fonction qui reçoit automatiquement le code région (quand je dis région, c'est "morceau de carte", je ne sais pas quelle version de la carte de France tu as pris) quand on clique sur une région. À toi de faire des trucs avec : construction d'une url et déplacement vers cette url avec document.location. Je viens de me rappeler que j'ai déjà répondu à des questions semblables dans cet autre sujet : https://openclassrooms.com/forum/sujet/convertion-svg-en-image-map

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

8 mai 2017 à 16:04:23

D'accord, merci beaucoup

Ça va prendre du temps car je suis vraiment vraiment débutant avec le JS, mais je up si j'arrive pas à un truc. Merci !

SheepBild

10 mai 2017 à 18:52:43

Me revoilà ! J'ai décidé de changer de map pour une carte des régions, cette fois-ci :

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
  <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
	<div id="map" style="width: 600px; height: 400px"></div>
	<script src="jquery-jvectormap-2.0.3.min.js"></script>
	<script src="jquery-jvectormap-fr_regions_2016-mill.js"></script>
	<script>
		$(function(){
			$('#map').vectorMap({
				map: 'fr_regions_2016_mill',
				backgroundColor : 'none',
				showTooltip: true,
				onRegionClick: function(element, code, region)
				{
					if ((code=='FR-YT')||(code=='FR-X7')||(code=='FR-X3')||(code=='FR-GF')||(code=='FR-H')||(code=='FR-F')||(code=='FR-E')||(code=='FR-X1')||(code=='FR-MQ')(code=='FR-X4')||(code=='FR-X5')||(code=='FR-X6')||(code=='FR-R')||(code=='FR-GP')(code=='FR-U')||(code=='FR-X2')||(code=='FR-J')||(code=='FR-RE')) {
						$.fancybox.open({
							src  : 'http://siteweb.com'+code+'.php',
							type : 'iframe',
						})
					}
					else{}
				},
				series: {
					regions: [{
						values: {
							'FR-YT': '#4b93c1',
							'FR-X7': '#4b93c1',
							'FR-X3': '#4b93c1',
							'FR-GF': '#4b93c1',
							'FR-H': '#4b93c1',
							'FR-F': '#4b93c1',
							'FR-E': '#4b93c1',
							'FR-X1': '#4b93c1',
							'FR-MQ': '#4b93c1',
							'FR-X4': '#4b93c1',
							'FR-X5': '#4b93c1',
							'FR-X6': '#4b93c1',
							'FR-R': '#4b93c1',
							'FR-GP': '#4b93c1',
							'FR-U': '#4b93c1',
							'FR-X2': '#4b93c1',
							'FR-J': '#4b93c1',
							'FR-RE': '#4b93c1',
						},
					}]
				}
			});
		});
	</script>
</body>
</html>

J'ai également copié une bonne partie du code de la page dont tu m'avais envoyé le lien, parce-qu'il m'allait bien, et que je ne m'y connais pas trop en JS. Mais ma carte ne s'affiche malheureusement pas, et voilà 1 heure que je scrute mon code pour savoir d'ou ça vient.. :')

Lamecarlate

10 mai 2017 à 19:06:06

Qu'est-ce que tu as dans la console ? As-tu des erreurs ? C'est une bonne source d'informations.

(je vais déplacer ce sujet dans le forum JavaScript, où il a plus sa place)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

10 mai 2017 à 19:57:47

D'accord

Non, je n'ai aucune erreur qui s'affiche à l'écran

MrQu3ntin

10 mai 2017 à 20:31:38

Bonjour ,

Je n'ai pas lu toute la conversation mais en ce qui concerne la création d'une carte de France interactive il y a Grafikart qui a fait un tutoriel à ce sujet, je t'invite à aller voir sa chaîne YouTube où il l'explique.

SheepBild

10 mai 2017 à 21:09:18

Yes, j'ai déjà vu, merci Cecra

Mais c'est plus simple avec Jvectormap, en plus je dois être à 2 doigts de réussir là

Lamecarlate

11 mai 2017 à 7:22:32

Pas d'erreur dans la console ? Et si tu inspectes la page, est-ce que le SVG est généré ou pas du tout ? As-tu testé avec une valeur de couleur pour backgroundColor (je ne suis pas sûre que "none" soit accepté) ?

Si vraiment on ne trouve pas, il faudra que tu héberges ta page quelque part, débugger du JS à distance c'est pas facile

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

11 mai 2017 à 15:50:28

Ah, c'est bon, j'ai trouvé l'erreur, j'avais mal écrit une adresse Tout est ok, je l'ai hébergé ici : http://sitedevelop.pe.hu/jvector.php ;) Par contre, les liens pour les régions ne fonctionnent pas, quand je clique dessus

Merci pour toute cette aide !

Lamecarlate

11 mai 2017 à 16:56:54

Les "liens" pour les régions ne fonctionnent pas car tu n'as pas envoyé le script Fancybox

Pas d'aide concernant le code par MP, le forum est là pour ça :)

SheepBild

14 mai 2017 à 12:34:17

Me revoilà, j'étais parti en week-end

Ah ! Encore un outil que je ne connais pas.. x) Je me suis renseigné un peu dessus sur Google et j'ai vu que ça permettait aussi de faire des Lightbox, sympathique ! Donc j'ai téléchargé le fichier .zip de FancyBox 3.0. Je me suis rendu ensuite sur http://fancybox.net/howto pour tenter de comprendre comment mettre en place cet outil, mais je n'ai pas bien compris..

La deuxième étape :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

J'imagine que le premier script est inutile puisque j'ai déjà incorporé jquery : <script src="jquery-3.2.1.min.js"></script>

Pour le deuxième script, je ne l'ai pas trouvé dans le fichier .zip, j'ai fait tous les dossiers. Ou dois-je le trouver, a-t-il un autre nom ?

La troisième étape ne pose pas de problème

Et pour la quatrième étape, elle ne concerne pas ce que je veux faire, si j'ai compris non ?

Merci beaucoup !

-
Edité par SheepBild 14 mai 2017 à 12:35:03

1 2 >>