Carte interactive

**alaaKH** · 02/07/2015, 14h26

bonjour ;

j'ai réaliser une petite carte svg en utilisant SVG, je vaudrais que à chaque mouseover l'identifiant (id) de la zone s'affiche comme l'exemple suivant: , et aussi si quelqu'un a une idée sur l'ajout du zoom

voila ma carte svg :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
 
<meta charset="ISO-8859-1">
<title>les regions du maroc 12</title>
  <link rel="stylesheet" type="text/css" href="../style/style.css" title="style" />
<style type="text/css">
 
 svg  path:hover {fill :#FF7F50 }
 
 .map g {
  fill: #6495ED;
  stroke: #333;
  stroke-width: 1;
}
</style>
</head>
<body>
<div class="map">
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="91.446587mm"
   height="88.283783mm"
   viewBox="0 0 324.02334 312.81655"
  ">
  <g inkscape:label="Calque 1" inkscape:groupmode="layer"  id="layer1"  transform="translate(-195.07415,-387.53806)">
 
    <path id="Ville 1"
       d="m 366.56834,440.06557 c -1.56055,-0.85942 -2.83736,-3.00299 -2.83736,-4.7635 0,-2.97373 -0.62602,-3.13135 -8.82005,-2.22078 -5.66251,0.62926 -9.20854,0.38582 -9.90522,-0.68001 -1.53597,-2.34985 6.44191,-9.74527 13.97993,-12.95924 5.09287,-2.17144 6.36669,-3.53045 6.36669,-6.79249 0,-2.67022 1.53915,-5.15502 4.4587,-7.19813 2.45229,-1.71612 6.20874,-6.43826 8.34766,-10.49364 3.57217,-6.77285 4.0652,-7.14552 6.05283,-4.57536 1.81448,2.34625 2.81959,2.51559 6.2246,1.04869 3.72666,-1.60547 4.13698,-1.40599 4.98784,2.42498 2.25371,10.14712 6.4323,12.72672 14.62895,9.03096 5.68976,-2.56543 6.10793,-2.56449 9.12897,0.0205 3.00685,2.57291 3.4115,2.57596 8.0469,0.0605 4.74893,-2.57702 4.96748,-2.55524 8.08672,0.80589 1.99769,2.15259 3.50145,2.79364 3.99013,1.70096 0.43133,-0.96444 2.1532,-1.41503 3.82637,-1.00132 2.19653,0.5431 3.78278,-0.60201 5.70659,-4.11954 1.78011,-3.25481 3.47924,-4.57609 5.11947,-3.98097 1.35026,0.48992 3.46346,0.89076 4.696,0.89076 2.4475,0 10.46462,10.25562 10.46462,13.3865 0,1.21276 -2.21439,1.94366 -5.88869,1.94366 -3.23878,0 -8.34603,1.43598 -11.34945,3.19106 -3.00341,1.75508 -5.46076,2.46922 -5.46076,1.58695 0,-0.88226 -1.52716,-2.3769 -3.39371,-3.32141 -4.27181,-2.16165 -11.3944,-0.65722 -10.24909,2.1648 0.45918,1.13142 -0.97603,3.17904 -3.18937,4.55027 -3.93154,2.4357 -4.10452,2.3703 -7.50973,-2.83928 -4.05452,-6.20292 -4.58453,-6.30118 -12.74798,-2.3634 -5.46673,2.63699 -6.07354,3.49417 -5.42611,7.66509 0.54233,3.49371 0.0937,4.69607 -1.75198,4.69607 -1.3645,0 -2.72575,0.69445 -3.02497,1.54323 -0.35344,1.00253 -2.31579,0.91091 -5.60081,-0.2615 -4.48564,-1.60089 -5.89225,-1.34176 -12.45428,2.29433 -4.06864,2.25447 -7.85991,5.4765 -8.42504,7.16006 -1.15527,3.44165 -2.01828,3.64115 -6.07837,1.40521 z"
       id="path3607"/>
    <path id="Ville 2"
       d="m 292.85832,506.64509 c -1.08092,-0.41465 -3.4627,-3.0447 -5.29282,-5.84459 -2.34507,-3.58767 -4.95501,-5.37938 -8.83979,-6.06846 -4.35807,-0.77304 -6.24444,-2.30588 -9.00882,-7.32052 -3.46486,-6.28531 -3.46826,-6.3786 -0.37509,-10.30303 2.00679,-2.5461 8.85075,-6.16747 19.16568,-10.14121 23.00726,-8.86335 38.90789,-17.34537 47.01485,-25.07955 5.64128,-5.38188 7.51242,-6.37461 9.32872,-4.94934 1.62322,1.27375 3.51592,1.33569 6.62814,0.21689 5.68501,-2.04368 4.79441,-2.36029 11.37083,4.04232 5.18138,5.04443 6.16727,5.43304 9.80615,3.86539 2.22772,-0.95971 4.0456,-3.03962 4.0456,-4.62873 0,-1.84079 2.5508,-4.16534 7.04372,-6.41898 6.67346,-3.34738 7.24643,-3.39887 10.89954,-0.97953 4.78847,3.17124 7.99832,3.27319 7.99832,0.25404 0,-1.26473 1.09441,-2.29952 2.43203,-2.29952 1.69548,0 2.43202,-1.61426 2.43202,-5.33022 0,-4.0521 1.01345,-5.95806 4.22645,-7.9486 3.74577,-2.32062 4.3838,-2.35253 5.61012,-0.28061 0.76102,1.28578 2.75213,3.93569 4.42469,5.88868 l 3.04102,3.55089 6.75169,-3.58791 c 3.7134,-1.97336 6.75166,-4.49567 6.75166,-5.60516 0,-3.09154 2.56842,-2.40285 5.34072,1.43206 l 2.49352,3.44929 6.53753,-3.44929 c 3.59564,-1.89711 8.94661,-3.43149 11.89104,-3.40973 4.60434,0.034 5.75056,0.85513 8.19086,5.86778 3.16923,6.50991 3.66269,10.95583 1.21602,10.95583 -0.89174,0 -1.62135,1.41492 -1.62135,3.14426 0,2.1444 -1.80453,3.85716 -5.67472,5.38613 -4.64541,1.83523 -5.67472,3.05248 -5.67472,6.71084 0,2.45794 1.17418,5.57918 2.60928,6.9361 1.55882,1.47389 2.30208,3.98669 1.84619,6.24156 -0.64414,3.18601 -0.1392,3.77444 3.2389,3.77444 3.17552,0 3.76076,0.55403 2.83392,2.68277 -2.7781,6.38053 -2.66948,8.51113 0.65033,12.75678 5.67901,7.26277 -0.33561,4.85587 -12.45106,-4.98261 -6.66732,-5.41429 -8.60278,-5.40863 -11.87708,0.0347 -2.25328,3.746 -4.58684,4.77598 -17.04416,7.52295 -9.42546,2.07842 -18.4378,5.36563 -25.97435,9.47406 -8.96084,4.88483 -15.79018,7.14211 -30.54825,10.09701 -23.68509,4.74229 -34.10471,4.98255 -36.44922,0.84045 -0.92311,-1.63088 -1.67839,-4.28339 -1.67839,-5.89446 0,-1.61107 -1.45054,-4.17042 -3.22343,-5.68745 -3.11864,-2.66856 -3.42174,-2.62875 -9.32276,1.22448 -3.35463,2.1905 -8.80904,5.04829 -12.12091,6.35065 -3.31187,1.30236 -6.80318,3.74878 -7.75845,5.43649 -1.63866,2.89504 -6.38434,3.79874 -10.88417,2.07262 z"
       id="path3609" />
 
    <path  id="Ville 3"
       d="m 499.92431,678.83361 c -9.6213,-3.69891 -9.39839,-3.43419 -34.38476,-40.83267 -8.71231,-13.04023 -9.57837,-13.85073 -14.79897,-13.85073 -3.0498,0 -6.45338,1.03474 -7.5635,2.29948 -2.76684,3.15227 -16.63674,2.99546 -26.3546,-0.29781 -6.77998,-2.29769 -8.72114,-4.07011 -16.10645,-14.70648 -9.22711,-13.28889 -6.99388,-12.38073 -22.77252,-9.26052 -3.80881,0.75318 -5.91673,-0.49877 -14.97055,-8.89149 l -10.53756,-9.7681 -6.62254,-24.52825 c -6.48996,-24.03715 -8.3359,-27.97175 -19.8695,-42.35161 -1.09985,-1.37126 -6.11445,-3.7196 -11.14357,-5.21852 -11.11044,-3.31145 -10.90716,-5.64691 0.9462,-10.8713 4.54407,-2.0028 9.58148,-4.50472 11.19426,-5.55984 2.46055,-1.60975 3.30831,-1.43964 5.26937,1.05739 1.28539,1.63668 2.33707,4.4841 2.33707,6.3276 0,5.89746 3.81615,7.33094 16.6619,6.25883 22.40593,-1.87001 40.60075,-6.30027 54.05442,-13.16172 6.98339,-3.56158 19.28291,-8.13959 27.33227,-10.17337 13.3168,-3.36466 17.46678,-5.62466 19.16288,-10.43574 0.3252,-0.92244 4.03135,1.18593 8.2359,4.68528 4.83847,4.02695 12.08238,7.89281 19.73406,10.5315 9.83446,3.3914 12.09058,4.77411 12.0955,7.41297 0.008,4.01713 3.27359,9.04962 15.98833,24.63532 7.24879,8.88558 9.93724,13.46011 9.91049,16.86317 -0.0202,2.56844 -1.09592,33.64388 -2.3905,69.05653 -1.29459,35.41269 -2.37248,66.62864 -2.39532,69.36893 -0.0491,5.89247 -1.06831,6.00303 -13.01231,1.41115 z"  />
 
    <path   id="Ville 4"
       d="m 246.18316,580.80746 c -4.06953,-2.10136 -10.58612,-3.64654 -17.49376,-4.14804 l -11.00836,-0.79921 -6.39952,-13.67657 c -3.51973,-7.5221 -7.92827,-15.21519 -9.79675,-17.09573 -1.86848,-1.88054 -3.76866,-6.07395 -4.22262,-9.31868 l -0.82538,-5.89948 15.97858,-5.07905 c 14.40514,-4.57889 16.31757,-5.63561 19.42093,-10.7311 6.22844,-10.2266 18.87644,-23.44913 25.47474,-26.63194 6.30386,-3.04077 6.54445,-3.0483 8.69223,-0.27182 1.21493,1.57053 2.62221,4.41165 3.12731,6.31361 0.68999,2.59816 2.47641,3.69366 7.18383,4.40539 4.77311,0.72167 6.98965,2.10785 9.30593,5.81978 2.69195,4.31394 4.55664,5.19989 16.2668,7.72871 16.63486,3.59232 20.69281,5.95059 28.36612,16.4849 4.88531,6.7068 7.31816,12.7428 11.67985,28.97816 3.03009,11.27875 5.52615,21.54831 5.54682,22.82121 0.0288,1.77466 -2.32563,2.41722 -10.09586,2.75533 -5.57338,0.24252 -11.59264,0.37042 -13.37613,0.28424 -28.7351,-1.38866 -63.16158,-1.43529 -64.58705,-0.0875 -2.52754,2.38984 -5.9498,1.91099 -13.23771,-1.85223 z"
      />
  </g>
</svg>
</body>
</html>

**01001111** · 03/07/2015, 01h14

Bonjour, tu peux essayer avec onmouseover

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<path   id="Ville 4"
       d="m 246.18316,580.80746 c -4.06953,-2.10136 -10.58612,-3.64654 -17.49376,-4.14804 l -11.00836,-0.79921 -6.39952,-13.67657 c -3.51973,-7.5221 -7.92827,-15.21519 -9.79675,-17.09573 -1.86848,-1.88054 -3.76866,-6.07395 -4.22262,-9.31868 l -0.82538,-5.89948 15.97858,-5.07905 c 14.40514,-4.57889 16.31757,-5.63561 19.42093,-10.7311 6.22844,-10.2266 18.87644,-23.44913 25.47474,-26.63194 6.30386,-3.04077 6.54445,-3.0483 8.69223,-0.27182 1.21493,1.57053 2.62221,4.41165 3.12731,6.31361 0.68999,2.59816 2.47641,3.69366 7.18383,4.40539 4.77311,0.72167 6.98965,2.10785 9.30593,5.81978 2.69195,4.31394 4.55664,5.19989 16.2668,7.72871 16.63486,3.59232 20.69281,5.95059 28.36612,16.4849 4.88531,6.7068 7.31816,12.7428 11.67985,28.97816 3.03009,11.27875 5.52615,21.54831 5.54682,22.82121 0.0288,1.77466 -2.32563,2.41722 -10.09586,2.75533 -5.57338,0.24252 -11.59264,0.37042 -13.37613,0.28424 -28.7351,-1.38866 -63.16158,-1.43529 -64.58705,-0.0875 -2.52754,2.38984 -5.9498,1.91099 -13.23771,-1.85223 z"
     onmouseover="function(event) { document.querySelector('#id_du_noeud_ou_afficher').innerHTML=event.target.id.replace(/[0-9]+$/, "$1"); }" />

pour le zoom je te conseille de passer par un ecouteur mousewheel, mais trouve les bonnes sources pour ça, car le delta varie selon les navigateurs, il faut normaliser. Après avoir obtenu le mousewheel tu pourras animer le div#map avec jquery par exemple.

bon courage

**alaaKH** · 03/07/2015, 16h21

Merci beaucoup pour l'aide, mais le fonction mouseover ne marche pas, pour vous expliquer plus voila cet exemple : http://www.amcharts.com/svg-maps/?ma...oWesternSahara

http://www.amcharts.com/svg-maps/?ma...oWesternSahara

Mercii

**01001111** · 03/07/2015, 17h33

Je viens de faire un test, j'ai compris mon erreur...
par exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
onmouseover="function(event) { document.querySelector('#id_du_noeud_ou_afficher').innerHTML=event.target.id.replace(/[0-9]+$/, "$1"); }"

ne fonctionne pas tandis que

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
onmouseover="document.querySelector('#id_du_noeud_ou_afficher').innerHTML=event.target.id.replace(/[0-9]+$/, "$1");"

ou

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
onmouseover="(function(event) { document.querySelector('#id_du_noeud_ou_afficher').innerHTML=event.target.id.replace(/[0-9]+$/, "$1"); })(event)"

devraient fonctionner

**melka one** · 03/07/2015, 20h49

pour le scroll molette sa c'est ameliorer il existe maintenant l’événement wheel commun a tous les navigateurs

ajoute ce script pour zoomer qui utilise scale du css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var val=1
addEventListener('load',function(){document.getElementById('vgs').addEventListener('wheel',dirizoom, false)},false);
 
function dirizoom(e){
	e.preventDefault();
	e.deltaY < 0 ? val+=0.1 : val-=0.1;
	document.getElementById('vgs').style.transform='scale('+val+')';
}

**01001111** · 04/07/2015, 02h03

ça c'est amélioré, oui, mais pas totalement, dans mes tests j'ai constaté de grandes différences entre valeurs de deltaY entre plateformes...
de plus ce dernier bout de code ne peut fonctionner de manière unifiée car dans certains cas l'évènement est déclenché un fois avec une valeur correspondant à tous les crans de molette parcourus, dans d'autres cas, l'évènement est déclenché pour chaque cran de molette parcouru.
J'ai amélioré une fonction trouvée sur le net en prenant en considération ce problème.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
(function(window,document) {
 
	var prefix = "", _addEventListener, _removeEventListener, onwheel, support;
	// detect event model
	if ( window.addEventListener ) {
		_addEventListener = "addEventListener";
	} else {
		_addEventListener = "attachEvent";
		prefix = "on";
	}
	if ( window.removeEventListener ) {
		_removeEventListener = "removeEventListener";
	} else {
		_removeEventListener = "detachEvent";
		prefix = "on";
	}
 
	// detect available wheel event
	support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
			  document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
			  "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
	window.addWheelListener = function( elem, callback, useCapture ) {
		_addWheelListener( elem, support, callback, useCapture );
 
		// handle MozMousePixelScroll in older Firefox
		if( support == "DOMMouseScroll" ) {
			_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
		}
	};
	window.removeWheelListener = function( elem, callback ) {
		_removeWheelListener( elem, support, callback );
 
		// handle MozMousePixelScroll in older Firefox
		if( support == "DOMMouseScroll" ) {
			_removeWheelListener( elem, "MozMousePixelScroll", callback );
		}
	};
	window.timeLastWheelEvent=-1;
	window.currentWheelChange=-1;
	function wrapperFunction ( originalEvent, callback ) {
		!originalEvent && ( originalEvent = window.event );
		// create a normalized event object
		var event = {
			// keep a ref to the original event object
			originalEvent: originalEvent,
			target: originalEvent.target || originalEvent.srcElement,
			type: "wheel",
			deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
			deltaX: 0,
			delatZ: 0,
			preventDefault: function() {
				originalEvent.preventDefault ?
					originalEvent.preventDefault() :
					originalEvent.returnValue = false;
			}
		};
		// calculate deltaY (and deltaX) according to the event
		if ( support == "mousewheel" ) {
			originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
		}
		// normalize deltaY
		var w=originalEvent.wheelDelta, d=originalEvent.detail, y=originalEvent.deltaY;
		if (d) {
			if (w) {
				event.deltaY=w/d/40*d>0?1:-1;
			} else {
				event.deltaY=-d/3;
			}
		} else if (w) {
			event.deltaY=-w/120;
		} else if (y && /mac/i.test(window.navigator.platform)) {
			event.deltaY=y*10;
		} else if (y) {
			event.deltaY=y/3;
		}
		if (Math.abs(event.deltaY)==1) {
			var time=(new Date()).getTime();
			if (window.timeLastWheelEvent==-1) {
				window.timeLastWheelEvent=time;
				window.currentWheelChange=event.deltaY;
			} else if (time-window.timeLastWheelEvent<40 && event.deltaY/Math.abs(event.deltaY)==window.currentWheelChange/Math.abs(window.currentWheelChange)) {
				window.timeLastWheelEvent=time;
				window.currentWheelChange+=event.deltaY;
			} else if (time-window.timeLastWheelEvent<40) {
				event.deltaY=window.currentWheelChange*4;
				window.currentWheelChange=-1;
				window.timeLastWheelEvent=-1;
				return callback(event);
			}
			setTimeout(function() {
				var timeDelayed=(new Date()).getTime();
				if (window.currentWheelChange!==0 && window.timeLastWheelEvent!=-1 && timeDelayed-window.timeLastWheelEvent>25) {
					event.deltaY=window.currentWheelChange*4;
					window.currentWheelChange=-1;
					window.timeLastWheelEvent=-1;
					return callback(event);
				}
			}, 25);
		} else {
			window.currentWheelChange=-1;
			window.timeLastWheelEvent=-1;
			return callback(event);
		}
	}
	function _addWheelListener( elem, eventName, callback, useCapture ) {
		elem[ _addEventListener ]( prefix + eventName, function(event) { wrapperFunction(event, callback); }, useCapture || false );
	}
 
	function _removeWheelListener( elem, eventName, callback ) {
		elem[ _removeEventListener ]( prefix + eventName, function(event) { wrapperFunction(event, callback); });
	}
 
})(window,document);

Carte interactive

JavaScript

Vue hybride

Discussions similaires

Partager

Partager