bonjour, je souhaite créer une carte de france dynamique j'ai donc recuperé une carte en js

elle s'affiche nikel et m'indique bien les région, je souhaite maintenant que quand je clique dessus elle par sur la bonne région,

si je le fais manuellement comme sur le code si dessous ca fonctionne, mais mon soucis et de passer ma variable php dans le lien

de la carte qui est lui en js :

	<script type="text/javascript">
	$(document).ready(function() {
		$('#francemap').vectorMap({
		    map: 'france_fr',
			hoverOpacity: 0.5,
			hoverColor: "#EC0000",
			backgroundColor: "#ffffff",
			color: "#FACC2E",
			borderColor: "#000000",
			selectedColor: "#EC0000",
			enableZoom: true,
			showTooltip: true,
		    onRegionClick: function(element, code, region)
		    {
		        {
		        window.location.href = 'http://www.monsite.fr/-21-' + region;
		    }
		    }
		});
	});
	</script>

sur cette ligne :  window.location.href = 'http://www.monsite.fr/-21-' + region;

le 21 est mis manuellement mais je souhaite placer une variable php a la place

merci

je ne trouve pas, je m'arrache les cheveux !!!

resultat :  url = http://monsite.fr/ -<?php echo $ide ;?>-Provence-Alpes-Côte d'Azur

je devrais avoir : http://monsite.fr/ -21-Provence-Alpes-Côte d'Azur

	<script type="text/javascript">
	$(document).ready(function() {
	var curr = '<?php echo $ide ;?>';
		$('#francemap').vectorMap({
		    map: 'france_fr',
			hoverOpacity: 0.5,
			hoverColor: "#EC0000",
			backgroundColor: "#ffffff",
			color: "#FACC2E",
			borderColor: "#000000",
			selectedColor: "#EC0000",
			enableZoom: true,
			showTooltip: true,
		    onRegionClick: function(element, code, region)
		    {
		        {
		        window.location.href = 'http://www.monsite.fr/-'+ curr +'-' + region;
		    }
		    }
		});
	});
	</script>

<?php
$ide ="21";
?>

 merci pour vos lumieres

-
Edité par olivierlebaron 19 décembre 2014 à 9:39:07

Et tu as quoi à la place de 21 qui s'affiche ?

Tu as ouvert la console du navigateur pour voir si tu avais des erreurs ?

bon j'ai changer de carte, j'ai une map et je souhaite placer le nombre d'annonces postées par département :

"17":{"path":"M327.25,61.98l-26.82-4.56l2.41-6.26l-13.89,0.61l-7.34-8.19l-10.14-0.57l-6.35-4.65l4.49-27.99l6.36-5.52l14.86-2.5L307.96,0l3.43,15.74l6.98,5.38l13.3-4.25l5.65,16.43l9.49,1.64l3.75,11.31l17.97,1.57l2.44,18.56l-5.76,4.26l-6.39-5.9l-9.93,2.61l-7.6-2.48l-9.94,3.3L327.25,61.98z","name":"Nord-Pas-de-Calais - annonces"},

 en faite a cet endroit : "name":"Nord-Pas-de-Calais - annonces" je voudrais placer une variable php pour déterminer le nombre d'annonce postées, le soucis c'est que c'est un fichier en .js et que le php ne passe pas, avez vous une idée pour placer ma requete php et afficher ma variable ?

merci

Ton fichier peut-être un fichier .PHP qui génère ton fichier JSON (ne pas oublier le header JSON)

Ensuite tu inclus ton fichiers normalement <script src='mon fichier.php'></script>

je ne comprend pas ce que tu me dit

je voudrais afficher une variable ici

