Click or drag to resize

Telogis.GeoBase.MapLayers.CanvasLayer

Verizon Connect Logo
Print this page
Learn more about Verizon Connect GeoBase.
Get information about the latest release
MapLayers.CanvasLayer Class

MapLayers.CanvasLayer inherits from MapLayers.AbstractLayer.

A class for displaying primitive drawing objects with VML / SVG on a layer.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});
Constructor
NameDescription
MapLayers.CanvasLayer(config, zIndex)

Arguments

  • config (Object) - Configuration options for the layer.

    Properties
    NameTypeDescription
    fillColorColor

    The RGBA description of the initial fill color that should be used for the MapLayers.CanvasLayer. This may be null, to disable filling.

    This property may also be referenced by the name: fillColour.
    lineColorColor

    The RGBA description of the initial color that should be used to draw lines on the MapLayers.CanvasLayer. This may be null, to disable filling.

    This property may also be referenced by the name: lineColour.
    lineWidthNumber

    The pixel width that paths on the MapLayers.CanvasLayer should be stroked with.

    Defaults to 1.

  • (Optional)zIndex (Number) - The CSS z-index to assign to the Canvas element used to display the layer, once it loads. The index has to be greater than 10 and less than 80. General default values for layers are TILE: 20, PATH: 30, REGION: 40, FENCE: 50, CANVAS: 60, OBJECT: 70 Defaults to Telogis.Internal.ZIndices.CANVAS_LAYER.

Functions
NameDescription
circle (Point center, Number radius)

Creates a circle on the Canvas as an ellipse with identical horizontal and vertical axis lengths.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

// Set the coordinates of the center of the circle (Los Angeles)
var loc = new Telogis.GeoBase.LatLon(33.575131,-117.778007);
map.setCenter(loc);

// Call the function, setting a radius of 20 pixels
var myCircle = myCanvasLayer.circle(loc, 20);
myCircle.draw();
Arguments

  • center (Point or LatLon) - Either the pixel coordinates of the circle's center, relative to the upper-left corner of the visible canvas area, or a LatLon.

  • (Optional) radius (Number) - The pixel radius of the circle. Defaults to 0.

Returns

Canvas.Shapes.Ellipse - The ellipse representing the circle on the canvas.

define (Function draw)

Extends the abstract MapLayers.CanvasLayer class to define a custom map-layer type that renders on the map using a Canvas, given a draw callback specifying its behavior. This should only be used if predefined implementations (such as MapLayers.RouteLayer, MapLayers.RegionShadeLayer, or one of the MapLayers.GeoFences) does not suffice. As well as the supplied CanvasLayer.define.draw function, additional instance methods can be added to the custom layer through the prototype of the returned class.

Arguments

  • draw (Function) - The render procedure to define a canvas map layer class from. This will be called whenever a layer update occurs, in the scope of the layer.

    Arguments

    • canvas (Canvas) - The Canvas object that handles the actual rendering of primitives to the layer. Further properties of the rendering environment can be determined through methods on this object, e.g. Canvas.getSize.

Returns

Class - The canvassed map-layer implementation described by the given draw callback.

destroy ()

Disposes of resources used by the layer and frees memory once there is no longer a use for it.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

// Destroy the CanvasLayer
myCanvasLayer.destroy();
ellipse (Point center, Number radiusX, Number radiusY)

Creates an ellipse on the Canvas.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map, // parent map layer named 'map' must be set previously
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

// Set the coordinates of the center of the ellipse (a park in Los Angeles)
var loc = new Telogis.GeoBase.LatLon(33.575131,-117.778007);
map.setCenter(loc);

// Or a point relative to the upper left-hand corner of
// the canvas as the ellipse center
var mypoint = new Telogis.GeoBase.Point(200,200);

