Cartographie dynamique de la france avec une base mysql et des balises map--------------------------------------------------------------------------
Url     : http://codes-sources.commentcamarche.net/source/51962-cartographie-dynamique-de-la-france-avec-une-base-mysql-et-des-balises-mapAuteur  : cs_buchronDate    : 03/08/2013
Licence :
=========

Ce document intitul  Cartographie dynamique de la france avec une base mysql et des balises map  issu de CommentCaMarche
(codes-sources.commentcamarche.net) est mis  disposition sous les termes de
la licence Creative Commons. Vous pouvez copier, modifier des copies de cette
source, dans les conditions fixes par la licence, tant que cette note
apparat clairement.

Description :
=============

Script php/html avec un plugin de jquery permettant d'afficher une carte Fran&cc
edil;aise dynamique (coupl&eacute;e avec MySQL). Au clic du d&eacute;partement, 
un lien emm&egrave;ne le visiteur sur la page voulue.
<br />Le tout fonctionne 
chez moi &agrave; ce lien : <a href='http://partir-en-vtt.com/balades_pieds/inde
x.php' target='_blank'>http://partir-en-vtt.com/balades_pieds/index.php</a>
<br
 />Je vous donne tout pour r&eacute;ussir votre propre carte (code, carte libre 
de la France et la base de donn&eacute;es avec les bonnes g&eacute;om&eacute;tri
es)
<br /><a name='source-exemple'></a><h2> Source / Exemple : </h2>

<br /><p
re class='code' data-mode='basic'>
&lt;?php
	/* Script permettant de gnrer d
es balises map sur une carte Franaise  l'aide d'un plugin jquery
	Vous pouvez
 utiliser ce script dans un but non commercial
	Crateur : admin@partir-en-vtt.
com
	Dmonstration : <a href='http://partir-en-vtt.com/balades_vtt/index.php' t
arget='_blank'>http://partir-en-vtt.com/balades_vtt/index.php</a>
	Support du s
cript : admin@partir-en-vtt.com */
	?&gt;
	
	&lt;!--dbut de votre site--&gt;

	&lt;p align=&quot;justify&quot;&gt;
	Ayant la fibre du cartographe, je vous 
ais mit une jolie France comme vous pouvez le constater !
	C'est donc le moment
 de rviser vos dpartements si vous avez des petits doutes !
	Cette mise en pl
ace doit vous permettre de vous dirigez vers un Dpartement en particulier. &lt;
br /&gt;&lt;br /&gt;
	Je vous invite donc  cliquer sur les dpartements &lt;st
rong&gt;rouges&lt;/strong&gt; de la carte de France pour lister toutes mes balad
es  VTT. &lt;br/&gt;&lt;br /&gt;&lt;/p&gt;
	 
	&lt;center&gt;
	&lt;!--Cartog
raphie dynamique utilisation de la classe maphilight de jquery--&gt;
	&lt;!-- i