jQuery.fn.vectorMap('addMap','france_fr',
{"width":530,"height":581,

"pathes":{"17":{"path":"M327.25,61.98l-26.82-4.56l2.41-6.26l-13.89,0.61l-7.34-8.19l-10.14-0.57l-6.35-4.65l4.49-27.99l6.36-5.52l14.86-2.5L307.96,0l3.43,15.74l6.98,5.38l13.3-4.25l5.65,16.43l9.49,1.64l3.75,11.31l17.97,1.57l2.44,18.56l-5.76,4.26l-6.39-5.9l-9.93,2.61l-7.6-2.48l-9.94,3.3L327.25,61.98z","name":"Nord-Pas-de-Calais -<?php $mavariable?php> annonces"},

-
Edité par olivierlebaron 20 décembre 2014 à 15:30:50

Tu as dit dans l'un de tes précédents message que c'était un fichier .js et que le PHP ne passait pas ; ce qui est faux et je t'ai expliqué dans mon message précédent comment faire.

Ce qui par la même occasion règle ton problème.

Etant donné que PHP peut générer un fichier JSON tu peux y injecter les données PHP que tu veux dedans. Et ce même fichier pourra ensuite être utilisé par ta lib.

-
Edité par Fieldset 20 décembre 2014 à 19:02:18

alors j'ai regardé sur un site qui utilise la meme carte que moi et j'ai décortiqué ce site, il n'injecte pas de php dans son fichier map, je ne comprend pas comment il font, 

voici le lien du site http://autovision.rdv-online.fr/

quand ont passe la souris sur une ville on a bien la ville qu'y s'affiche dans l'infobulle, de mon coté aussi mais en plus en dessous in a le nombre de centre, moi c'est le nombre d'annonce que je desire afficher

merci

Comment gères-tu l'infobulle ?

J'ai une solution derrière la tête mais j'ai besoin de savoir deux trois trucs. Comment gères-tu l'affichage de l'infobulle ? Es-tu allé sur le site du plugin pour voir comment gérer les différents évènements du survol d'une région du clic sur une région, etc ?

La version de la lib jqvmap que tu m'as montré sur le site d'autovision est une version modifiée et les développeurs ont modifiés directement la lib de manière très dégueulasse (le niveau des dev est franchement limite).

Bref...tout ça pour dire que si tu regarde la lib sur leur site : http://autovision.rdv-online.fr/js/jqvmap/jquery.vmap.js en recherchant dans le fichier la ligne qui contient ceci (ctrl+f) '$.getJSON' tu t’aperçois qu'au survol d'une région il effectue une requête ajax (get json) qui va récupérer un fichier json : http://autovision.rdv-online.fr/js/nb_centres_dept.json qui associe au numéro du département le nombre de centres.

Alors effectivement ils ne font peut-être pas de PHP dans ce fichier parce que le nombre de centres ne doit pas évoluer du jour au lendemain et que dès qu'un nouveau centre est créé ils doivent modifier le contenu du fichier à la main. Ou alors, autre solution ils utilisent PHP pour regénérer ce fichier actualisé à intervalle régulier. Ou bien encore, c'est du PHP qui génère ce fichier à la vollée.

Bref...de plus ils requêtent ce fichier à chaque fois que la souris survol une région alors qu'il pourrait le charger une bonne fois pour toute et aller taper dedans en JS uniquement lorsque c'est nécessaire...

non en faite en bout de ma ligne j'ai :

,"name":"Bretagne"},

ensuite je gere par css et js

css :

.jqvmap-label
{
        position: absolute;
        display: none;
        -webkit-border-radius: 3px 3px 3px 3x;
        -moz-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
        border-top: 1px solid #3d3d3d;
		border-bottom: 1px solid #3d3d3d;
        border-left: 1px solid #3d3d3d;
        border-right: 1px solid #3d3d3d;
        background: #014ba3; /* Old browsers */
        background: #014ba3 -moz-linear-gradient(top, rgba(0,85,190,1) 0%, rgba(0,65,125,1) 100%); /* FF3.6+ */
        background: #014ba3 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,85,190,1)), color-stop(100%,rgba(0,65,125,1))); /* Chrome,Safari4+ */
        background: #014ba3 -webkit-linear-gradient(top, rgba(0,85,190,1) 0%,rgba(0,65,125,1) 100%); /* Chrome10+,Safari5.1+ */
        background: #014ba3 -o-linear-gradient(top, rgba(0,85,190,1) 0%,rgba(0,65,125,1) 100%); /* Opera11.10+ */
        background: #014ba3 -ms-linear-gradient(top, rgba(0,85,190,1) 0%,rgba(0,65,125,1) 100%); /* IE10+ */
        background: #014ba3 linear-gradient(top, rgba(0,85,190,1) 0%,rgba(0,65,125,1) 100%); /* W3C */
        color: #fff;
        text-shadow: 0 1px  rgba(1,1,1,0.5);
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
        font-weight: 700;
        padding: 5px 10px 10px 10px;
        min-width: 100px;
        text-align: center;
}

et pour le js

jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'mouseover mouseout', function (e){
      var path = e.target,
      code = e.target.id.split('_').pop(),
      labelShowEvent = $.Event('labelShow.jqvmap'),
      regionMouseOverEvent = $.Event('regionMouseOver.jqvmap');

      if (e.type == 'mouseover')
      {
        jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.pathes[code].name]);
        if (!regionMouseOverEvent.isDefaultPrevented())
        {
          if (params.hoverOpacity)
          {
            path.setOpacity(params.hoverOpacity);
          }
          else if (params.hoverColor)
          {
            path.currentFillColor = path.getFill() + '';
            path.setFill(params.hoverColor);
          }
        }
        if(params.showTooltip)
        {
          map.label.text(mapData.pathes[code].name);
          jQuery(params.container).trigger(labelShowEvent, [map.label, code]);

          if (!labelShowEvent.isDefaultPrevented())
          {
            map.label.show();
            map.labelWidth = map.label.width();
            map.labelHeight = map.label.height();
          }
        }
      }
      else
      {
        path.setOpacity(1);
        if (path.currentFillColor)
        {
          path.setFill(path.currentFillColor);
        }

        map.label.hide();
        jQuery(params.container).trigger('regionMouseOut.jqvmap', [code, mapData.pathes[code].name]);
      }
    });

 en faite après le "name" (qui affiche ne nom de la région) je voudrais afficher une variable pour y indiquer le nombre d'annonce pour se departement (je verais après pour ma requete)

