Template:XsysGmap poly arrows dev

/* ----------------------------------- parametri -------------------------------------------

$polyline = $0 = [
                    -------  polyline 1  -------- 
                 { lat_lng: [         ---------------  le coordinate della polyline in ordine
                      {lat:'', lng:''}, -------------  latitudine e longitudine punto
                      {lat:'', lng:''}
                   ],
                   color: '';         ---------------  il colore della polyline : default='#AEB404'
                   arrow: true        ---------------  true -> polyline con le frecce; false -> polyline senza le frecce  
                 },
                   -------- polyline 2 ------------
                 { lat_lng: [
                      {lat:'', lng:''},
                      {lat:'', lng:''}
                   ],
                   color: '';
                   arrow: false
                 },
                 ....
                 ]

 ----------------------------------------------------------------------------------------- */

var polyline = $0 ?? $polyline ?? {};

<script>"

var polylines = eval("..json.emit(polyline)..");

GPolylineWithArrows = function( options ) {
    this.options = options;
    this.arrows = [];
};

GPolylineWithArrows.prototype = new google.maps.OverlayView();
GPolylineWithArrows.prototype.onAdd = function() {
    this.polyline = new google.maps.Polyline({
        path: this.options.path,
        strokeColor: this.options.strokeColor,
        strokeWeight: this.options.strokeWeight,
        strokeOpacity: this.options.strokeOpacity
    });
    this.polyline.setMap( this.getMap() );
};

GPolylineWithArrows.prototype.onRemove = function() {
    for( var i=this.arrows.length; i>0; i-- ){
        this.arrows[i-1].setMap( null );
        delete this.arrows[i-1];
        this.arrows.length--;
    };
    this.polyline.setMap(null);
    delete this.polyline;
};

GPolylineWithArrows.prototype.draw = function() {
/*   alert('arrows.length: '+this.arrows.length+'; path.length: '+this.options.path.length); */
   for( var i=this.arrows.length; i>0; i-- ){
     this.arrows[i-1].setMap( null );
     delete this.arrows[i-1];
     this.arrows.length--;
   };
   var prj = this.getProjection(), middle;
   for( var i=1; i<this.options.path.length; i++ ){
       var p1 = prj.fromLatLngToContainerPixel( this.options.path[i] ),
       p0 = prj.fromLatLngToContainerPixel( this.options.path[i-1] ),
       vector = new google.maps.Point( p1.x - p0.x, p1.y - p0.y ),
       length = Math.sqrt( vector.x * vector.x + vector.y * vector.y ),
       normal = new google.maps.Point( vector.x/length, vector.y/length );
 
       if( length>this.options.arrowSize ){
         if( this.options.middleArrow ) middle = new google.maps.Point( (p1.x + p0.x)/2, (p1.y + p0.y)/2 );
         else middle = p1;
         var offsetMiddle = new google.maps.Point( normal.x*this.options.arrowSize, normal.y*this.options.arrowSize ),
         arrowPart1 = new google.maps.Point( -offsetMiddle.y*0.4, offsetMiddle.x*0.4 ),
         arrowPart2 = new google.maps.Point( offsetMiddle.y*0.4, -offsetMiddle.x*0.4 ),
         arrowPoint1 = new google.maps.Point( middle.x - offsetMiddle.x + arrowPart1.x, middle.y - offsetMiddle.y + arrowPart1.y ),
         arrowPoint2 = new google.maps.Point( middle.x - offsetMiddle.x + arrowPart2.x, middle.y - offsetMiddle.y + arrowPart2.y );

         this.arrows[i-1] = new google.maps.Polygon({
           map: this.getMap(),
           path: [
             prj.fromContainerPixelToLatLng(middle),
             prj.fromContainerPixelToLatLng(arrowPoint1),
             prj.fromContainerPixelToLatLng(arrowPoint2)
           ],
           fillColor: this.options.fillColor ? this.options.fillColor : this.options.strokeColor,
           fillOpacity: this.options.fillOpacity ? this.options.fillOpacity : this.options.strokeOpacity,
           strokeColor: this.options.arrowStrokeColor ? this.options.arrowStrokeColor : this.options.strokeColor,
           strokeOpacity: this.options.arrowStrokeOpacity ? this.options.arrowStrokeOpacity : this.options.strokeOpacity,
           strokeWeight: this.options.arrowStrokeWeight ? this.options.arrowStrokeWeight : this.options.strokeWeight
         });
       };
   };
}; 

/* -------------------------------------------------------------------------------- */
var flightPath;
if(polylines.length > 0){
  flightPath = new Array(polylines.length);
  for ( var i=0; i<polylines.length; i++ ){
    if(polylines[i].lat_lng.length > 1){
      var pol = new Array(polylines[i].lat_lng.length);
      for (var j=0; j<polylines[i].lat_lng.length; j++  )
        pol[j] = new google.maps.LatLng(polylines[i].lat_lng[j].lat, polylines[i].lat_lng[j].lng);
      var color = '#AEB404';
      if(polylines[i].color.length > 0)
        color = polylines[i].color;
      if(polylines[i].arrow)
        flightPath[i] = new GPolylineWithArrows({
            path: pol,
            strokeColor: color,
            strokeOpacity: 1,
            strokeWeight: 2,
            arrowStrokeColor: color,
            arrowStrokeOpacity: 1,
            arrowStrokeWeight: 1,
            fillColor: color,
            fillOpacity: 1,
            arrowSize: 10
        });
      else
        flightPath[i] = new google.maps.Polyline({         
            path: pol,
            strokeColor: color,
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
    };
  };  
};

if(flightPath.length > 0)
google.maps.event.addDomListener(window, 'load', function(){
  initialize();
  for(var i=0; i<flightPath.length; i++)
    flightPath[i].setMap(map);  
});

/*$(document).ready(function(){
  for(var i=0; i<flightPath.length; i++)
    flightPath[i].setMap(map);
});*/

"</script>