l est ncessaire d'avoir jquery pour pouvoir colorier les images maps automatiqu
ement (vous devez changer les liens qui pointes sur ces fichiers donns dans le 
package--&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;/js/jquery
/jquery-1.2.3.pack.js&quot;&gt;&lt;/script&gt;
	&lt;!-- Plugin de coloration de
s balises map--&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;/js/
jquery/jquery.metadata.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;t
ext/javascript&quot; src=&quot;/js/jquery/jquery.maphilight.js&quot;&gt;&lt;/scr
ipt&gt;
	&lt;script&gt;
	$(function() {
		$('.map2').maphilight({fade:true});

		
	});

	&lt;/script&gt;
	
	&lt;?php
	//on se connecte  sa base
	mysq
l_connect($hostname, $username, $password) or die('DB connection unavailable');


	mysql_select_db($dbname) or die('Unable to select database'); 
	
/* 	Je fais
 une requte SQL qui me dit s'il y a ou pas une balade sur chaque dpartement. 


	J'ai donc deux tables (dptf), une avec la gomtrie du dpartement et l'autre 
(balade) qui contient mes balades avec un champ dprtement qui me dit que cette 
balade est rattaches  tel ou tel dpartement.
	Vous pouvez tester n'importe q
uoi, il suffit d'adapter la requte et les champs de la base de donnes

<ul> 
<li>/	</li></ul>
 
/*
	SI j'explique la requte en Franais a dirait : Selec
tionne moi la gomtrie, le numro de dpartement, son nom  partir de la table 
&quot;dptf&quot; qui sont DANS les balades 
	VTT(WHERE vtt_oui_non = 0) de la t
able BALADE&quot; 
	Ce qui fait que si la requte trouve le numro 88, le dpar
tement des vosges va se colorier en rouge et devenir cliquable

<ul><li>/	</li
></ul>
	$requete2 = 'SELECT geometrie, num, dept'
        . ' FROM dptf'
    
    . ' WHERE num'
        . ' IN (SELECT DISTINCT departement FROM balade WHER
E vtt_oui_non = 0)' or die(mysql_error());
				
	$rslt_map = mysql_query($requ
ete2);	

	?&gt;
	&lt;img id=&quot;image&quot; src=&quot;/balades_vtt/departem
ents/france_finale.jpg&quot; border=&quot;0&quot; alt=&quot;Cartographie dynamiq
ue de la rpartition des balades de partir-en-vtt.com&quot; 
	title=&quot;Carto
graphie de la rpartition des balades  vtt&quot; class=&quot;map2&quot; usemap=
&quot;#france&quot; width=&quot;586&quot; height=&quot;548&quot; /&gt;
	&lt;map
 name=&quot;france&quot;&gt;
	&lt;?php
	//tant qu'il y a des dpartements  cr
er...je rcupre la gomtrie le numero de dpartement et son nom
	while( $tab
 = mysql_fetch_array($rslt_map ))
	{
		$chaine_geometrie = $tab['geometrie'];


		$nom_dep = $tab['dept'];
		$num_dep = $tab['num'];
		
		
	?&gt;
	&lt;!--
Puis on crer 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 m
on cas grace au plugin maphilight de jquery--&gt;
	&lt;!--On peut imaginer que 
les liens hypertextes soient rattachs  votre base de donnes dans un champ &qu
ot;url&quot;--&gt;
	
	&lt;area shape=&quot;poly&quot; alt=&quot;&lt;?php echo 
'Liste des balades du dpartement '. $nom_dep.' ('. $num_dep.')' ; ?&gt;&quot; t
itle=&quot;&lt;?php echo $nom_dep.' ('.$num_dep.')' ; ?&gt;
	&quot; id=&quot;fr
ance&quot; class=&quot;{fill:true,fill:'000000',fillColor:'C03000',strokecolor:'
C03000',fillOpacity:0.5,alwaysOn:true}&quot; coords=&quot; &lt;?php echo $chaine
_geometrie;?&gt;&quot; 
	href=&quot;/balades_vtt/departements/index.php?numdep=
&lt;?php echo $num_dep; ?&gt;&quot; /&gt;
	&lt;?php
	}
	echo '&lt;/map&gt;'; 
?&gt;
	
	&lt;!-- Fin Cartographie dynamique--&gt;
	&lt;/center&gt;&lt;br /&gt
;
	&lt;/fieldset&gt;&lt;br /&gt;&lt;br /&gt;
	&lt;p&gt;Bon visionnage et ...cl
iquage !&lt;/p&gt;
	&lt;!-- fin de votre site--&gt;
</pre>
<br /><a name='con
clusion'></a><h2> Conclusion : </h2>

<br />Ayant pas mal gal&eacute;r&eacute; 
&agrave; trouver ce que ce morceau de code fait, je me suis dis que de le partag
er pourrait peut &ecirc;tre en aider quelques-uns.
<br />
<br />Les g&eacute;o
m&eacute;tries des images maps sont stock&eacute;es en bases. C'est avec GIMP qu
e j'ai r&eacute;cup&eacute;r&eacute; cette g&eacute;om&eacute;trie. Il ma surtou
t fallu beaucoup de patience pour faire le contour de chaque d&eacute;partement!

<br />
<br />Au final, avec pas grand chose , nous obtenons un r&eacute;sulta
t sympa (sous ff et IE voir avec les autre?) qui fait exactement ce que l'on veu
t. A savoir cr&eacute;er un lien dynamiquement par d&eacute;partement et autoris
er le clic que si il y &agrave; quelque chose &agrave; voir sur le d&eacute;part
ement en question.
<br />
<br />S'il manque des explications, n'h&eacute;sitez
 pas &agrave; me dire o&ugrave; et ce qui vous pose probl&egrave;me.
<br />Auus
i, merci de me dire ce que vous en pensez ;-)
<br />
<br />Lo&iuml;c, administ
rateur de www.partir-en-vtt.com
