overlay_edit.js

/**
 * @file
 * Gmap Overlay Editor
 */

/*global jQuery, Drupal, GEvent, GMarker, GPolygon, GPolyline */
Drupal.gmap.addHandler('overlayedit_linestyle', function (elem) {
  var obj = this;
  obj.vars.styles.overlayline = [];
  var f = function () {
    var o = Number(jQuery(this).attr('id').match(/\d+$/));
    obj.vars.styles.overlayline[o] = this.value;
  };
  jQuery(elem).find('input.gmap_style').change(f).each(f);
});

Drupal.gmap.addHandler('overlayedit_linestyle_apply', function (elem) {
  var obj = this;
  obj.vars.overlay_linestyle_apply = Boolean(elem.checked);
  jQuery(elem).change(function () {
    obj.vars.overlay_linestyle_apply = Boolean(this.checked);
  });
});

Drupal.gmap.addHandler('overlayedit_polystyle', function (elem) {
  var obj = this;
  obj.vars.styles.overlaypoly = [];
  var f = function () {
    var o = Number(jQuery(this).attr('id').match(/\d+$/));
    obj.vars.styles.overlaypoly[o] = this.value;
  };
  jQuery(elem).find('input.gmap_style').change(f).each(f);
});

Drupal.gmap.addHandler('overlayedit_polystyle_apply', function (elem) {
  var obj = this;
  obj.vars.overlay_polystyle_apply = Boolean(elem.checked);
  jQuery(elem).change(function () {
    obj.vars.overlay_polystyle_apply = Boolean(this.checked);
  });
});

Drupal.gmap.addHandler('overlayedit_fillstroke_default', function (elem) {
  var obj = this;
  obj.vars._usedefaultfillstroke = Boolean(elem.checked);
  jQuery(elem).change(function () {
    obj.vars._usedefaultfillstroke = Boolean(this.checked);
    alert(obj.vars._usedefaultfillstroke);
  });
});

Drupal.gmap.addHandler('overlayedit_mapclicktype', function (elem) {
  var obj = this;
  obj.vars.overlay_add_mode = elem.value;
  jQuery(elem).change(function () {
    obj.vars.overlay_add_mode = elem.value;
    if (obj.temp_point) {
      delete obj.temp_point;
    }
  });
});
Drupal.gmap.addHandler('overlayedit_markerclicktype', function (elem) {
  var obj = this;
  obj.vars.overlay_del_mode = elem.value;
  jQuery(elem).change(function () {
    obj.vars.overlay_del_mode = elem.value;
  });
});

Drupal.gmap.addHandler('gmap', function (elem) {
  var obj = this;

  // Add status bar
  var status = jQuery(elem).after('<div class="gmap-statusbar">Status</div>').next();
  obj.statusdiv = status[0];

  obj.bind('buildmacro', function (add) {
    var temp, i, q, tm, ct;

    var style_line = function (n) {
      if (!n.style.length) {
        return '';
      }
      var style = n.style.slice(0, 3);
      style[0] = '#' + style[0];
      return style.join('/') + ':';
    };
    var style_poly = function (n) {
      if (!n.style.length) {
        return '';
      }
      var style = n.style.slice();
      style[0] = '#' + style[0];
      style[3] = '#' + style[3];
      return style.join('/') + ':';
    };

    var feature_dump = function (n) {
      var f = n.overlay;
      var tmp = [];
      var i, ct, vtx;
      ct = f.getVertexCount();
      for (i = 0; i < ct; i++) {
        vtx = f.getVertex(i);
        tmp.push('' + vtx.lat() + ',' + vtx.lng());
      }
      return tmp.join(' + ');
    };

    if (obj._oe && obj._oe.features) {
      var polygons = [];
      var polylines = [];
      var circles = [];
      var markers = {};
      jQuery.each(obj._oe.features, function (i, n) {
        if (n.type) {
          switch (n.type) {
            case 'polyline':
              add.push('line=' + style_line(n) + feature_dump(n));
              break;
            case 'polygon':
              add.push('polygon=' + style_poly(n) + feature_dump(n));
              break;
            case 'point':
              if (!markers[n.marker]) {
                markers[n.marker] = [];
              }
              var pt = n.overlay.getPosition();
              var ptxt = '';
              if (n.html) {
                ptxt = ':' + n.html;
              }
              markers[n.marker].push('' + pt.lat() + ',' + pt.lng() + ptxt);
              break;
            case 'circle':
              add.push('circle=' + style_poly(n) + n.center.lat() + ' , ' + n.center.lng() + ' + ' + n.radius / 1000);
              break;
          }
        }
      });
      jQuery.each(markers, function (i, n) {
        add.push('markers=' + i + '::' + n.join(' + '));
      });
    }
  });
});

