Click or drag to resize

Telogis.GeoBase.MapLayers

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

Contains all types of layer that can be added to a GeoStream map. This also acts as a global hash for all instantiated derivations of MapLayers.AbstractLayer, so that if a reference is not kept to such an object, it can be accessed like so:

JavaScript
Copy
var MapLayers   = Telogis.GeoBase.MapLayers;
var Map         = Telogis.GeoBase.Widgets.Map;
var ObjectLayer = Telogis.GeoBase.MapLayers.ObjectLayer;

var map = new Map ({id: 'main_map'});
new ObjectLayer ({id: 'pin_layer', map: map});

var layer = MapLayers ['pin_layer'];
Classes
NameDescription
MapLayers.AbstractLayerAn abstract class for handling layers on a GeoStream map. Any such map in GeoStream is composed of a number of these layers which should all derive from this class. A MapLayers.TileLayer is added implicitly with the creation of the map, but other types need to be added separately. Note also that the layer created by this constructor is automatically added to the map if one is specified.
MapLayers.AbstractObjectAn abstract class for map objects that can be displayed in a MapLayers.ObjectLayer. Should not typically be called directly, but instead inherited by objects created using MapLayers.ImageObject and MapLayers.IndexedImageObject.
JavaScript
Copy
// ** This example displays a balloon on a map. The balloon text, when clicked, will trigger a function (an alert).
// At the top of your .aspx file, add a script reference to "/scripts/skin.balloon.greygradient.js". This defines a default balloon skin style.
// Create a Telogis.GeoBase.MapLayers.BalloonSkin with default properties to apply to AbstractObject.config.balloonConfig.skin.
var myBalloonSkin = new Telogis.GeoBase.MapLayers.BalloonSkin();

// Create content and an arbitrary function to call using AbstractObject.config.balloonConfig.contentFunc
var newDiv = document.createElement('Div');
newDiv.appendChild(document.createTextNode('Click Me'));
newDiv.onclick = function() {alert('You clicked the balloon!')}; // Click the balloon to activate an alert

// Create an AbstractObject instance on the map ('map') with a balloon containing text
// No image (src) can be specified: use Telogis.GeoBase.MapLayers.ImageObject for this functionality.
// AbstractObject is typically used only to provide inheritance.
var myAbstractObject = new Telogis.GeoBase.MapLayers.AbstractObject({
    anchorPoint: new Telogis.GeoBase.Point(0.5,0.0),
    balloonConfig: {
        //content: 'This is plain text', // Text content for the balloon.
        // --- either content or contentFunc should be used, not both
        contentFunc: function() {return newDiv}, // A function to provide balloon content as HTML
        show: true, // Show on initial loading
        hAlign: Telogis.GeoBase.MapLayers.Balloon.ALIGN_RIGHT, // Horizontal alignment of the balloon
        vAlign: Telogis.GeoBase.MapLayers.Balloon.ALIGN_BOTTOM, // Vertical alignment of the balloon
        skin: myBalloonSkin // The skin to apply to the balloon
    },
    dragEnabled: false,
    location: new Telogis.GeoBase.LatLon(33.587137,-117.742878), // The location (Los Angeles). Overridden if also specified in balloonConfig
    map: map, // May also be referenced as 'parent'. This example assumes a map named 'map' exists
});
See MapLayers.BalloonSkin for an example of customising a balloon skin.
MapLayers.BalloonA simple balloon that can be associated with a marker on a map and used to display a small amount of text or HTML content.
JavaScript
Copy
// ** This example displays a balloon on a map. The balloon text, when clicked, will trigger a function (an alert)
// Create a Telogis.GeoBase.MapLayers.BalloonSkin to apply to balloon.config.skin.
var myBalloonSkin = new Telogis.GeoBase.MapLayers.BalloonSkin({
    bodyStyle: { // specify the style of the balloon and its text
        backgroundColor: "#ffffff",
        border:          "1px solid black",
        color:           "#000000",
        fontFamily:      "sans-serif",
        fontSize:        "20px",
        fontWeight:      "normal",
        padding:         "10px",
        textAlign:       "center",
        verticalAlign:   "middle",
        width:           "150px"
    },
    folder: "http://localhost/GeoStream/scripts/images/skins/balloon/directedwhite/", // specify the default images folder
    tagAnchorPoint: new Telogis.GeoBase.Point(0.0, 1.0), // specify the bottom-left image position
    tagOverlap: -7, // adjust the vertical position of the balloon tag (move bottom-left image and tag closer/further apart)
    bottomLeftTagSrc: 'tag-bottom-left.png', // image used for bottom-left balloon tag corner (relative to 'folder')
    bottomRightTagSrc: 'tag-bottom-right.png', // image used for bottom-right balloon tag corner
    topLeftTagSrc: 'tag-top-left.png', // image used for top-left balloon tag corner
    topRightTagSrc: 'tag-top-right.png' // image used for top-right balloon tag corner
});