// Call the function, setting an ellipse width of 80 pixels
// and a height of 10 pixels
var myEllipse = myCanvasLayer.ellipse(loc,80,10);
myEllipse.draw();
Arguments

  • center (Point or LatLon) - Either the pixel coordinates of the ellipse's center, relative to the upper-left corner of the visible canvas area, or a LatLon.

  • (Optional) radiusX (Number) - The length, in pixels, of half of the horizontal axis of the ellipse. Defaults to 0.

  • (Optional) radiusY (Number) - The length, in pixels, of half the vertical axis of the ellipse. Defaults to 0.

Returns

Canvas.Shapes.Ellipse - The ellipse representing the new shape.

getFillColor ()

Finds the components of the default fill color for figures drawn on the MapLayers.CanvasLayer, if applicable.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map, // parent map layer named 'map' must be set previously
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

alert('Fill color is '+myCanvasLayer.getFillColor().toCSSRGBA());
// Fill color is rgba(0,18,255,0.5)
Returns

Color - The RGB fill color, or null if filling is disabled.

getLineColor ()

Finds the components of the default stroke color for figures drawn on the MapLayers.CanvasLayer, if applicable.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map, // parent map layer named 'map' must be set previously
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

alert('Line color is '+myCanvasLayer.getLineColor().toCSSRGBA());
// Line color is rgba(0,18,255,0.9)
Returns

Color - The RGB stroke color, or null if stroking is disabled.

getLineWidth ()

Finds the default stroke width for figures drawn on the MapLayers.CanvasLayer.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map, // parent map layer named 'map' must be set previously
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

alert('Line/stroke width is '+myCanvasLayer.getLineWidth()+' pixels');
// Line/stroke width is 2 pixels
Returns

Number - The stroke width, in pixels.

getPaddedLR ()

Finds the pixel coordinates of the lower-right corner of the (padded) canvas-layer drawable region, relative to the canvas offset. If the drawable area has not been set up, the point (0, 0) is returned.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    lineWidth: 2,
    show: true
});

// Get the coordinates of the lower-right corner of the canvas region
alert('Pixel coordinates of the lower-right corner of the canvas are '+myCanvasLayer.getPaddedLR());
Returns

Point - The lower-right corner of the layer's drawable region.

getPaddedSize ()

Finds the pixel dimensions of the layer's canvas area, including its off-viewport (padded) regions.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    lineWidth: 2,
    show: true
});

// Get the off-viewport padding
alert('Pixel dimensions of the canvas are '+myCanvasLayer.getPaddedSize());
Returns

Size - The total width and height of the drawable area, in pixels.

getPaddedUL ()

Finds the pixel coordinates of the upper-left corner of the (padded) canvas-layer drawable region, relative to the canvas offset. If the drawable area has not been set up, the point (0, 0) is returned.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    lineWidth: 2,
    show: true
});

// Get the coordinates of the upper-left corner of the canvas region
alert('Pixel coordinates of the upper-left corner of the canvas are '+myCanvasLayer.getPaddedUL());
Returns

Point - The upper-left corner of the layer's drawable region.

getPadding ()

Finds the width and height of the padding about the edges of the visible area of the canvas-layer, which is used to avoid having to redraw for smaller pans.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    lineWidth: 2,
    show: true
});

// Get the off-viewport padding
alert('Padding (WxH) around the viewport is '+myCanvasLayer.getPadding());
Returns

Size - The thickness of the off-viewport padding, in pixels, in the horizontal and vertical directions.

group (Array shapes)

Creates a Canvas.Group on the Canvas of this layer.

Arguments
image (Point point, String src)

Creates an image on the Canvas.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

// Set the coordinates of the image (Los Angeles). The image
// will track the location if the canvas is updated (zoomed, panned etc.)
var loc = new Telogis.GeoBase.LatLon(33.575131,-117.778007);
map.setCenter(loc);

// Or a point relative to the upper left-hand corner of
// the map as the image location. The image will remain at
// the same relative position on the canvas if the canvas
// is updated
var mypoint = new Telogis.GeoBase.Point(100,50);

// Call the function, including a path to an image
var myImage = myCanvasLayer.image(mypoint, 'images/truck-red.png');
myImage.draw();
Arguments

  • point (Point or LatLon) - Center location of the image

  • src (String) - The path to the image file that will be displayed on the Canvas.

