Accueil > > > CARTOGRAPHIE DYNAMIQUE DE LA FRANCE AVEC UNE BASE MYSQL ET DES BALISES MAP
 CARTOGRAPHIE DYNAMIQUE DE LA FRANCE AVEC UNE BASE MYSQL ET DES BALISES MAP
 Information sur la source
 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 J e 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
- <?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-->
-
-
<?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
 Historique
- 29 juin 2010 20:22:37 :
- Explication plus détaillée de la requête SQL
- 29 juin 2010 20:33:56 :
- Oubli des fichiers javascript dans l'archive ;-)
 Sources de la même categorie
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
carte meteo de france en flash [ par extremepc ]
bonjour a tous !! j'explique mon probleme!ce soir je doit rendre un mon examen en flash et j'ai pas eu le temps de le faire!! car trop de boulot.le pr
carte dynamique [ par zeitoun69 ]
bonjour je souhaiterais créer un carte de ville ou une cible se deplacerait en fonction de la latittude et la longitude placée dans la base de donnée.
carte géographique de la France [ par winosx01 ]
Bonsoir,Je dois créer une carte géographique en php/mysql. Si on clique sur une ville, affichage du nombre d'habitants, densité,département,région.Mer
carte de france flash avec lien des départements vers un fichier php [ par manuel49 ]
Je cherche une personne qui pourrait me trouver le moyen de faire un lien vers un fichier php qui récupère les données d'un fichier exc
carte dynamique avec affichage des résultats [ par aschen ]
Salut à tous, Je désire une carte de france dynamique par département(cette partie je peux la fournir en javascript, hml, flash) qui affiche en coule
Carte de france avec informations par département [ par Damsssss ]
Bonjour,Je cherche à afficher sur une page web une carte de france où l'on peut cliquer sur chaque département. Lorsqu'un département est sélectionné
Calendrier Dynamique cliquable [ par midoxe ]
salut tt l monde...j'ai besoin d'integrer un calendrier dynamique cliquable qui affiche dans un input comme celui la : choisir une date : la date
Ex de site de vidéos dynamique. [ par alexilaiho1 ]
Bonjour, Je suis novice en [b]PHP[/b], et je voudrais de l'aide concernant un truc qui me démange la tête depuis longtemps.[^^sad1] Ça consiste a fai
Eviter des doublons d'un rand sur une requête [ par SnapFAB ]
Bonjour à tous, Après beaucoup de recherche je n'ai pas trouvé de solution à mon problème. C'est pour cela que je me permets d'écrire sur ce forum à
tableau php dynamique [ par sly784965 ]
Bonjour, je possède sur une page php un tableau dynamique qui me permet d'insérer dans un fichier texte et d'afficher suivant la sélection dans deux
|
Derniers Blogs
 IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
 GOOGLE MAPGOOGLE MAP par fatmanajjar
Cliquez pour lire la suite par fatmanajjar
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|