Issue #1982320 by jaxxed: Gmaps shapes library upgrade to v3 compatible format.

js/gmap_shapes.js

@@ -3,157 +3,194 @@
  * @file
  * GMap Shapes
  * GMap API version / Base case
+ *
+ * @NOTE This code now depends in various places, on the google.maps.geometry library.
+ * 1. points encoding/decoding
+ * 2. spherical distance calculations
+ * If this library isn't loaded then YOU WILL GET SILENT FAILURE.  There should be some kind
+ * of user warning here, if the geometry library hasn't been loaded. I am not sure what the
+ * gmaps convention for such reporting is?  is a console.debug acceptable?
+ * Note that you can specify to add the geometry library at the php side of things using hook_gmap()
  */
 
-/*global jQuery, Drupal, GEvent, GLatLng, GPolygon, GPolyline */
+/*global $, Drupal, google.maps, !google.maps.geometry! */
 
 Drupal.gmap.addHandler('gmap', function (elem) {
   var obj = this;
-/*
-  obj.bind('init',function() {
-    if (obj.vars.behavior.autozoom) {
-      obj.bounds = new GLatLngBounds(new GLatLng(obj.vars.latitude,obj.vars.longitude),new GLatLng(obj.vars.latitude,obj.vars.longitude));
-    }
-  });
-*/
+
+  // prepare and build a google.maps shape object
   obj.bind('prepareshape', function (shape) {
-    var pa, cargs, style;
-    //var m = new GMarker(new GLatLng(marker.latitude,marker.longitude),marker.opts);
-    pa = []; // point array (array of GLatLng-objects)
-    var fillstyle = true;
-    if (shape.type === 'circle') {
-      pa = obj.poly.calcPolyPoints(new GLatLng(shape.center[0], shape.center[1]), shape.radius * 1000, shape.numpoints);
-    }
-    else if (shape.type === 'rpolygon') {
-      shape.center = new GLatLng(shape.center[0], shape.center[1]);
-      shape.point2 = new GLatLng(shape.point2[0], shape.point2[1]);
-      var radius = shape.center.distanceFrom(shape.point2);
-      pa = obj.poly.calcPolyPoints(shape.center, radius, shape.numpoints);
-    }
-    else if (shape.type === 'polygon') {
-      var coords = new Array();
-      jQuery.each(shape.points, function (i, n) {
-        coords.push(new google.maps.LatLng(n[0], n[1]));
-      });
-    }
-    else if (shape.type === 'line') {
-      var coords = new Array();
-      jQuery.each(shape.points, function (i, n) {
-        coords.push(new google.maps.LatLng(n[0], n[1]));
-      });
-    }
-    cargs = [pa];
+    var pa, cargs, style fillstyle;
+    fillstyle = false; // does this shape have a fill option?
+    cargs = {};
+    pa = []; // point array (array of LatLng-objects)
 
-    // Style normalization
-    if (fillstyle) {
-      style = obj.vars.styles.poly_default.slice();
-    }
-    else {
-      style = obj.vars.styles.line_default.slice();
+    // positioning determination
+    switch (shape.type) {
+      case 'circle':
+        if ( typeof shape.center === 'array') { shape.center = new google.maps.LatLng(shape.center[0], shape.center[1]); } // otherwise it should be a LatLng already
+        if ( shape.point2 ) {
+          if ( typeof shape.point2 === 'array') { shape.point2 = new google.maps.LatLng(shape.point2[0], shape.point2[1]); } // otherwise it should be a LatLng already
+          shape.radius = (google.maps.geometry) ? google.maps.geometry.spherical.computeDistanceBetween( shape.center, shape.point2 ) : 250;
+        } // if you didn't pass a shape.point2, then you should have passed a shape.radius in meters
+        break;
+
+      case 'rpolygon': /* this is deprecated as we have circle now.  It is left for backwards compatibility */
+        if ( typeof shape.center === 'array') { shape.center = new google.maps.LatLng(shape.center[0], shape.center[1]); } // otherwise it should be a LatLng already
+        if ( typeof shape.point2 === 'array') { shape.point2 = new google.maps.LatLng(shape.point2[0], shape.point2[1]); } // otherwise it should be a LatLng already
+        shape.radius = (google.maps.geometry) ? google.maps.geometry.spherical.computeDistanceBetween( shape.center, shape.point2 ) : 250;
+        if ( !shape.numpoints ) { shape.numpoints = 20; }
+        pa = obj.poly.calcPolyPoints(shape.center, radius, shape.numpoints);
+        break;
+
+      case 'polygon':
+        fillstyle = true;
+      case 'line':
+        $.each(shape.points, function (i, n) {
+          if ( typeof n === 'array') { n = new google.maps.LatLng(n[0], n[1]); } // otherwise it should be a LatLng already
+          pa.push( n );
+        });
+        break;
+
+      case 'encoded_polygon':
+        fillstyle = true;
+      case 'encoded_line':
+        pa = ( google.maps.geometry ) ? google.maps.geometry.encoding.decodePath(shape.path) : []; // this trinary prevents errors if the google.maps gemoetry library wasn't loaded
+        break;
     }
+
+    /**
+     * the shapes.style processing is a leftover from the gmaps v2
+     * code, and the shapes configuration system, from the php side
+     * of things.
+     */
     if (shape.style) {
-      if (typeof shape.style === 'string') {
+      if (typeof shape.style === 'string') { // the style is an index for one of our vars.styles
         if (obj.vars.styles[shape.style]) {
-          style = obj.vars.styles[shape.style].slice();
+          style = obj.vars.styles[shape.style].slice(); // copy the array
         }
       }
       else {
-        style = shape.style.slice();
+        style = shape.style.slice(); // copy that array
+      }
+      style[0] = '#' + style[0]; // color
+      style[1] = Number(style[1]); // strokewidth
+      style[2] = style[2] / 100; // strokeOpacity
+      if (fillstyle) {
+        style[3] = '#' + style[3]; // fill colour
+        style[4] = style[4] / 100; // fill opacity
       }
-    }
-    style[0] = '#' + style[0];
-    style[1] = Number(style[1]);
-    style[2] = style[2] / 100;
-    if (fillstyle) {
-      style[3] = '#' + style[3];
-      style[4] = style[4] / 100;
-    }
 
-    if (shape.type == 'encoded_line') {
-      shape.color = style[0];
-      shape.weight = style[1];
-      shape.opacity = style[2];
-    }
-    else if (shape.type == 'encoded_polygon') {
-      jQuery.each(shape.polylines, function(i, polyline) {
-        polyline.color = style[0];
-        polyline.weight = style[1];
-        polyline.opacity = style[2];
-      });
-      shape.fill = true;
-      shape.color = style[3];
-      shape.opacity = style[4];
-      shape.outline = true;
+      if (shape.type == 'encoded_line') {
+        shape.color = style[0];
+        shape.weight = style[1];
+        shape.opacity = style[2];
+      }
+      else if (shape.type == 'encoded_polygon') {
+        if ( shape.polylines ) {
+          $.each(shape.polylines, function(i, polyline) {
+            polyline.color = style[0];
+            polyline.weight = style[1];
+            polyline.opacity = style[2];
+          });
+        }
+        shape.fill = true;
+        shape.color = style[3];
+        shape.opacity = style[4];
+        shape.outline = true;
+      }
     }
 
-    jQuery.each(style, function (i, n) {
-      cargs.push(n);
-    });
+    // add any options to the configuration
     if (shape.opts) {
-      cargs.push(shape.opts);
-    }
-    var Pg = function (args) {
-      GPolygon.apply(this, args);
-    };
-    Pg.prototype = new GPolygon();
-    var Pl = function (args) {
-      GPolyline.apply(this, args);
-    };
-    Pl.prototype = new GPolyline();
-
-    var polyObject = {
-      path: coords,
-      strokeColor: style[0],
-      strokeWeight: style[1],
-      strokeOpacity: style[2],
-      fillColor: style[3],
-      fillOpacity: style[4],
+      $.extend(cargs, shape.opts);
     }
 
+    /**
+     * In general: (inherited concepts.  If you change these, make sure you check them on the php side of things)
+     *  shape.color : color used for line and fill
+     *  shape.weight : stroke weight in pixels
+     *  shape.opacity : fill/stroke opacity in decimal value (0< opactity <1)
+     *  shape.fill : boolean direction to fill the shape
+     */
+    // build the shape with options
     switch (shape.type) {
       case 'circle':
-      case 'polygon':
+        cargs = {center:shape.center, radius: shape.radius, strokeColor: shape.color }; // required arges
+        if ( shape.color ) { cargs.strokeColor = shape.color; } // outline color
+        if ( shape.weight ) { cargs.strokeWeight = shape.weight; } // boundary line weight
+        if ( shape.fill ) { cargs.fillColor = shape.color; } // shape fill color
+        if ( shape.opacity ) { cargs.strokeOpacity = shape.opacity; cargs.fillOpacity = shape.opacity; } // shape opacity
+        shape.shape = new google.maps.Circle(cargs);
+        break;
       case 'rpolygon':
-        shape.shape = new google.maps.Polygon(polyObject);
+      case 'encoded_polygon':
+      case 'polygon':
+        cargs = { path: pa }; // required args
+        if ( shape.outline ) { cargs.strokeColor = shape.color; }
+        if ( shape.weight ) { cargs.strokeWeight = shape.weight; }
+        if ( shape.fill ) { cargs.fillColor = shape.color; }
+        if ( shape.opacity ) { cargs.strokeOpacity = shape.opacity; cargs.fillOpacity = shape.opacity; }
+        shape.shape = new google.maps.Polygon(cargs);
         break;
       case 'line':
-        shape.shape = new google.maps.Polyline(polyObject);
-        break;
       case 'encoded_line':
-        shape.shape = GPolyline.fromEncoded(shape);
-        break;
-      case 'encoded_polygon':
-        shape.shape = GPolygon.fromEncoded(shape);
+        cargs = { path: pa }; // required args
+        if ( shape.color ) { cargs.strokeColor = shape.color; }
+        if ( shape.weight ) { cargs.strokeWeight = shape.weight; }
+        if ( shape.opacity ) { cargs.strokeOpacity = shape.opacity; }
+        shape.shape = new google.maps.Polyline(cargs);
         break;
     }
   });
 
+  // add a prepared shape to the map
   obj.bind('addshape', function (shape) {
-    if ( !obj.map.shapes ) obj.map.shapes = new Array();
+    if (!obj.vars.shapes) {
+      obj.vars.shapes = [];
+    }
+    obj.vars.shapes.push(shape);
     shape.shape.setMap(obj.map);
-    //obj.map.shapes.push( shape.shape );
 
-    /*if (obj.vars.behavior.clickableshapes) {
-      GEvent.addListener(shape.shape, 'click', function () {
+    if (obj.vars.behavior.clickableshapes) {
+      google.maps.event.addListener(shape.shape, 'click', function () {
         obj.change('clickshape', -1, shape);
       });
-    }*/
-
+    }
+    if (obj.vars.behavior.shapesextraevents) {
+      google.maps.event.addListener(shape.shape, 'dblclick', function () {
+        obj.change('dblclickshape', -1, shape);
+      });
+      google.maps.event.addListener(shape.shape, 'mousedown', function () {
+        obj.change('mousedownshape', -1, shape);
+      });
+      google.maps.event.addListener(shape.shape, 'mouseout', function () {
+        obj.change('mouseoutshape', -1, shape);
+      });
+      google.maps.event.addListener(shape.shape, 'mouseover', function () {
+        obj.change('mouseovershape', -1, shape);
+      });
+      google.maps.event.addListener(shape.shape, 'mouseup', function () {
+        obj.change('mouseupshape', -1, shape);
+      });
+      google.maps.event.addListener(shape.shape, 'mousemove', function () {
+        obj.change('mousemoveshape', -1, shape);
+      });
+      google.maps.event.addListener(shape.shape, 'rightclick', function () {
+        obj.change('rightclickshape', -1, shape);
+      });
+    }
   });
 
   obj.bind('delshape', function (shape) {
-    obj.map.removeOverlay(shape.shape);
+    shape.shape.setMap( null );
   });
 
   obj.bind('clearshapes', function () {
     if (obj.vars.shapes) {
-      jQuery.each(obj.vars.shapes, function (i, n) {
+      $.each(obj.vars.shapes, function (i, n) {
         obj.change('delshape', -1, n);
       });
     }
   });
 });
-
-/**
-This is a comment
-*/