// Create an arbitrary function to call using balloon.config.contentFunc
var newDiv = document.createElement('Div');
newDiv.appendChild(document.createTextNode('Click Me'));
newDiv.onclick = function() {alert('You clicked me!')}; // Click the balloon to activate an alert

// Create a Balloon instance on the map ('map') with a balloon containing text
var myBalloon = new Telogis.GeoBase.MapLayers.Balloon({
    dragEnabled: true,
    //content: "<a href='http://www.telogis.com'>Telogis</a>", // Text or HTML content for the balloon.
    // --- either content or contentFunc should be used, not both
    contentFunc: function() {return newDiv}, // A function to provide balloon content as HTML
    hAlign: Telogis.GeoBase.MapLayers.Balloon.ALIGN_RIGHT, // Horizontal alignment of the balloon
    location: new Telogis.GeoBase.LatLon(33.587137,-117.742878),
    show: true, // Show on initial load
    skin: myBalloonSkin, // The skin to apply to the balloon
    vAlign: Telogis.GeoBase.MapLayers.Balloon.ALIGN_BOTTOM, // Vertical alignment of the balloon
    map: map // May also be referenced as 'parent'
});
MapLayers.BalloonSkinA simple class that combines all the information describing the appearance of a balloon. Several predefined instances are available as static properties of the MapLayers.BalloonSkin class, and can be used to theme balloons reasonably painlessly.
JavaScript
Copy
var myBalloonSkin = new Telogis.GeoBase.MapLayers.BalloonSkin({
    bodyStyle: { // specify the style of the balloon and its text
        backgroundColor: "#ffffff",
        border:          "1px solid black",
        color:           "#000000",
        fontFamily:      "sans-serif",
        fontSize:        "20px",
        fontWeight:      "normal",
        padding:         "10px",
        textAlign:       "center",
        verticalAlign:   "middle",
        width:           "150px"
    },
    folder: "images/skins/balloon/directedwhite", // specify the default images folder
    tagAnchorPoint: new GeoBase.Point(0.0, 1.0), // specify the bottom-left image position
    tagOverlap: 1, // adjust the vertical position of the balloon tag (move bottom-left image and tag closer/further apart)
    bottomLeftTagSrc: 'tag-bottom-left.png', // image used for bottom-left balloon tag corner (relative to 'folder')
    bottomRightTagSrc: 'tag-bottom-right.png', // image used for bottom-right balloon tag corner
    topLeftTagSrc: 'tag-top-left.png', // image used for top-left balloon tag corner
    topRightTagSrc: 'tag-top-right.png' // image used for top-right balloon tag corner
});
MapLayers.CanvasLayerA 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
});
MapLayers.CircleFenceA circular form of geofence, as described by a coordinate-pair center point and a distance radius in some fixed units.
JavaScript
Copy
// Create a CircleFence in Los Angeles with a radius of half a mile
myCircleFence = new Telogis.GeoBase.MapLayers.CircleFence({
    id: 'circle_fence',
    parent: map,
    center: new Telogis.GeoBase.LatLon(33.575131,-117.778007),
    radius: 0.5,
    units: Telogis.GeoBase.DistanceUnit.MILES,
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.2),
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    show: true
});
MapLayers.ClusterLayerCreates a layer to contain multiple MapLayers.ImageObject instances, which displays cluster icons for clusters obtained from a given datasource.
MapLayers.DivObjectA class for displaying arbitrary HTML in a DIV on an MapLayers.ObjectLayer.
MapLayers.FenceCollectionAn extension of a MapLayers.LayerCollection specifically for MapLayers.GeoFences that also provides a MapLayers.FenceCollection.contains method.
MapLayers.GeoFenceA class used for displaying a customizable (not necessarily rectangular, as is the restriction of a MapLayers.RegionShadeLayer) region on a map, so as to indicate an area not accessible for routing or one that has some other significance.
MapLayers.ImageObjectA class for displaying images on a map via an MapLayers.ObjectLayer.
JavaScript
Copy
// Render an image on the map ('map') with a balloon containing text
var myImageObject = new Telogis.GeoBase.MapLayers.ImageObject({
    scalable: true, // true to allow the image size to be changed, false to lock size
    src: 'images/pin-red.png', // The path to the image file used
    balloonConfig: { // Configuration options for the balloon
        content: 'Balloon Text', // text to display in the balloon
        show: true // true to display the balloon on load
    },
    anchorPoint: new Telogis.GeoBase.Point(0.5,0.0),
    map: map,
    location: new Telogis.GeoBase.LatLon(33.587137,-117.742878), // Where the image will be drawn
});
MapLayers.IndexedImageObjectFunctionally the same as an MapLayers.ImageObject, except that it displays a small index associated with the object over the image.
MapLayers.LayerCollectionA wrapper class that contains multiple map layers so that they can be treated as a single layer. While such a collection can be referenced by ID, it is not bound to any specific map.
MapLayers.ObjectLayerCreates a layer to contain multiple Telogis.GeoBase.MapLayer.AbstractObject instances, which allow icons to be displayed on a map. An R-tree may be used to store the objects and cull those that do not lie on the map. All objects placed on the layer can be accessed by subscripting the MapLayers.ObjectLayer instance with their IDs, like so:
JavaScript
Copy
var ImageObject = Telogis.GeoBase.MapLayers.ImageObject;
var LatLon      = Telogis.GeoBase.LatLon;
var Map         = Telogis.GeoBase.Widgets.Map;
var ObjectLayer = Telogis.GeoBase.MapLayers.ObjectLayer;

