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

Soyez le premier à donner votre avis sur cette source.

Vue 18 218 fois - Téléchargée 2 561 fois

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
15
Date d'inscription
mercredi 24 mai 2006
Statut
Membre
Dernière intervention
19 octobre 2010

C'est parce que j'utilise une version compressée.

On peut certainement trouver la version non compressée sur le site de davidlynch : http://davidlynch.org/js/maphilight/docs/

N'hésite surtout pas à me dire si tu trouves d'où viens le problème!

Buchron
Messages postés
15
Date d'inscription
jeudi 21 avril 2005
Statut
Membre
Dernière intervention
21 septembre 2009

Bonjour,
Je vous crois que ca marche chez vous avec FireFox 3.6.10
j'ai la meme version
Je cherche toujours le problème
Comme je vous l'ai dit j'ai deux fichier js, un qui fonctionne sous FF et pas sous IE et l'autre visce et versa, j'ai donc fait un hack c'est tout
Pour l'instant je me contente de ca
je vais pas modifier le js entre le votre et celui de jquery il y a 112 lignes de codes d'écart, c'est pas faute d'avoir essayé, mais bon voila.
Messages postés
15
Date d'inscription
mercredi 24 mai 2006
Statut
Membre
Dernière intervention
19 octobre 2010

Bonjour,

Étrangement, chez moi, ça a toujours fonctionné sous FF sur mon pc perso, au boulot ou encore chez des amis.

Ici, j'ai la version 3.6.10 je peux faire une capture d'écran au besoin!

Buchron.
Messages postés
15
Date d'inscription
jeudi 21 avril 2005
Statut
Membre
Dernière intervention
21 septembre 2009

Bonjour
J'ai testé le lien que vous donnez ci dessus, sous IE8 cela fonctionne
le meme lien sous FF 3.6.10 ne fonctionne pas
Je sais que cela vient du fichier js
les balises map ne sont pas coloriées sous FF
Messages postés
15
Date d'inscription
mercredi 24 mai 2006
Statut
Membre
Dernière intervention
19 octobre 2010

De mon côté, j'ai testé sous FF et IE 8 ça fonctionne par contre sous IE9 (qui est encore une BETA) on ne voit pas les balises map se colorier.

Buchron
Afficher les 31 commentaires

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.