dans le css du lien il y a deux classe pour afficher, 

la premiere : .jqvmap-label affiche le nom du departement

la deuxieme : .jqvmap-label2 affiche le nombre de centre dans le département

voici je js du site en question ou du moins la partie qui m'interresse :

jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'mouseover mouseout', function (e){
                        var path = e.target,
                        code = e.target.id.split('_').pop(),
                        labelShowEvent = $.Event('labelShow.jqvmap'),
                        regionMouseOverEvent = $.Event('regionMouseOver.jqvmap');

                        if (e.type == 'mouseover')
                        {
                                jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.pathes[code].name]);
                                if (!regionMouseOverEvent.isDefaultPrevented())
                                {
                                        if (params.hoverOpacity)
                                        {
                                                path.setOpacity(params.hoverOpacity);
                                        }
                                        else if (params.hoverColor)
                                        {
                                                path.currentFillColor = path.getFill() + '';
                                                path.setFill(params.hoverColor);
                                        }
                                }
                                if(params.showTooltip)
                                {
                                        map.label.text(mapData.pathes[code].name+" "+code);
                                        jQuery(params.container).trigger(labelShowEvent, [map.label, code]);
                                        $.getJSON("js/nb_centres_dept.json", function(obj) {
                                                var letext = "dept"+code;
                                                var rep = obj[letext];
                                                if (rep == 0){nbcentres="aucun centre"}
                                                else if (rep == 1){nbcentres="1 centre"}
                                                else {nbcentres=rep+" centres"}
                                                map.label2.text(nbcentres);
                                        });
                                      

                                        if (!labelShowEvent.isDefaultPrevented())
                                        {
                                                map.label.show();
                                                map.labelWidth = map.label.width();
                                                map.labelHeight = map.label.height();
                                                map.label2.show();
                                        }
                                }
                        }
                        else
                        {
                                path.setOpacity(1);
                                if (path.currentFillColor)
                                {
                                        path.setFill(path.currentFillColor);
                                }

                                map.label.hide();
                                map.label2.hide();
                                jQuery(params.container).trigger('regionMouseOut.jqvmap', [code, mapData.pathes[code].name]);
                        }
                });

-
Edité par olivierlebaron 20 décembre 2014 à 20:01:00

en faite c'est sur cette partie que je bloque :

 if(params.showTooltip)
                                {
                                        map.label.text(mapData.pathes[code].name+" "+code);
                                        jQuery(params.container).trigger(labelShowEvent, [map.label, code]);
                                        $.getJSON("js/nb_centres_dept.json", function(obj) {
                                                var letext = "dept"+code;
                                                var rep = obj[letext];
                                                if (rep == 0){nbcentres="aucune annonce"}
                                                else if (rep == 1){nbcentres="1 annonce"}
                                                else {nbcentres=rep+" annonces"}
                                                map.label2.text(nbcentres);
                                        });
                                      

                                        if (!labelShowEvent.isDefaultPrevented())
                                        {
                                                map.label.show();
                                                map.labelWidth = map.label.width();
                                                map.labelHeight = map.label.height();
                                                map.label2.show();
                                        }
                                }

comment recuperer le nbcentres (moi j'ai modifier centres par annonce dans le texte)