var map   = new Map         ({id: 'main_map'});
var layer = new ObjectLayer ({id: 'pin_layer', map: map});

new ImageObject ({

    id:       'pushpin',
    layer:     layer,
    location:  new LatLon (34.067, -118.000),
    src:      'pin.png'
});
var pin = layer ['pushpin'];
MapLayers.PolygonFenceA variant of MapLayers.GeoFence that represents a region defined by the closure of an arbitrary polyline.
MapLayers.RegionShadeLayerA class for displaying a shaded rectangular region on a map.
MapLayers.RouteLayerA class used for displaying a path or route described by a sequence of latitude-longitude coordinates. This may be constructed with the directions generated by a routing call. Note also that this layer can be used for any arbitrary path: not necessarily ones generated by routing calls.
JavaScript
Copy
// Method 1:
// First create a route (myRoute) and a map object (map)
// Then use getDirections or getQuickDirections to retrieve directions
myRoute.getQuickDirections(function (result) {
    // Wrap the RouteLayer constructor within the callback function
    directionsRouteLayer = new Telogis.GeoBase.MapLayers.RouteLayer({
        id: 'route_directions',
        map: map,
        // Pass the directions object to the RouteLayer
        directions: result,
        lineColor: new Telogis.GeoBase.Color(0,18,255,0.5),
        lineWidth: 4,
        show: true
    });
    }, function (error) {alert(error)}
);

// Method 2:
// Or, alternatively, create a RouteLayer object without directions
myRouteLayer = new Telogis.GeoBase.MapLayers.RouteLayer({
    id: 'route_directions',
    map: map,
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineWidth: 4,
    show: true
});

// Then use getDirections or getQuickDirections to set the points of the RouteLayer
// setPoints may also be used with an arbitrary array of LatLons
myRoute.getQuickDirections(function (result) {
    myRouteLayer.setPoints(result.getPoints());
    myRouteLayer.show();
    }, function (error) {alert(error)}
);
MapLayers.TileLayerCreates a layer that is responsible for displaying the generated tiles from the tile server.
MapLayers.TileZoomCreates a layer that displays a scaled transition in place of some existing MapLayers.TileLayer when it is zoomed.
MapLayers.TrafficLayerCreates a layer that is responsible for displaying traffic tiles from the tile server.
MapLayers.ViewportReferenceLayerA class for displaying a shaded rectangular region on a map to correspond to the viewport of another map.
MapLayers.WMSTileLayerCreates a layer that is responsible for displaying displaying WMS overlay tiles from the tile server. This class can be used to display tiles generated from a single WMS source, or from two WMS sources composited together and served as a single set of tiles.
MapLayers.XSLTObjectLayerCreates a layer to contain a large number of objects that are read from an XML file and displayed. It uses XSLT for handling object clipping to the viewport, which loads more quickly than the RTree used in MapLayers.ObjectLayer at the cost of flexibility. Markers are loaded cell-by-cell in a grid (whose pitch may be specified with the MapLayers.XSLTObjectLayer.config.cellCount configuration property) and are specified by data read from the XML by specified XPath expressions (relative to each marker tag). Note: In IE9, you must add the following header to the HTML file when using XSLTObjectLayer:
JavaScript
Copy
<meta http-equiv="X-UA-Compatible" content="IE=8">
MapLayers.ZoomIndicatorA map object used to briefly display a zooming image at the focal point of a map's zoom, making it clear how the map is being centered.