nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

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??

Encontre mais publicações marcadas com

Accepted answers

cycheng

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

All comments

cycheng

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

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.

cycheng

FC_Basson

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:

<SPAN class="php token"><SPAN class="delimiter token"><?php</SPAN>
<SPAN class="token function">Header</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Content-type: image/svg+xml; charset=utf-8'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="variable token">$r1</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="token function">rand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="variable token">$g1</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="token function">rand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="variable token">$b1</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="token function">rand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="variable token">$r2</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="token function">rand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="variable token">$g2</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="token function">rand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="variable token">$b2</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="token function">rand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">echo</SPAN> '<SPAN class="markup token"><SPAN class="doctype token"><!DOCTYPE html></SPAN></SPAN>'<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">echo</SPAN> '<SPAN class="markup token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>svg</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>vectors1<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">viewBox</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0 0 100 100<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">preserveAspectRatio</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>xMinYMin meet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">version</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>1.1<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">xmlns</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" target="_blank">http://www.w3.org/2000/svg</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>'<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">echo</SPAN> '<SPAN class="markup token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>rect</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>data1<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">x</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">y</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>20<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>20<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">fill</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.$r1.'</SPAN>,<SPAN class="string token">'.$g1.'</SPAN>,<SPAN class="string token">'.$b1.'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="property token">stroke-width</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN><SPAN class="property token">stroke</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0<SPAN class="punctuation token">)</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN></SPAN>'<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">echo</SPAN> '<SPAN class="markup token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>rect</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>data2<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">x</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>20<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">y</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>20<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>20<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">fill</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.$r2.'</SPAN>,<SPAN class="string token">'.$g2.'</SPAN>,<SPAN class="string token">'.$b2.'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="property token">stroke-width</SPAN><SPAN class="punctuation token">:</SPAN>0<SPAN class="punctuation token">;</SPAN><SPAN class="property token">stroke</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0<SPAN class="punctuation token">)</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN></SPAN>'<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">echo</SPAN> '<SPAN class="markup token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>svg</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>'<SPAN class="punctuation token">;</SPAN>
<SPAN class="delimiter token">?></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

ErrorSTEP4.jpg

NeilMitchell

cy cheng That works fantastically for me many thanks.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.