Returns

Canvas.Shapes.Image - The image that was created.

label (Point point, String text)

Creates a label on the Canvas.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    show: true
});

// Set the location of the label (Los Angeles, Ca) and
// center the map on it
var loc = new Telogis.GeoBase.LatLon(33.621224,-117.963133);
map.setCenter(loc);

// Or use points. The label will remain at the same position
// on the canvas when it is updated (zoomed, moved)
var mypoint = new Telogis.GeoBase.Point(100,50);

// Call the label function and redraw
var myLabel = myCanvasLayer.label(loc, 'This is my label text');
myLabel.draw();
Arguments

  • point (Point or LatLon) - Center location of the label.

  • text (String) - The text to be shown on the label.

Returns

Canvas.Shapes.Label - The label representing the new shape.

polyline (Array points, Boolean closed)

Creates a polyline on the Canvas.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

// Set the coordinates of line start, end-points or junctions
// The polylines will remain at the locations when the layer is
// updated (zoomed, panned etc.)
var loc1 = new Telogis.GeoBase.LatLon(33.715668,-117.954624);
var loc2 = new Telogis.GeoBase.LatLon(33.705841,-117.910858);
var loc3 = new Telogis.GeoBase.LatLon(33.670179,-117.913515);

// Set the center of the map
map.setCenter(loc2);

var lineArray = [loc1, loc2, loc3];

// Or use points. The polylines will remain at the same relative
// position on the canvas when it is updated (zoomed, moved)
var pt1 = new Telogis.GeoBase.Point(200,150);
var pt2 = new Telogis.GeoBase.Point(300,250);
var pt3 = new Telogis.GeoBase.Point(200,350);

var pointArray = [pt1, pt2, pt3];

// Call the polyline function. Set to true for a closed polygon
// A blue, filled polyline (polygon) is now visible.
var myPolyline = myCanvasLayer.polyline(lineArray, true);
myPolyline.draw();
Arguments

  • (Optional) points (Array) - The list of Points or LatLons describing the end-points and junctions of the line segments comprising the Canvas.Shapes.PolyLine. Each Point is taken relative to the upper-left corner of the visible canvas area. Defaults to [].

  • (Optional) closed (Boolean) - Whether the last point of the polyline should be connected to its first point (forming a polygon). Defaults to false.

Returns

Canvas.Shapes.PolyLine - The polyline representing the new shape.

rect (Point p1, Point p2)

Creates a rectangle on the Canvas.

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

// Set the coordinates of the top-left and bottom-right corners
// of a rectangle -- The rectangle will remain fixed at the map
// coordinates when the canvase is changed (zoom, pan etc)
var loc1 = new Telogis.GeoBase.LatLon(33.699928,-117.907752);
var loc2 = new Telogis.GeoBase.LatLon(33.687574,-117.892237);
map.setCenter(loc1);

// Or use points. The rectangle will then remain at the same relative
// position (top corner, center, etc) on the canvas when it is
// updated (zoomed, moved)
var pt1 = new Telogis.GeoBase.Point(200,150);
var pt2 = new Telogis.GeoBase.Point(300,250);

// Call the rect function and redraw
var myRectangle = myCanvasLayer.rect(pt1, pt2);
myRectangle.draw();
Arguments

  • p1 (Point or LatLon) - Either the pixel coordinates of the first corner of the rectangle, relative to the upper-left corner of the canvas area, or a LatLon. p1 and p2 must of the same type.

  • p2 (Point or LatLon) - Either the pixel coordinates of the second corner of the rectangle, relative to the upper-left corner of the canvas area or a LatLon. p1 and p2 must of the same type.

Returns

Canvas.Shapes.Rect - The rect representing the new shape.

setFillColor (Color color)

Specifies the default fill color for new objects drawn on the MapLayers.CanvasLayer, and redraws the layer so that this change will be visible (existing objects will be unaffected).

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

