JavaScript Development: Line between two LatLon

1 to 3 of 3

  1.  
    • CommentAuthorTim Scott
    • CommentTimeDec 16th 2010
     
    I'm a Telogis noob. I need to draw a line between latlons. How should I do that? I will have a many latlons on map, with a pin for each. I want certain pins to be connected by lines.

    The only line drawing I have found is in Canvas, but that operates in pixels, not latlons. I have not yet tried but I'm guessing I could convert all latlons to points and draw the lines that way. I guess then I would have to redraw all lines with every pan and zoom. Seems like a primitive way to do it. Is that my only choice? Will it even work? If it works, will performance be a problem if I have dozens of lines?
    •  
      CommentAuthorSeanS
    • CommentTimeDec 20th 2010
     
    Based on the telogis.canvaslayer.aspx sample in GeoStream (which draws circles based on LatLon), this code fragment will draw lines based on LatLon.

    var LineLayer = CanvasLayer.define (
    function (canvas) {

    if (!this._line) {
    this._line = canvas.line();
    }

    this._line.lineColor = this.getLineColor ();
    this._line.lineWidth = this.getLineWidth ();
    this._line.points = []

    for (var i = 0; i < this._points.length; i++) {
    this._line.points[i] = this.map.getXY (this._points [i]);
    }

    canvas.update ();
    }
    );

    // once MapLayers.defineCanvasLayer() has been called, the result can be extended like any other class,
    // by adding properties to its prototype.

    LineLayer.prototype.addPoint = function (loc) {this._points.push (loc); this.update (Map.UPDATE_REDRAW);};
    LineLayer.prototype._points = [];

    var map = new Map ({id: "main_map"});
    var line = new LineLayer ({id: "line", map: map});

    line.addPoint (new LatLon (34.065190, -118.000195));
    line.addPoint (new LatLon (33.941324, -118.096582));
    line.addPoint (new LatLon (34.016105, -118.172937));
    line.addPoint (new LatLon (34.029149, -118.214447));
    line.addPoint (new LatLon (34.029483, -118.225031));
    line.addPoint (new LatLon (34.033307, -118.221332));
    line.addPoint (new LatLon (34.055299, -118.214209));
    line.addPoint (new LatLon (34.061208, -118.165063));

    // the fill and stroke properties of the layer can be set as for any CanvasLayer. Remember though that since
    // each of the following functions forces a redraw of the layer, they should be used sparingly.

    line.setLineColor (new Color (0x00, 0x00, 0x00, 0.8));
    line.setLineWidth (3);

1 to 3 of 3

  1.