I am using the arcgis javascript API and am trying to get a feature layer polygon to show two different colours (for example half the polygon in red the other half in blue).

NeilMitchell · ‎01-31-2017

I am using the arcgis javascript API and am trying to get a feature layer polygon to show two different colours (for example half the polygon in red the other half in blue). The reason I am doing this is for political party representaion of a ward/division where more then one party has a seat an there is no overall majority. I can't see how this is possible in arcgis api without splitting the polygon somehow??

cycheng · ‎02-01-2017

This probably not the best solution, but I guess it's a start. PictureFillSymbol requires a picture as input but your input is rgb from DB right? Then the most obvious conclusion is to do something like render your own image with the rgb in JS or server level. Again, there are probably a lot of much better way than this, but you can for example prepare a few different pattern of image (2-color-mix, 3-color-mix etc) and then change the color on the fly somehow, I'm sure you can figure out the rest.

png - Change the color of an image in a website - Graphic Design Stack Exchange

View solution in original post

cycheng · ‎01-31-2017

here's a suggestion, have you tried to use a picture fill symbol for your polygon? You can make a half red/half blue picture and use that as your symbol.

NeilMitchell · ‎02-01-2017

Thanks for your reply cy, That is a great suggestion but the colour is from a database and could be any combination of rgb values so this sadly would not work for me. But thanks for your reply.

FC_Basson · ‎02-01-2017

How about rendering a SVG server-side and using that for the PictureFillSymbol.

Here is an example of PHP code that draws 2 adjacent rectangles with randomized colours:

<?php
Header('Content-type: image/svg+xml; charset=utf-8');

$r1 = rand(0,255);
$g1 = rand(0,255);
$b1 = rand(0,255);

$r2 = rand(0,255);
$g2 = rand(0,255);
$b2 = rand(0,255);

echo '<!DOCTYPE html>';
echo '<svg id="vectors1" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg">';
echo '<rect id="data1" x="0" y="0" width="20" height="20" style="fill:rgb('.$r1.','.$g1.','.$b1.');stroke-width:0;stroke:rgb(0,0,0)" />';
echo '<rect id="data2" x="20" y="0" width="20" height="20" style="fill:rgb('.$r2.','.$g2.','.$b2.');stroke-width:0;stroke:rgb(0,0,0)" />';
echo '</svg>';
?>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

cycheng · ‎02-01-2017

This probably not the best solution, but I guess it's a start. PictureFillSymbol requires a picture as input but your input is rgb from DB right? Then the most obvious conclusion is to do something like render your own image with the rgb in JS or server level. Again, there are probably a lot of much better way than this, but you can for example prepare a few different pattern of image (2-color-mix, 3-color-mix etc) and then change the color on the fly somehow, I'm sure you can figure out the rest.

png - Change the color of an image in a website - Graphic Design Stack Exchange

NeilMitchell · ‎02-03-2017

cy cheng That works fantastically for me many thanks.