Martin Milesich

I have made this simple timepicker. It is very early release and it is buggy.

Go to the project page.

This is rewritten Bill Chadwick's BDCCPolyline.js script. I rewrote it because its not working correctly. In the redraw function he is expecting that Google will always draw all polylines but that's not true. Google will draw only visible polylines. I need to come with a solution how to uniquely identify a polyline. Then I found a solution using the opacity attribute.

Example:

1. You create a polyline with opacity = 1.
2. This is you first polyline so the KMPolylineCounter = 1.
3. The constructor change the opacity using this formula:  opacity - (KMPolylineCounter + 1) / 10000
4. Opacity for our first polyline is now 0.9998. The change is so small that you wont see the difference.

With this solution you can identify your polyline using the opacity attribute even when all polylines are not drawn.

Note: Non-solid polylines only if drawing is performed using VML or SVG.

/*!
 * KMPolyline - Draw solid or dashed polylines.
 *
 * Extended Google's GPolyline class.
 *
 * Rewritten Bill Chadwick's BDCCPolyline.js script.
 * http://www.bdcc.co.uk/Gmaps/BdccGmapBits.htm
 *
 * Non-solid polylines only if drawing is performed using VML or SVG.
 *
 * Prototype.js v1.6+ required - http://prototypejs.org/
 *
 * Downloaded from: Martin Milesich - http://milesich.com/
 *
 * Free for any use.
 */

var KMPolylineCounter = 0;

// Constructor
function KMPolyline(points, color, weight, opacity, tooltip, dash)
{
    ++KMPolylineCounter;

    this.points    = points  || [];
    this.color     = color   || "#000000";
    this.weight    = weight  || 1;
    this.tooltip   = tooltip || "";
    this.dash      = dash    || "solid";
    this.elemId    = "KMPolylineId" + KMPolylineCounter.toString();
    this.opacity   = Math.abs(opacity - (KMPolylineCounter + 1) / 10000);
    this.usesVml   = Prototype.Browser.IE;

    GPolyline.call(this, this.points, this.color, this.weight, this.opacity, {"clickable": false}); //call parent constructor
}

KMPolyline.prototype = new GPolyline([new GLatLng(0,0)]);

KMPolyline.prototype.copy = function()
{
    return new KMPolyline(this.points, this.color, this.weight, this.opacity, this.tooltip, this.dash);
}

KMPolyline.prototype.redraw = function(force)
{
   GPolyline.prototype.redraw.call(this, force); //call parent

   var elem = null;

   if (this.usesVml) {
   // VML
       var shps = $$('shape');

       for (i = 0; i < shps.length; i++) {
           if (shps[i].stroke.opacity.toFixed(4) == this.opacity) {
               elem = shps[i];
               break;
           }
       }
   } else {
   // SVG
       elem = $$('path[stroke-opacity="'+this.opacity+'"]').first();

        if (elem != null) {
            Element.writeAttribute(elem, "pointer-events", "stroke");
        }
   }

   if (elem != null) {
       if (this.tooltip != "") {
           elem.style.cursor = "help";
           Element.writeAttribute(elem, 'title', this.tooltip);
       }

       Element.writeAttribute(elem, 'id', this.elemId);

       this.setDash(this.dash);

       var eClick = GEvent.callback(this, this.onClick);
       var eOver  = GEvent.callback(this, this.onOver);
       var eOut   = GEvent.callback(this, this.onOut);

       GEvent.clearInstanceListeners(elem);

       GEvent.addDomListener(elem, "click",     function() {eClick()});
       GEvent.addDomListener(elem, "mouseover", function() {eOver()});
       GEvent.addDomListener(elem, "mouseout",  function() {eOut()});
   }
}

// event handlers
KMPolyline.prototype.onClick = function() {GEvent.trigger(this, "click")}
KMPolyline.prototype.onOver  = function() {GEvent.trigger(this, "mouseover")}
KMPolyline.prototype.onOut   = function() {GEvent.trigger(this, "mouseout")}

// getX functions
KMPolyline.prototype.getDash   = function() {return this.dash}
KMPolyline.prototype.getWeight = function() {return this.weight}
KMPolyline.prototype.getColor  = function() {return this.color}

// setX functions
KMPolyline.prototype.setDash = function(dash)
{
    this.dash = dash;

    var elem = $(this.elemId);

    if (!elem) return;

    if (this.usesVml) {
        switch (this.dash) {
            case "dash" : elem.stroke.dashstyle = "dash";
                break;
            case "dot"  : elem.stroke.dashstyle = "dot";
                break;
            default     : elem.stroke.dashstyle = "";
        }
    } else {
        switch (this.dash) {
            case "dash" : Element.writeAttribute(elem, "stroke-dasharray", "10,10");
                break;
            case "dot"  : Element.writeAttribute(elem, "stroke-dasharray", "3,17");
                break;
            default     : Element.writeAttribute(elem, "stroke-dasharray", null); // remove attribute
        }
    }
}

KMPolyline.prototype.setWeight = function(weight)
{
    this.weight = weight;

    var elem = $(this.elemId);

    if (!elem) return;

    if (this.usesVml) {
        elem.stroke.weight = this.weight.toString() + "px";
    } else {
        Element.writeAttribute(elem, "stroke-width", this.weight.toString() + "px");
    }
}

KMPolyline.prototype.setColor = function(color)
{
    this.color = color;

    var elem = $(this.elemId);

    if (!elem) return;

    if (this.usesVml) {
        elem.stroke.color = this.color;
    } else {
        Element.writeAttribute(elem, "stroke", this.color);
    }
}

Recently, I have been playing with Google Maps API at my work. With the API I created a polyline but it disappears on random fashion at different zoom levels. It tooks me days to figure it out why. The main problem was I used numeric strings (i.e. numbers in quotes).

Check this examples:

new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: "4",
  opacity: "0.8",
  points: "_gkxEv}|vNM]",
  levels: "PP",
  zoomFactor: "2",
  numLevels: "18"
});

new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: 4,
  opacity: 0.8,
  points: "_gkxEv}|vNM]",
  levels: "PP",
  zoomFactor: 2,
  numLevels: 18
});

They look the same but the first one has numeric strings. I did some testing and value of the weight attribute is important!

If the value of the weight attribute is numeric string your polylines will randomly disappear.

I didn't know that this can be so different.

I want to share my experience with you and make a note to my self.

This is the most popular firefox flick made by Jeff Gill