fill color in an outline state map?

[lichtjiang]

I want to display a outline state map in web browser. Each state is going to be filled out with a color, which indicates some property of the state, such as temperature or population, etc. So, the map varies in color from time to time with changing property values.

I wanted to use javascript to first display a blank outline state map and then call some functions to fill color for each state from its center point. I got some help to do this by using GD-lib on server side. I am not familiar in either method. So, how to display a picture first and then fill it with some color in javascript and is this efficient? And any experience on GD-lib? Could anyone give me some hints?

Thanks!

 

[feherke]

Hi

Things used :
[ul]
[li]map.pl - the Perl script to fill the map areas[/li]
[li]map.txt - data file with max coordinates
Format :
identifier coordinates[ ...]
The identifier is the same as in data.txt.
The coordinates can be repeated in case of split areas and looks like :
x,y[;tx,ty]
The x and y are the coordinates of the fill starting point.
The tx and ty are the coordinates of the text if not the same as x and y.
[/li]
[li]data.txt - data for coloring the map
Format :
identifier value
The identifier is the same as in map.txt file.
The value is the order number of the palette color for filling.
[/li]
[li]map.png - blank map with borders only
Note that the script expects a plain map, so the areas to be filled must be filled with uniform colors.[/li]
[li]lutBS12.fnt - font file[/li]
[/ul]
Notes :
[ul]
[li]the script supports split areas, when more isolated areas belongs to one territory[/li]
[li]the script supports small areas, when the text does not fit into the area[/li]
[li]the texts have to be added after filling, so the map should not contain them[/li]
[li]the identifiers are the displayed texts, but is easy to modify[/li]
[li]text adjustment is arbitrary, because it works only with TT support and I do not have id compiled into my GD ( sorry, I have no time to recompile it now)[/li]
[/ul]

#!/usr/bin/perl

use GD;

$map=GD::Image->newFromPng("map.png");

$font=GD::Font->load("lutBS12.fon");

$blue=$map->colorAllocate(0,0,255);
$navy=$map->colorAllocate(0,0,127);

for ($i=0;$i<=100;$i++) {
  $pal[$i]=$map->colorAllocate(255,$val=255-(255/100*$i),$val);
}

open DATA,"<data.txt";
while (chomp($line=<DATA>)) {
  @data=split "\t",$line;
  $value{$data[0]}=$data[1];
}
close DATA;

open MAP,"<map.txt";
while (chomp($line=<MAP>)) {
  @data=split "\t",$line;
  for ($i=1;$i<scalar @data;$i++) {
    @pair=split ";",$data[$i];
    @coor=@tcoor=split ",",$pair[0];
    $map->fill($coor[0],$coor[1],$pal[$value{$data[0]}]);
    if (scalar @pair>1) {
      @tcoor=split ",",$pair[1];
      $map->line($coor[0],$coor[1],$tcoor[0],$tcoor[1],$blue);
    }
    $tcoor[0]-=12; $tcoor[1]-=12;
    $map->string($font,$tcoor[0],$tcoor[1],$data[0],$navy);
  }    
  
}
close MAP;

print "Content-type: image/png\r\n\r\n";

binmode STDOUT;

print $map->png;

ON	115,105
TW	115,210
TH	230,125
FO	285,210
FI	335,150	340,70
SI	98,35;115,20
SE	87,30;65,15
EI	85,40;55,30

ON	20
TW	78
TH	12
FO	33
FI	100
SI	10
SE	66
EI	81

http://savefile.com/files/598925

( Note : file will be removed after awhile. )

Feherke.

http://rootshell.be/~feherke/