// Set the coordinates of the center of a circle
var loc = new Telogis.GeoBase.LatLon(33.575131,-117.778007);
map.setCenter(loc);

// Call the circle function, setting a radius of 20 pixels and draw.
// A blue circle is now visible.
var obj1 = myCanvasLayer.circle(loc, 20);
obj1.draw();

// Set the CanvasLayer's fill color to red on canvas click. This will be
// applied to all new objects created
document.onclick = myTestFunction;
function myTestFunction() {
    // Set a new CanvasLayer FillColor
    myCanvasLayer.setFillColor(new Telogis.GeoBase.Color(255,0,24,0.5));

    // Set a new location for a second circle (to the left and below the first)
    var loc2 = new Telogis.GeoBase.LatLon(33.563259,-117.788995);

    // Create a new circle by again calling the circle function,
    // using the second location, and draw. A second circle with a red
    // fillcolor will now be drawn
    var obj2 = myCanvasLayer.circle(loc2, 20);
    obj2.draw();
};
Arguments

  • color (Color) - The RGB description of the new default fill color, or null to disable filling.

setLineColor (Color color)

Specifies the default stroke color for new objects drawn on the MapLayers.CanvasLayer, and redraws the layer so that this change will be visible (existing objects will be unaffected).

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

// Set the coordinates of the center of a circle
var loc = new Telogis.GeoBase.LatLon(33.575131,-117.778007);
map.setCenter(loc);

// Call the circle function, setting a radius of 20 pixels and draw.
// A blue circle is now visible.
var obj1 = myCanvasLayer.circle(loc, 20);
obj1.draw();

// Set the CanvasLayer's line color to red on canvas click. This will be
// applied to all new objects created
document.onclick = myTestFunction;
function myTestFunction() {
    // Set a new default CanvasLayer LineColor
    myCanvasLayer.setLineColor(new Telogis.GeoBase.Color(255,0,24,0.5));

    // Set a new location for a second circle (to the left and below the first)
    var loc2 = new Telogis.GeoBase.LatLon(33.563259,-117.788995);

    // Create a new circle by again calling the circle function,
    // using the second location, and draw. A second circle with a red
    // line color will now be drawn
    obj2 = myCanvasLayer.circle(loc2, 20);
    obj2.draw();
};
Arguments

  • color (Color) - The RGB description of the new default stroke color, or null to disable stroking.

setLineWidth (Number width)

Specifies the default stroke width for new objects drawn on the MapLayers.CanvasLayer, and redraws the layer so that this change will be visible (existing objects will be unaffected).

JavaScript
Copy
// Create a CanvasLayer
myCanvasLayer = new Telogis.GeoBase.MapLayers.CanvasLayer({
    id: 'canvas_layer',
    parent: map,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 2,
    show: true
});

// Set the coordinates of the center of a circle
var loc = new Telogis.GeoBase.LatLon(33.575131,-117.778007);
map.setCenter(loc);

// Call the circle function, setting a radius of 20 pixels and draw.
// A blue circle is now visible.
var obj1 = myCanvasLayer.circle(loc, 20);
obj1.draw();

// Set the CanvasLayer's default line width to a new default on canvas click.
// This will be applied to all new objects created
document.onclick = myTestFunction;
function myTestFunction() {
    // Set a new default CanvasLayer line width of 10 px
    myCanvasLayer.setLineWidth(10);

    // Set a new location for a second circle (to the left and below the first)
    var loc2 = new Telogis.GeoBase.LatLon(33.563259,-117.788995);

    // Create a new circle by again calling the circle function,
    // using the second location, and draw. A second circle with a 10
    // pixel line will now be drawn
    obj2 = myCanvasLayer.circle(loc2, 20);
    obj2.draw();
};
Arguments

  • width (Number) - The pixel width to use for the default stroke.

Properties
NameTypeDescription
BUFFERINGPoint

The number of invisible viewport-width equivalents to render about the map viewport in the horizontal and vertical directions, so that the layer does not have to be redrawn with every minor pan.