Menu
Hello,
I am fairly new to JavaScript/AJAX but I am hoping to find a solution for a project I am working on.
At present I have an image of a map of Canada
(similar to: [url]http://www.cid-bdc.ca/unemployment/images/mapBackground.jpg
At present I am working on a web application that shows certain statistics about each province when one is clicked on. I have read a bit into SVG and have come up with an image map of sorts using SVG and polygon’s.
[code=html]
<polygon class=”province” points=”20,155 3,351 125,366 98,291 127,215 20,155″ onclick=”setProv(‘British Columbia’);” title=”British Columbia” />
<polygon class=”province” points=”128,215 100,295 126,367 160,375 191,232 128,215″ onclick=”setProv(‘Alberta’);” title=”Alberta” />
<polygon class=”province” points=”190,233 162,374 235,386 241,241 190,233″ onclick=”setProv(‘Saskatchewan’);” title=”Saskatchewan” />
<polygon class=”province” points=”241,240 235,384 287,385 287,335 330,282 290,239 241,240″ onclick=”setProv(‘Manitoba’);” title=”Manitoba” />
<polygon class=”province” points=”331,280 288,337 287,391 340,399 363,386 389,419 415,425 409,471 476,404 430,398 413,342 385,325 382,298 331,280″ onclick=”setProv(‘Ontario’);” title=”Ontario” />
<polygon class=”province” points=”387,194 429,392 437,400 482,397 519,320 570,292 575,260 514,300 485,262 510,254 474,195 469,225 444,200 387,194″ onclick=”setProv(‘Quebec’);” title=”Quebec” />
<polygon class=”province” points=”538,341 517,360 544,380 565,355 538,344″ onclick=”setProv(‘New Brunswick’);” title=”New Brunswick” />
<polygon class=”province” points=”564,355 553,388 568,396 600,339 587,328 583,350 564,356″ onclick=”setProv(‘Nova Scotia’);” title=”Nova Scotia” />
<polygon class=”province” points=”559,344 555,351 575,351 577,342 559,344″ onclick=”setProv(‘Prince Edward Island’);” title=”Prince Edward Island” />
<polygon class=”province” points=”473,187 514,253 490,265 511,288 585,261 590,319 643,289 614,269 589,258 554,230 516,220 473,187″ onclick=”setProv(‘Newfoundland and Labrador’);” title=”Newfoundland and Labrador” />
Now, what I would like to do is change the colour of the province based on the statistics which are loaded.
For example: If the user were to want to find unemployment rates by province, I would like to be able to shade the provinces with the colours based on the current unemployment rate for that province.
I am able to load and display these rates in a table, and currently I also have them stored in an array.
At the moment I can think of two ways to do this, of which I have had mixed results.
[B]Method 1:
This is the code I have been using for this method:
[CODE]
function colorizeProvs()
{
for(i = 2; i <= 11; i++)
{
var data = provData[i].split(“,”);
var provName = data[0];
var provRate = data[dateVal];
var opacity = provRate * 0.01 * 5;
document.getElementById(provName).style.opacity=opacity;
document.getElementById(provName).style.filter = “alpha(opacity=” + opacity + “);”;
document.getElementById(provName).style.fill = “RED”;
}//end for
}//end of colorizeProvs
However, as the provinces are quite complex in shape and have quite “messy” lines, this method provides block like shapes which don’t line up with the provinces properly.
[B]Method 2:
For example:
Unemployment Rate: 0.0% – 5.0% gets one colour.
Unemployment Rate: 5.1% – 10.0% gets a slightly darker version of this colour
etc.
The problem with this is that the shading is not as precise, it doesn’t show changes of 1-2% unless they fall over a range break, and the other problem with this has been my implementation.
Because each province is shaded individually, I have not been able to code an adequete solution for overlaying the province images with the shading overtop of the “complete map” background image so that they line up properly AND the polygon’s and other SVG points do not get adjusted or covered by these images.
Can anyone offer and pointers or other methods that may work in a situation like this?
Thanks for all your help!