Problème affichage avec JVectorMap

Par ribellu2b, il y a 9 ans

Javascript

Bonjour tout le monde,

voici mon souci, j'utilise JVectorMap et je génère la cartre avec ce code :

map = new jvm.Map({ container: $('#article-map-research'), map: "world_mill_en", series: { regions: [{ values: jvectorMapData['taux'], scale: { "display-map-red": "#c62828", "display-map-green": "#00e676", "display-map-blue": "#1565c0", "display-map-superposition-red-green": "/img/vectormap/superposition-red-green.png", "display-map-superposition-red-blue": "/img/vectormap/superposition-red-blue.png", "display-map-superposition-green-blue": "/img/vectormap/superposition-green-blue.png", "display-map-superposition-green-red": "/img/vectormap/superposition-green-red.png", "display-map-superposition-blue-red": "/img/vectormap/superposition-blue-red.png", "display-map-superposition-blue-green": "/img/vectormap/superposition-blue-green.png", "display-map-superposition-red-green-blue": "/img/vectormap/superposition-red-green-blue.png" }, attribute: 'fill' }] }, onRegionTipShow: function (e, el, code) { var display = jvectorMapData['name'][code]; for (var entity in jvectorMapData['table'][code]) { for (var researchId in jvectorMapData['table'][code][entity]) { var colorValue = $("#first-color-picker-" + entity + "-" + researchId).val(); display = display + ' <br><span style="color:' + colorValue + ';">' + getEntitName(entity) + ' : ' + jvectorMapData["table"][code][entity][researchId] + '</span>'; } } el.html(display); } });

Comme vous pouvez le voir, j'utilise des couleurs et des images et à la première génération de la map , tout se passe bien :
![https://www.dropbox.com/s/r3ydtyznako40xg/0.png?dl=0]()

Mais quand je veux regénérer la même map avec les mêmes données, j'ai l'impression que les pays, qui sont mis en valeur avec une image, disparaissent de la map (exemple ici l'Italie) :

![https://www.dropbox.com/s/gtu98fqvrl2n90u/10.png?dl=0]()

Si vous avez une idée sur le problème, je suis preneur ! :)

D'avance merci :)

3 réponses

Lartak, il y a 9 ans

Bonjour.
La première définition de ta variable displayelle ne te sert à rien puisque tu l'écrases dès la première boucle.
Ensuite lorsque tu fais el.html(display); tu n'auras en fait que la dernière définition de la variable display dans ta boucle puisque tu l'écrase à chaque fois, tu devrais plutôt en incrémenter son contenu, soit :

var display = ''; for (var entity in jvectorMapData['table'][code]) { for (var researchId in jvectorMapData['table'][code][entity]) { var colorValue = $("#first-color-picker-" + entity + "-" + researchId).val(); display += jvectorMapData['name'][code] + ' <br><span style="color:' + colorValue + ';">' + getEntitName(entity) + ' : ' + jvectorMapData["table"][code][entity][researchId] + '</span>'; } } el.html(display);
ribellu2b, il y a 9 ans

J'ai testé ta solution mais j'ai toujours le même problème, au deuxième chargement de la map, lays pays qui étaient mis en valeur avec une image à la première génération de la map, disparaissent !
Comme tu peux le voir sur l'image ci-dessous :

![https://www.dropbox.com/s/lfote845tgy5nzk/map_jvectormap.png?dl=0]()

ribellu2b, il y a 9 ans

Finalement j'ai réussi à résoudre le souci en modifiant les valeurs à la volée :

var mapObject = $('#map-research').vectorMap('get', 'mapObject'); mapObject.series.regions[0].setValues(jvectorMapData['taux']);

Merci Lartak d'avoir pris le temps de regarder mon problème !