Question

I am easily changing the color of polyline on click button my code below,

 var points = [  
     new GLatLng(24.85229, 67.01703),  
     new GLatLng(24.914463, 67.0965958)];
 var polyline = new GPolyline(points, '#ff0000', 5, 0.7); 

 GEvent.addListener(polyline, "click", function() {polyline.setStrokeStyle({ color: "#0000FF" }); });
map.addOverlay(polyline); 

but I want to change its color back to previous one on click such that if its initial color is red and on click it changes to blue then on other click it changes it to red again ... . then what should I do ?

Hopes for your reply..

Was it helpful?

Solution

There are many solutions for this. one is to create a swap function:

 var activeColor = '#ff0000';
 var inactiveColor = '#0000FF';

 var points = [   
                                   new GLatLng(24.85229, 67.01703),   
                                   new GLatLng(24.914463, 67.0965958)]; 
                                   var polyline = new GPolyline(points, activeColor, 5, 0.7);  

GEvent.addListener(polyline, "click", function() {
           // swap activecolor with inactivecolor
           var color = inactiveColor;
           inactiveColor = activeColor;
           activeColor = color;

           // set activecolor
           polyline.setStrokeStyle({ color: activeColor }); 
       }); 
       map.addOverlay(polyline);  
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top