Click here to Skip to main content
15,887,248 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.

JavaScript
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();
            });
Posted
Updated 20-Oct-15 8:23am
v3

1 solution

Nevermind, i was able to convert the latitude and longitudes to pixels(points) and convert that into SVG format.
Thanks
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900