Drupal.gmap.map.prototype.statusdiv = undefined;

Drupal.gmap.map.prototype.status = function (text) {
  var obj = this;
  if (obj.statusdiv) {
    jQuery(obj.statusdiv).html(text);
  }
};

// Extend markers to store type info.
google.maps.Marker.prototype.gmapMarkerData = function (data) {
  if (data) {
    this._gmapdata = data;
  }
  return this._gmapdata;
};

/************* Overlay edit widget ******************/
Drupal.gmap.addHandler('overlayedit', function (elem) {
  var obj = this;

  var binding = obj.bind('overlay_edit_mode', function () {
    // @@@
  });

  jQuery(elem).change(function () {
    obj.vars.overlay_next_icon = elem.value;
//    obj.vars.overlay_edit_mode = elem.value;
//    obj.change('overlay_edit_mode',binding);
  });

  obj.bind('init', function () {
    obj._oe = {};
    obj.vars.overlay_add_mode = 'Points'; //elem.value;
    obj.vars.overlay_del_mode = 'Remove';
    var edit_text_elem;

    if (obj.map) {
      obj._oe.features = [];
      obj._oe.featuresRef = {};
      obj._oe.editing = false;
      obj._oe.markerseq = {};
      google.maps.event.addListener(obj.map, 'click', function (event) {
        var ctx, s, p;
        var point = event.latLng;
        if (0 && overlay) {
          if (obj._oe.editing) {
            // Work around problem where double clicking to finish a poly fires a click event.
            obj._oe.editing = false;
          }
          else {
          }
        }
        else if (point && !obj._oe.editing) {
          obj._oe.editing = true;
          switch (obj.vars.overlay_add_mode) {
            case 'Points':
              var m = elem.value; // @@@ It's kinda silly to be binding the whole shebang to this dropdown..
              if (!obj._oe.markerseq.hasOwnProperty(m)) {
                obj._oe.markerseq[m] = -1;
              }
              obj._oe.markerseq[m] = obj._oe.markerseq[m] + 1;
              //p = new GMarker(point, {icon: Drupal.gmap.getIcon(m, obj._oe.markerseq[m])});
              //obj.map.addOverlay(p);
              var p = new google.maps.Marker({
                position: point, 
                map: obj.map,
                icon: Drupal.gmap.getIcon(m, obj._oe.markerseq[m]).ra
              });
              ctx = {
                'type' : 'point',
                'marker' : m,
                'overlay' : p
              };
              var offset = obj._oe.features.push(ctx) - 1;
              obj._oe.editing = false;
              google.maps.event.addListener(p, "click", function () {
                switch (obj.vars.overlay_del_mode) {
                  case 'Remove':
                    obj._oe.markerseq[m] = obj._oe.markerseq[m] - 1;
                    ctx.type = 'deleted';
                    p.setMap(null);
                    ctx.overlay = null;
                    var tmpcnt = 0;
                    // Renumber markers in set.
                    jQuery.each(obj._oe.features, function (i, n) {
                      if (n.type && n.type === 'point' && n.marker === m) {
                        var pt = n.overlay.getLatLng();
                        n.overlay.setImage(Drupal.gmap.getIcon(n.marker, tmpcnt).ra);
                        tmpcnt = tmpcnt + 1;
                      }
                    });
                    break;
                  case 'Edit info':
                    // @@@
                    break;
                }
                obj.change('mapedited', -1);
              });
              obj.change('mapedited', -1);
              break;

            case 'Lines':
              ctx = {
                'type' : 'polyline',
                'style' : [],
                'overlay' : null
              };
              s = obj.vars.styles.line_default;
              if (obj.vars.overlay_linestyle_apply) {
                ctx.style = obj.vars.styles.overlayline.slice();
                s = ctx.style;
              }
              /*
              p = new GPolyline([point], '#' + s[0], Number(s[1]), s[2] / 100);
              obj.map.addOverlay(p);
              */
              var coord = [ new google.maps.LatLng(point) ];
              var p = new google.maps.Polyline({path:coord, strokeColor:"#"+s[0], strokeOpacity:s[2]/100, strokeWeight:Number(s[1])});
              p.setMap(obj.map);
              
              ctx.overlay = p;
              obj._oe.featuresRef[p] = obj._oe.features.push(ctx) - 1;

              p.runEdit( true );
              google.maps.event.addListener( p, "mouseover", function(){p.runEdit( true );} );
              google.maps.event.addListener( p, "mouseout", function(){p.stopEdit();} );
              google.maps.event.addListener(p, "endline", function () {
                //obj._oe.editing = false;
                google.maps.event.addListener(p, "lineupdated", function () {
                  obj.change('mapedited', -1);
                });
                google.maps.event.addListener(p, "click", function (latlng, index) {
                  if (typeof index === "number") {
                    // Delete vertex on click.
                    p.deleteVertex(index);
                  }
                  else {
                    var feature = obj._oe.features[obj._oe.featuresRef[p]];
                    feature.stroke = obj.vars.stroke; // @@@
                    p.setStrokeStyle(feature.stroke);
                  }
                });
                obj.change('mapedited', -1);
              });
              break;

            case 'GPolygon':
              ctx = {
                'type' : 'polygon',
                'style' : [],
                'overlay' : null
              };
              s = obj.vars.styles.poly_default;
              if (obj.vars.overlay_polystyle_apply) {
                ctx.style = obj.vars.styles.overlaypoly.slice();
                s = ctx.style;
              }
              p = new GPolygon([point], '#' + s[0], Number(s[1]), s[2] / 100, '#' + s[3], s[4] / 100);
              obj.map.addOverlay(p);
              ctx.overlay = p;
              obj._oe.featuresRef[p] = obj._oe.features.push(ctx) - 1;

              google.maps.event.addListener( p, "mouseover", function(){p.runEdit( true );} );
              google.maps.event.addListener( p, "mouseout", function(){p.stopEdit();} );
              google.maps.event.addListener(p, "endline", function () {
                //obj._oe.editing = false;
                google.maps.event.addListener(p, "lineupdated", function () {
                  obj.change('mapedited', -1);
                });
                google.maps.event.addListener(p, "click", function (latlng, index) {
                  if (typeof index === "number") {
                    p.deleteVertex(index);
                  }
                  else {
                    var feature = obj._oe.features[obj._oe.featuresRef[p]];
                    feature.stroke = obj.vars.stroke;
                    feature.fill = obj.vars.fill;
                    p.setStrokeStyle(feature.stroke);
                    p.setFillStyle(feature.fill); // @@@
                  }
                });
                obj.change('mapedited', -1);
              });
              break;

            case 'Circles':
              var temppoint = point;
              // @@@ Translate
              obj.status("Drawing circle. Click a point on the rim to place.");

              var handle = google.maps.event.addListener(obj.map, 'click', function (overlay, point) {
                if (point) {
                  var ctx = {
                    'type' : 'circle',
                    'center' : temppoint,
                    'radius' : null,
                    'style' : [],
                    'overlay' : null
                  };
                  var s = obj.vars.styles.poly_default;
                  if (obj.vars.overlay_polystyle_apply) {
                    ctx.style = obj.vars.styles.overlaypoly.slice();
                    s = ctx.style;
                  }
                  obj.status("Placed circle. Radius was " + temppoint.distanceFrom(point) / 1000 + " km.");
                  ctx.radius = temppoint.distanceFrom(point);
                  var p = new GPolygon(obj.poly.calcPolyPoints(ctx.center, ctx.radius, 32), '#' + s[0], Number(s[1]), s[2] / 100, '#' + s[3], s[4] / 100);
                  obj.map.addOverlay(p);
                  ctx.overlay = p;
                  obj._oe.featuresRef[p] = obj._oe.features.push(ctx) - 1;
                  google.maps.event.addListener(p, "click", function () {
                    switch (obj.vars.overlay_del_mode) {
                      case 'Remove':
                        ctx.type = 'deleted';
                        obj.map.removeOverlay(p);
                        ctx.overlay = null;
                        break;
                      case 'Edit info':
                        // @@@
                        break;
                    }
                    obj.change('mapedited', -1);
                  });
                }
                else {
                  // @@@ Uh, do cleanup I suppose..
                }
                obj._oe.editing = false;
                google.maps.event.removeListener(handle);
                obj.change('mapedited', -1);
              });
              break;
          }
        }
      });
    }
  });
});