search

neveldo / jQuery-Mapael

jQuery plugin based on raphael.js that allows you to display dynamic vector maps
https://www.vincentbroute.fr/mapael/
MIT License
1.01k stars 195 forks source link

Unable to set fill attribute of path element ? #244

Closed damthemad closed 8 years ago

damthemad commented 8 years ago

Hi,

i tried this : areas: { "department-10": {attrs: {fill: "url#img1"},value:"Aube", text: {content:"10",attrs: {fill: "#FFFFFF"}},tooltip: {content:"Aube"}}, ...

but when i'm inspecting with chrome, i obtain this : <path fill="#5d5d5d" stroke="#5d5d5d" d="M457.73,157. [..]" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round;" stroke-width="1" stroke-linejoin="round" data-id="department-10"></path>

fill overloading seems to be ignored ? Or maybe i made a syntax mistake ?

Thanks 4 help

FYI i want to add an image as background which i had setup with this : $('#forcageFlexMode > div.map > svg > defs').prepend("<pattern id='img1' patternUnits='userSpaceOnUse' width='600' height='450'> <image xlink:href='daisy-grass-repeating-background.jpg' x='0' y='0' width='600' height='450'/> </pattern>"); src : http://www.boogdesign.com/examples/svg/path-pattern-fill.svg

My need is to show two dimensions on the same map (give a department two visual attributes, image and color. image for region membership and color for an other data like an other membership) ; i'm not sure this is the right way even if it is possible (as i'm writing, i think that i'm stupid because you can't have a background color and a background image at the same time). If you have an idea ? (perhaps, i'll use plots)

neveldo commented 8 years ago

Hello @damthemad ,

Regarding the backgound-image on the areas, you can take a look at this code example : http://jsfiddle.net/neveldo/m9yLgfLq/ . Feel free to take a look at the documention of Raphael.js to get more information about the fill attribute : http://dmitrybaranovskiy.github.io/raphael/reference.html .

Regarding your need to show two dimensions, indeed a background-image and a background color will be hard to combine (unless the background image has some transparent parts such as hatching). Maybe using plots could be a good alternative !

damthemad commented 8 years ago

Thanks 4 help. I used plots finally. I know the fill attribute of Rapahel.js, but I think my problem with fill attribute came from that the img doesn't exist yet at map's construction time (added to svg html element later with jquery). An other possible way is to use fill: 'url("data:image/svg+xml;base64,code de l'image en base 64")'

Thanks again 4 your work, Js and Css are not my friends but I have made a good job with Mapel, some efforts, and your kindly help.

neveldo commented 8 years ago

You are welcome @damthemad , I'm glad it helped you !