I have used Raphael to create a map. The map uses VML as a base for creating graphics. (http://raphaeljs.com/world/world.js)
Ex: AE:
"M604.196,161.643l0.514-0.129l0,0.772l2.188-0.386l2.189,0l1.672,0.129l1.803-1.802l2.058-1.802l1.674-1.673l0.518,0.900l0.385,2.189l-1.417,0l-0.258,1.802l0.517,0.386l-1.159,0.515l-0.129,1.029l-0.773,1.159l0,1.030l-0.514,0.644l-8.110-1.416l-1.031-2.704l0.127,0.643z"
Now i want to create a beam on top of graphics/map. I have the latitudes and longitudes in the format: (google maps kml)
-179.0080262686512,72.44919440734023,0 -179.9677912703201,72.71249994657067,0 -179.9657988714002,-72.82078320488964,0 -177.4812918205323,-72.23332057332152,0 -172.0498955114732,-70.52244875649589,0 -167.9455035467147,-68.88694732353106,0 -165.1387032068626,-67.49857688521325,0 -160.9220717276851,-64.78432492031766,0 -159.3783965650377,-63.59564675541206,0 -157.6280567547742,-62.02770334452309,0 -157.6533556472257,62.00501162094417,0 -158.7554352522463,63.00914667841749,0 -160.5574944044803,64.48312333686154,0 -163.2822741949574,66.41080943557272,0 -165.354913704575,67.62270098660517,0 -166.6980478344921,68.33700471979863,0 -168.1538206537541,68.96442688585839,0 -170.4086752670357,69.83085776639233,0 -173.9435232478663,71.06052456542309,0 -177.1463075980723,71.94765928424363,0 -179.0080262686512,72.44919440734023,0
I can parse to get x and y axis array from this.
But is there any formula to convert coordinates (x,y) to VML format ?
The reason i am using is i need to support older IE browsers as well.
Any help will be greatly appreciated.
Raphael(10, 10, 1000, 400, function () {
var r = this;
r.rect(0, 0, 1000, 400, 10).attr({
stroke: "none",
fill: "0-#9bb7cb-#adc8da"
});
var over = function () {
this.c = this.c || this.attr("fill");
this.stop().animate({ fill: "#bacabd" }, 500);
},
out = function () {
this.stop().animate({ fill: this.c }, 500);
};
r.setStart();
for (var country in worldmap.shapes) {
r.path(worldmap.shapes[country]).attr({ stroke: "white", fill: "#f0efeb", "stroke-opacity": 0.25 });
}
var world = r.setFinish();
});