Guy,
I need to colour regions on a map according to the political party of the elected member for that region. Unfortunately, some regions have two elected members, and I need the fill colouring to reflect both parties, for example a striped fill colour for that region, like Macleans toothpaste.
I have been looking at one of the standard samples, which uses a callback function via the shapeStyleSelector attributor of the igMap series to set the shape colours dynamically. This returns a record of the form:
return { fill: colString, stroke: "gray" };
Where colstring is a standard colour, or an rgba() value.
The fill attribute looks like it probably maps onto the fillstyle attribute of the HTML 5 shape, which can accept a color, gradient, or pattern. So, I have had a go at passing a gradient or pattern to the fill attribute. Alas, it just seems only to take a single colour out of whatever I pass it.
Is this expected behaviour?
Is there any other way to solve my problem?
On more detailed note, is there a recommended way to find the canvas object in the shapeStyleSelector callback function?
Any ideas welcome. If I cannot crack this I'll have to look at another tool, unfortunately.
Mark
Hi, Mark
Yes, this is the expected behavior. We’re actually dealing with HTML5 Canvas polygons and not with HTML5 elements. Gradient or patterns are set by Canvas specific functions and not by CSS. (Look at this tutorial about this.)
You need the canvas object in order to create linear or radial gradient fills for Canvas and perhaps that is why you ask about a recommended way to get it. Unfortunately, there is no recommended way because the control tries to hide the actual Canvas element and expose public API for dealing with it in the context of geographic map and geographic series visualizing data. I think about a couple of workarounds but all of them would be “unofficial”.
If your requirements can be tweaked a bit I can suggest alternative solution. You can have single color shapes for regions where both representatives are from the same party and independent color shapes with markers for regions that are divided b/n parties. You can use the custom marker feature and plot a different marker in the middle of divided regions. That marker can be a larger circle or a rectangle colored with gradient or a pattern. The marker template callback function has access to the canvas object and can manipulate it. You can plot whatever you like in the marker template function.
Please, post here if you need additional guidance.
Cheers, Lazar
Lazar,
Thanks for that. Yes, I was referring to Canvas Shapes (polygons), and while I have some dodgy ways to find the canvas, setting a gradient on the fill: attribute in the callback didn't work. No CSS was involved.
Unfortunately I suspect the colouring of these regions is, by definition, political contentious. The elected members will be unhappy if the balance of the two colours is not exactly even.
Maybe a multi-coloured striped fill would be a useful enhancement in the future? If you could specify and array of colours along with a pattern type ( V-stripes, H-stripes, diagonal stripes) and maybe a stripe width in the callback, you could retain a clean API that doesn't need to expose the canvas object.
Thanks
Right, sure you need to get proper balance b/n colors when politics are involved :-)
That is why you can use a neutral color for the shapes themselves and create a marker where one half is red and the other is blue, or whatever is required in your case.
I also think that having multi-color striped fill or gradient fill out of the box for the map control will be a nice feature. Please, log a feature request about this and we can boost the priority.