Hi,
I am writing a test program that will flash 2 different colors on a
road (the coordinates for the road is stored in an xml file which I
am retrieving using AJAX). It should flash 5 times and then stop.
The two colours are Purple and then Green, Purple and then Green --> 5
times it should flash like this and then display a message that the
timer has cleared.
Anyways I have two problems:
a) The loop does not end after 5 consecutive loops. It continues to
flash even after 5 which is not what I want.
b) The big problem is that it is not flashing the entire road which
I've programmed it to flash. It only flashes a small portion of it,
which is the 1st element only.
Basically in my XML file I have 12 tags (each tag has its own series
of latitude and longitude coordinates), when these 12 tag's
coordinates are used and plotted they plot the PolyLine over a long
strech of the road. However only the 1st tag is being plotted. These
tags are stored in variables called "checkpoints".
So there are: LineTFT001 to LineTFT012. In return these "checkpoints"
are being stored in an array called "lines".
My problem is that it is giving (both in Firefox, IE and Chrome) an
error in p[lineIndex] beng undefined. I don't know why I am getting
this error, since I've defined the 'p' array globally. I believe it is
due to this that I am not getting all the points being plotted and
that only the points for the 1st tag (line[0]) is being plotted.
The errors the browsers are giving me are:
Firefox: p[lineIndex] is undefined --> Line: 92
Google Chrome:
Uncaught TypeError: Cannot call method 'setStrokeStyle' of
undefined. --> Line: 92
Here is my javascript code:
// Read the data from tables.xml
var inc = 0;
var request;
var p = new Array(); // The p stands for polylines
function getXML() {
request = GXmlHttp.create();
request.open("GET", "tables.xml", true); // The true means that it is
asynchronous
request.onreadystatechange = function() {
if (request.readyState == 4) { // A ready state of 4 means that
the
// response is ready and we can get our data
if (request.status == 200) {
processPolyLines(colour);
} else if (request.status == 404)
alert("Resource not found!");
else
alert("Status is " + request.status);
}
}
request.send(null);
}
function processPolyLines(colour) {
var xmlDoc = GXml.parse(request.responseText);
// ========= process the polylines ===========
for ( var j = 0; j < 12; j++) {
inc += 1;
if (j < 9) {
checkpoint = ("lineTFT00" + inc);
} else {
checkpoint = ("lineTFT0" + inc);
}
var lines =
xmlDoc.documentElement.getElementsByTagName(checkpoint);
// alert(checkpoint);
for
( var a = 0; a < lines.length; a++) {
var width = parseFloat(lines[a].getAttribute("width"));
// read each point on that line
var points = lines[a].getElementsByTagName("point");
var pts = [];
for ( var i = 0; i < points.length; i++) {
pts[i] = new GLatLng(parseFloat(points[i]
.getAttribute("latPoly")),
parseFloat(points[i]
.getAttribute("longPoly")));
}
p[a] = new GPolyline(pts,colour,width)
alert(a);
map.addOverlay(p[a]);
// map.addOverlay(new GPolyline(pts, colour, width));
}
}
if (counter == 0) {
setInterval("count_up()", 5000);
}
}
alert("Starting the function count_up{}!");
function count_up() {
alert("Inside the function now!");
if (tick == 0) {
for(var i=0; i<12; i++){
changeColors(i, "#FF00FF");
//alert("The function called is for purple line!");
tick = 1;
alert("tick 'code' has rendered polyline, value of tick = " +
tick);
}
//tick = 1;
//alert("tick 'code' has rendered polyline, value of tick = " +
tick);
} else {
if (tick == 1) {
for(var i=0; i<12; i++){
changeColors(i, "#00FF00");
// alert("The function called is for green line!");
tick = 0;
alert("tick 'code' has rendered polyline, value of tick
= " +
tick);
}
//tick = 0;
//alert("tick 'code' has rendered polyline, value of
tick = " +
tick);
}
}
if (++counter < 5) {
alert("The value of counter is now at " + counter);
timer = setInterval("count_up()", 5000);
} else {
clearInterval(timer);
alert("Timer cleared, Done!!");
}
}
function changeColors(lineIndex, colour){
p[lineIndex].setStrokeStyle({color: colour});
}
============================================================
I am also defining the variabes tick, counter and timer in the <head>
section of the main JSP document. With tick and counter being
initialized to 0.
The whole point of the function changeColors(lineIndex, colour) is so
that I can pass an index value corresponding to one of the 12 tags
(the 1st tag has index 0, tag 12 is represented with an index of 11
and each tag contains the coordinates for a particular subsection of
the road) and a colour argument. This way, I can control exactly which
section of the road I want it to be shaded in whatever colour I want
it to be. It currently should flash between purple and green for the
entire road (all 12 tags) but it is not doing that right now.
Any ideas guys please for the 2 questions I have will be much
appreciated thanks!
--
You received this message because you are subscribed to the Google Groups
"Google Maps API V2" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-api?hl=en.
