Cartographie dynamique de la france avec une base mysql et des balises map

Télécharger le projet
Commenter

Description

Script php/html avec un plugin de jquery permettant d'afficher une carte Française dynamique (couplée avec MySQL). Au clic du département, un lien emmène le visiteur sur la page voulue.
Le tout fonctionne chez moi à ce lien : http://partir-en-vtt.com/balades_pieds/index.php
Je vous donne tout pour réussir votre propre carte (code, carte libre de la France et la base de données avec les bonnes géométries)

Source / Exemple : 


<?php
	/* Script permettant de générer des balises map sur une carte Française à l'aide d'un plugin jquery
	Vous pouvez utiliser ce script dans un but non commercial
	Créateur : admin@partir-en-vtt.com
	Démonstration : http://partir-en-vtt.com/balades_vtt/index.php
	Support du script : admin@partir-en-vtt.com */
	?>
	
	<!--début de votre site-->
	<p align="justify">
	Ayant la fibre du cartographe, je vous ais mit une jolie France comme vous pouvez le constater !
	C'est donc le moment de réviser vos départements si vous avez des petits doutes !
	Cette mise en place doit vous permettre de vous dirigez vers un Département en particulier. <br /><br />
	Je vous invite donc à cliquer sur les départements <strong>rouges</strong> de la carte de France pour lister toutes mes balades à VTT. <br/><br /></p>
	 
	<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="/js/jquery/jquery-1.2.3.pack.js"></script>
	<!-- Plugin de coloration des balises map-->
	<script type="text/javascript" src="/js/jquery/jquery.metadata.min.js"></script>
	<script type="text/javascript" src="/js/jquery/jquery.maphilight.js"></script>
	<script>
	$(function() {
		$('.map2').maphilight({fade:true});
		
	});

	</script>
	
	<?php
	//on se connecte à sa base
	mysql_connect($hostname, $username, $password) or die('DB connection unavailable');
	mysql_select_db($dbname) or die('Unable to select database'); 
	
/* 	Je fais une requête SQL qui me dit s'il y a ou pas une balade sur chaque département. 
	J'ai donc deux tables (dptf), une avec la géométrie du département et l'autre (balade) qui contient mes balades avec un champ déprtement qui me dit que cette balade est rattachées à tel ou tel département.
	Vous pouvez tester n'importe quoi, il suffit d'adapter la requête et les champs de la base de données


     
  • /	

 
/*
	SI j'explique la requête en Français ça dirait : Selectionne moi la géométrie, le numéro de département, son nom à partir de la table "dptf" qui sont DANS les balades 
	VTT(WHERE vtt_oui_non = 0) de la table BALADE" 
	Ce qui fait que si la requête trouve le numéro 88, le département des vosges va se colorier en rouge et devenir cliquable


  • /	

	$requete2 = 'SELECT geometrie, num, dept'
        . ' FROM dptf'
        . ' WHERE num'
        . ' IN (SELECT DISTINCT departement FROM balade WHERE vtt_oui_non = 0)' or die(mysql_error());
				
	$rslt_map = mysql_query($requete2);	

	?>
	<img id="image" src="/balades_vtt/departements/france_finale.jpg" border="0" alt="Cartographie dynamique de la répartition des balades de partir-en-vtt.com" 
	title="Cartographie de la répartition des balades à vtt" class="map2" usemap="#france" width="586" height="548" />
	<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 ))
	{
		$chaine_geometrie = $tab['geometrie'];
		$nom_dep = $tab['dept'];
		$num_dep = $tab['num'];
		
		
	?>
	<!--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"-->
	
	<area shape="poly" alt="<?php echo 'Liste des balades du département '. $nom_dep.' ('. $num_dep.')' ; ?>" title="<?php echo $nom_dep.' ('.$num_dep.')' ; ?>
	" id="france" class="{fill:true,fill:'000000',fillColor:'C03000',strokecolor:'C03000',fillOpacity:0.5,alwaysOn:true}" coords=" <?php echo $chaine_geometrie;?>" 
	href="/balades_vtt/departements/index.php?numdep=<?php echo $num_dep; ?>" />
	<?php
	}
	echo '</map>'; ?>
	
	<!-- Fin Cartographie dynamique-->
	</center><br />
	</fieldset><br /><br />
	<p>Bon visionnage et ...cliquage !</p>
	<!-- fin de votre site-->

Conclusion :


Ayant pas mal galéré à trouver ce que ce morceau de code fait, je me suis dis que de le partager pourrait peut être en aider quelques-uns.

Les géométries des images maps sont stockées en bases. C'est avec GIMP que j'ai récupéré cette géométrie. Il ma surtout fallu beaucoup de patience pour faire le contour de chaque département!

Au final, avec pas grand chose , nous obtenons un résultat sympa (sous ff et IE voir avec les autre?) qui fait exactement ce que l'on veut. A savoir créer un lien dynamiquement par département et autoriser le clic que si il y à quelque chose à voir sur le département en question.

S'il manque des explications, n'hésitez pas à me dire où et ce qui vous pose problème.
Auusi, merci de me dire ce que vous en pensez ;-)

Loïc, administrateur de www.partir-en-vtt.com
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.