Coloration multiple / légende double

[neveldo]

Coloration multiple / légende double

[neveldo]

Bonjour,

Pour le moment, mapael ne gère pas encore l'affectation de plusieurs couleurs par zone en hachuré ou dégradé, mais il s'agit d'une bonne idée d'évolution !

Vous pouvez toutefois paramétrer un background-image sur les zones, voici un exemple JSFiddle : http://jsfiddle.net/neveldo/5TZkS/ . A vous de définir ensuite les motifs pour les différentes combinaisons de couleurs (par contre il y a un effet de bord étrange au survol de la souris, j’essaierais de trouver un fix dès que possible).

Autre solution, vous pouvez gérer des dégradés CSS directement dans l'attribut fill des paths. Voici un exemple JSFiddle avec différents type de dégradé (simple ou hachuré) : http://jsfiddle.net/neveldo/b7pw9atv/ . La doc pour les gradient se trouve ici : http://raphaeljs.com/reference.html#Element.attr (voir la partie "Gradients"). Par contre il y a le même effet de bord au survol de la souris ...

[kikilevrai]

Merci pour l'astuce des dégradés mais comme la couleur du département est prise par rapport à la légende... pas évident :s

Après plusieurs test je n'arrive même pas à afficher une simple carte sans légende avec un dégradé dans les départements, j'ai aucun soucis pour les images, Mais impossible d'afficher un dégradé mon département reste tout blanc :/ que ce soit sur IE ou Firefox, j'utilise la vers 2.1.4 du fichier rapahel.js et la dernière version de mapael mais rien à faire j'ai que du blanc !

Dans le fichier source je ne trouve pas l'endroit ou les départements sont mis en couleur par rapport à la légende ! C'est vers qu'elle ligne que j'essaye d'y regarder si cela peux servir ;)

[neveldo]

Bonjour,

Dans cet exemple : http://jsfiddle.net/neveldo/b7pw9atv/, les dégradés sont configurés sur les lignes 10 et 17 :

attrs:{fill:"90-#f00:5-#00f:95"},
attrs:{fill:"135-#00f-#f00:15-#00f:30-#f00:45-#00f:60-#f00:75-#00f:90-#00f"},

La documentation pour configurer des dégradés est ici : http://raphaeljs.com/reference.html#Element.attr (CF : le paragraphe "Gradients", il s'agit d'une option de raphael.js).

[neveldo]

Bonjour,

Pour information, l'effet de bord au survol des zones contenant un dégradé provenant de l'animation. Celle-ci n'est pas supporté lorsque l'arrière-plan est une image ou un dégradé. Pour régler ce problème, il suffit de mettre à 0 la durée de l'animation au survol via le paramètre "animDuration", l'exemple sur JSFiddle est à jour.