--- In [email protected], "Ben" <[EMAIL PROTECTED]> wrote:
>
> Hi all,
>
> I'm sure this is possible. In fact, dead sure...but just wanting to
> know if there is an efficient way of doing it.
>
> I have an SVG document made up of polygons, each polygon has a value.
> I want the user to click on a drop down menu asking for how many bands
> (1-2, 2-3, 3-4, etc) they want coloured and then colour each polygon
> according to the value and which band it falls within. All this will
> need to be done client-side. Has anyone done this before? In effect,
> for any GIS users out there...this is basically thematic mapping for
> SVG using Javascript.
>
> Thanx,
> Ben
>
I don't know if this will help but I have a real-time rainfall display
that I color code based on the rainfall values.
The data is loaded into the SVG display as text elements like this:
<g id="ALERT_rainfall">
<text id="Carr Street" x="492200.642284715" y="-4406056.80171278"
min_10="0.00" min_30="0.00" hour_1="0.00" hour_6="0.00"
hour_24="0.08">x</text>
.
.
.
</g>
I have three global variables called myRain, myLL and myUL. I also
have a radio checkbox that allows the user to select which rainfall
timestep to display (see www.carto.net)
When the checkbox is changed I run the following:
function toggleRain(cbId,radioId,label) {
myRain = radioId;
if (myRain == "min_10") {
myLL = 0.3;
myUL = 0.5;
}
else if (myRain == "min_30") {
myLL = 0.6;
myUL = 1.0;
}
else if (myRain == "hour_1") {
myLL = 0.8;
myUL = 1.5;
}
else if (myRain == "hour_6") {
myLL = 1.5;
myUL = 3;
}
else if (myRain == "hour_24") {
myLL = 3;
myUL = 5;
}
setRainfall();
}
This function sets the global variable myRain to the name of the
attribute I want to display and the globals myLL and myLL to threshold
values (more later).
Next I run the setRainfall function. This loops through every element
in the rainfall group and sets the text and changes the color based
on the value of the attribute for each element. This sounds like what
you want to do. The function is:
function setRainfall() {
var rainText = document.getElementById("ALERT_rainfall");
var child = rainText.firstChild;
while(child != null){
var rain = child.getAttributeNS(null,myRain);
if(rain == "-999") {
rain = "X";
child.setAttributeNS(null,"fill","red");
}
else if(rain == "0.00") {
rain = "*";
child.setAttributeNS(null,"fill","gray");
}
else if(parseFloat(rain) <= myLL) {
child.setAttributeNS(null,"fill","black");
}
else if(parseFloat(rain) <= myUL) {
child.setAttributeNS(null,"fill","magenta");
}
else {
child.setAttributeNS(null,"fill","red");
}
child.firstChild.data = rain;
child = child.nextSibling;
}
}
Hopefully the logic is clear. rainText is the group holding all the
rainfall text elements. child is set as the firstChild or the first
text element. rain is the actual value of the attribute of interest
(min_10,min_30, etc).
If the data is missing(-999) the text is set to a red X. If the value
is 0 the text is set to a gray *.
Otherwise I set the color to black if it is less that myLL, magenta if
less than myUL and red if greater than myUL. The actual text is
finally set to the actual rainfall amount. I then set child to the
next text element and continue the loop. This seems to be very
similar to what you want. It also works in IE/ASV, Firefox, and Opera.
The application is at http://www.lrcwe-data.com/rainfall.svg if you
want to see it in action (it is actually raining too!!)
Bruce Rindahl
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
