Message édité 14 fois, dernière édition par loic88, 16 Février 2010, 17:05
12 Février 2010, 18:05
12 Février 2010, 18:05 Bonjour bonsoir et bon week end !
Je me tourne une fois de plus vers votre savoir par rapport à un nouveau projet que j'ai nommé : "Carte département français cliquable et dynamique"
Tout en mangeant une cacahuète...(hum).
Alors voilà, sur mon site perso à cette adresse vous verrez une carte : Cartographie non dynamique
Cette carte permet de "localiser" mes balades par département. Au clic du département, une page affiche toutes les balades disponibles.
Cette carte utilise les balises html "map" et à été générée via GIMP2.
Seulement voilà, lorsque j'effectue une nouvelle balade dans un nouveau département, il faut que je rouvre GIMP et créer le nouveau polygone map et colorie le département ! Autant dire que ceci m'horrifie !
C'est alors qu'une idée est arrivée (roulement de tambours...) :
Et si on utilisait la librairie graphique de PHP (la fameuse librairie GD) ?
Dans ma réflexion voici comment j'aurais procédé :
1) => Je créer les polygones de tous les département avec gimp pour récupérer la géométrie de chaque département et les rentres dans la table département sous le nom de champ "geometrie"
2) => Je créer les centre dans gimp pour récupérer le x et le y de chaque centre de chaque département avec gimp et rentre le x et y dans la même table.
3) => Je prie pour que ça marche. Euh, je code en php.
Le principe est le suivant : Lorsqu'il y à une balade dans un département, je prends une logo (logo.jpg) que je vais fusionner sur l'image des départements français grâce à la fonction imagecopymerge() de la librairie GD.
Je boucle le tout pour "coller" cette icône sur tous les bons départements.
4) => Je créer les polygones de la balise map des départements grâce aux données du champs géométrie.
Au final, nous devrions donc avoir une carte des départements avec des logos de VTT sur les départements visités avec par dessus ou couche invisble représenté par la balise map qui pourra être cliquable.
Vous êtes toujours là ? Et bien voilà le code PHP !
Mais alors le soucis, c'est que ça ne marche pas en boucle par contre si je restreint la requête à un département (le 11 par ex), la petite icône apparaît bien. Quand à la balise map, elle n'est tout simplement pas générée.
Résultat avec le 11 (regardez au sud ouest) : Carte Bon ok c'est un peu trop bas on est dans le 66 mais l'idée est là !
Pour ceux qui souhaitent savoir comment est fait une balise map voici le code source de la carte actuelle.
Ce morceau de code appel deux tables :
dptf => num_dep | geometrie | x | y
balade => num_dep
C'est donc num_dep le champ "clé" qui me permet de voir quel département est couvert par une balade.
Si vous n'avez pas tout compris ou souhaite plus de détail (backup de ma base..) faites moi signe.
Merci à ceux et celles qui pourront m'aider !
Loïc.
Je me tourne une fois de plus vers votre savoir par rapport à un nouveau projet que j'ai nommé : "Carte département français cliquable et dynamique"
Tout en mangeant une cacahuète...(hum).
Alors voilà, sur mon site perso à cette adresse vous verrez une carte : Cartographie non dynamique
Cette carte permet de "localiser" mes balades par département. Au clic du département, une page affiche toutes les balades disponibles.
Cette carte utilise les balises html "map" et à été générée via GIMP2.
Seulement voilà, lorsque j'effectue une nouvelle balade dans un nouveau département, il faut que je rouvre GIMP et créer le nouveau polygone map et colorie le département ! Autant dire que ceci m'horrifie !
C'est alors qu'une idée est arrivée (roulement de tambours...) :
Et si on utilisait la librairie graphique de PHP (la fameuse librairie GD) ?
Dans ma réflexion voici comment j'aurais procédé :
1) => Je créer les polygones de tous les département avec gimp pour récupérer la géométrie de chaque département et les rentres dans la table département sous le nom de champ "geometrie"
2) => Je créer les centre dans gimp pour récupérer le x et le y de chaque centre de chaque département avec gimp et rentre le x et y dans la même table.
3) => Je prie pour que ça marche. Euh, je code en php.
Le principe est le suivant : Lorsqu'il y à une balade dans un département, je prends une logo (logo.jpg) que je vais fusionner sur l'image des départements français grâce à la fonction imagecopymerge() de la librairie GD.
Je boucle le tout pour "coller" cette icône sur tous les bons départements.
4) => Je créer les polygones de la balise map des départements grâce aux données du champs géométrie.
Au final, nous devrions donc avoir une carte des départements avec des logos de VTT sur les départements visités avec par dessus ou couche invisble représenté par la balise map qui pourra être cliquable.
Vous êtes toujours là ? Et bien voilà le code PHP !
PHP (Sélectionner le code)
<?php header("Content-Type: image/jpeg"); $racine=$_SERVER['DOCUMENT_ROOT'];//variable serveur permettant de rattaquer à partir de la racine :D include($racine . '/inclusion/connect.php'); $requete = 'Select num, geometrie, var_x, var_y FROM dptf //marche pas ! WHERE(SELECT DISTINCT num from balade) //marche WHERE num IN (11)' $rslt_geo = mysql_query($requete); while($tab=mysql_fetch_array($rslt_geo)) { $x = $tab['var_x']; $y = $tab['var_y'] ; // On charge d'abord les images $source = imagecreatefromjpeg("ico-vtt_mini.jpg"); // Le logo est la source $destination = imagecreatefromjpeg("france_finale.jpg"); // La photo est la destination // On met le logo (source) dans l'image de destination (la photo) imagecopymerge($destination, $source, $x, $y, 0, 0, 40, 43, 30); // On affiche l'image de destination qui a été fusionnée avec le logo imagejpeg($destination); } //on créer les polygones map (marche pas) echo '<img src=france_finale.jpg'.' width="586" height="548" border="0" usemap="#map" /> <map name="map">'; while(mysql_fetch_array($rslt_geo)) { $chaine_geometrie = $rslt_geo['geometrie']; // Changer href (num_departement) print '<area shape="polygon" coords="'.$chaine_geometrie.'" alt="zone" href="http://www.google.fr" />'; } echo '</map>'; ?>
Mais alors le soucis, c'est que ça ne marche pas en boucle par contre si je restreint la requête à un département (le 11 par ex), la petite icône apparaît bien. Quand à la balise map, elle n'est tout simplement pas générée.
Résultat avec le 11 (regardez au sud ouest) : Carte Bon ok c'est un peu trop bas on est dans le 66 mais l'idée est là !
Pour ceux qui souhaitent savoir comment est fait une balise map voici le code source de la carte actuelle.
HTML (Sélectionner le code)
<!--inclusion de la France --> <img src="france_map_vtt.jpg" width="589" height="548" border="0" usemap="#map" /> <map name="map"> <area shape="poly" coords="458,144,453,146,452,147,450,149,448,150,446,149,441,149,441,147,440,147,438,149,436,151,433,151,427,150,425,151,423,152,422,154,419,154,416,154,413,153,413,150,413,148,412,147,411,147,408,147,407,148,405,149,404,149,404,147,403,149,399,150,399,152,396,153,394,153,395,155,398,156,400,157,403,160,404,160,405,162,407,162,407,166,405,169,405,170,408,172,410,175,411,178,415,178,415,176,417,177,419,177,420,174,423,175,426,178,429,179,430,177,434,177,436,180,438,181,440,179,442,179,448,181,451,183,452,184,454,182,453,173,456,172,459,169,460,167,459,164,463,155,459,154,458,149,459,143" alt="Vosges" target="_parent" onmouseover="red" onmouseout="green" href="http://www.partir-en-vtt.com/balades_vtt/departements/index.php?dep=Vosges&numdep=88" /> <area shape="poly" coords="253,488,253,492,259,494,261,494,261,497,262,499,265,501,269,499,273,496,276,496,280,498,285,501,287,503,291,501,293,500,297,496,301,495,305,494,309,496,313,497,313,493,312,488,310,488,309,472,300,467,297,468,295,472,279,472,279,475,280,478,274,481,271,481,265,481,264,483,262,483,257,486,253,487,252,490" alt="Pyrénées Orientales" target="_parent" href="http://www.partir-en-vtt.com/balades_vtt/departements/index.php?dep=Pyrénnées_Orientales&numdep=66" /> <area shape="poly" coords="324,208,318,209,312,208,309,206,306,205,303,205,302,205,304,209,303,211,302,213,302,216,304,218,306,221,306,224,306,226,307,231,309,240,309,242,309,246,309,249,311,250,314,250,317,250,318,250,320,251,321,250,323,252,324,251,327,247,330,249,333,247,337,249,342,247,346,244,344,238,343,237,343,234,344,233,343,231,343,229,345,226,349,225,351,224,347,222,346,217,344,219,340,217,339,215,335,215,331,214,329,212,327,211,324,210" target="_parent" alt="Nievre" href="http://www.partir-en-vtt.com/balades_vtt/departements/index.php?dep=Nievre&numdep=58" /> <area shape="poly" coords="401,218,400,226,398,229,395,230,395,234,396,237,399,239,402,240,401,242,400,245,398,245,398,248,400,251,401,253,400,257,399,258,401,260,401,264,398,265,402,271,403,272,406,268,410,269,412,271,416,272,422,266,423,263,425,258,423,256,423,253,423,251,423,248,426,247,427,247,429,246,427,244,425,243,422,243,420,242,419,235,417,235,413,234,410,234,410,230,411,227,412,224,409,222,408,220" target="_parent" alt="Jura" href="http://www.partir-en-vtt.com/balades_vtt/departements/index.php?dep=Jura&numdep=39" /> <area shape="poly" coords="275,438,286,439,288,440,287,443,288,447,292,447,293,449,294,450,299,448,301,445,311,453,310,456,306,454,304,456,303,459,306,462,307,471,301,466,299,466,296,468,296,471,278,471,278,475,278,478,273,479,269,475,265,476,260,473,265,473,265,462,264,456,262,454,254,451,253,448,256,443,258,440,260,442,264,439,269,441,272,442,275,443" target="_parent" alt="Aude" href="http://www.partir-en-vtt.com/balades_vtt/departements/index.php?dep=Aude&numdep=11" /> </map>
Ce morceau de code appel deux tables :
dptf => num_dep | geometrie | x | y
balade => num_dep
C'est donc num_dep le champ "clé" qui me permet de voir quel département est couvert par une balade.
Si vous n'avez pas tout compris ou souhaite plus de détail (backup de ma base..) faites moi signe.
Merci à ceux et celles qui pourront m'aider !
Loïc.
