Cartographie dynamique en lien avec base de données

**Marc31** · 21/04/2015, 10h18

Bonjour à tous,

J'ai trouvé un code sur internet pour créer une carte en relation avec une base de données.
Mais j'aimerais savoir si c'est possible d'ajouter une fonction qui affiche de la couleur sur le departement quand la souris passe dessus? (onmouseover)
Si quelqu'un pouvait m'aider, merci.

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<center>
	<!--Cartographie dynamique utilisation de la classe maphilight de jquery-->
	<!-- il est nécessaire d'avoir jquery pour pouvoir colorier les images maps automatiquement (vous devez changer les liens qui pointes sur ces fichiers donnés dans le package-->
	<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
	<!-- Plugin de coloration des balises map-->
	<script type="text/javascript" src="jquery.metadata.min.js"></script>
	<script type="text/javascript" src="jquery.maphilight.js"></script>
	<script>
	$(function() {
		$('.map2').maphilight({fade:true});
 
	});
 
	</script>
 
	<?php
 
        $requete2 = 'SELECT * FROM dep';
                                
        $rslt_map = mysql_query($requete2);     
        
 
        ?>
 
	<img id="image" src="carte.png" border="0" alt="Cartographie" title="Cartographie" class="map2" usemap="#france" width="515" height="715" />
	<map name="france">
	<?php
        //tant qu'il y a des départements à créer...je récupère la géométrie le numero de département et son nom
        
 
 
        while( $tab = mysql_fetch_array($rslt_map ))
        
        {
                
                $nom_dep = $tab['de_titre'];
                $num_dep = $tab['de_num'];
                $num_info = $tab['de_info'];
                $num_url = $tab['de_url'];
                $chaine_geometrie = $tab['de_geom'];
                
                
                $site_relais = $tab['deptmp_site'];
                
        ?>
        <!--Puis on créer la balise map avec des infos sur l'infobulle et un lien hypertexte dynamique (propre à mon site) 
        ces balises map seront colorer en rouge dans mon cas grace au plugin maphilight de jquery-->
        <!--On peut imaginer que les liens hypertextes soient rattachés à votre base de données dans un champ "url"-->
        
        <br>
 
        
                <area shape="poly"  alt="<?php echo 'Liste '. $nom_dep.' ('. $num_dep.')' ; ?>" title="<?php echo $nom_dep.' ( '.$num_dep.' )';?>" id="france" class="{fill:true,fill:'000000',fillColor:'C03000',strokecolor:'C03000',fillOpacity:0.1,alwaysOn:true}" coords=" <?php echo $chaine_geometrie;?>" href="<?php echo $num_url; ?>" />
 
 
        <table>
 
        <tr>
    <td>Site relais:</td>
        <td><?php echo $site_relais;?></td>
 
	</tr>
 
	</table>
 
 
	<?php
        }
        echo '</map>'; ?>

**Marc31** · 21/04/2015, 11h36

En cherchant, j'ai trouvé un code plus adapté à ce que je veux faire et qui marche.
Il y a juste un bug au niveau des couleurs des départements....lorsque je passe la souris sur un département, c'est un autre département qui devient en couleur.
Je n'ai qu'un seul departement qui fonctionne bien....

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
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
 </table>
 
				    <script type="text/javascript">
						function swapPic(zone,nr){
							var pic=document.getElementById('hovered')
								pic.src='area/'+nr+'.png'
									zone.onmouseout=function(){pic.src='area/0.png'}
									}
						</script>
 
							<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="txt.css"/>
 
 
								<style type="text/css">
 
										img {border:0;}
 
								</style>
				</head>
 
				<center>
 
 
				<body>
 
 
 
 
 
 
 
				<div id="pic" style="height: 715; width: 515; background-position: center; background-image: url('area/carte.png'); background-repeat: no-repeat">
				<img id="hovered" src="area/0.png" usemap="#Map" width="515" height="715" />
 
				<map name="Map">
 
 
                <?php
 
                                        $requete2 = 'SELECT * FROM deptMP';
 
                                        $rslt_map = mysql_query($requete2);
 
 
                while( $tab = mysql_fetch_array($rslt_map ))
 
                                        {
                                        
                                        $nom_dep = $tab['deptmp_titre'];
                                                $num_dep = $tab['de_num'];
                                                $num_info = $tab['de_info'];
                                                $num_url = $tab['de_url'];
                                                $chaine_geometrie = $tab['de_geom'];
                                                $site_relais = $tab['de_site'];
                                                $id = $tab['de_id'];
 
 
                             ?>
 
 
 
 
				<area href="<?php echo $num_url; ?>" title="<?php echo $nom_dep.' ( '.$num_dep.' ) ' .$id.' '.$site_relais;?>" onmouseover="swapPic(this,<?php echo $id;?>)" shape="polygon" coords="<?php echo $chaine_geometrie;?>">
 
 
 
            <?php
 
                                }
                                
                        echo '</map>'; ?>
 
 
 
 
				</map>

**SpaceFrog** · 21/04/2015, 11h38

Une petit recherche ..
http://www.developpez.net/forums/d96...l-area-survol/

Mais cette solution sera lourde si il faut tous les départements

ça se fait bien avec canvas / svg par contre:
http://dev.filkor.org/2013/04/14/cre...html-5-canvas/
http://davidlynch.org/projects/maphi...emo_world.html
https://parall.ax/blog/view/2985/tut...active-svg-map
mêem un plugin jquery raphael
http://www.vincentbroute.fr/mapael/

**Marc31** · 22/04/2015, 10h03

Bonjour, tout d'abord merci pour la réponse et il n'y aura que quelques départements (environ 5 Départements).
Et j'ai entendu parler d'openlayers et python, c'est difficile à mettre en place?

Cartographie dynamique en lien avec base de données

JavaScript

Discussions similaires

Partager

Partager