Classes

gvector.AGS ArcGIS Server

This class creates a layer that processes and displays features from an ArcGIS Server. You can also use this class to create a layer from any services that implement Esri's Geo REST specification, like Arc2Earth.

Usage Example

var myAGSLayer = new gvector.AGS({
    url: "http://maps.rtd-denver.com/ArcGIS/rest/services/BusLocations/MapServer/0",
    fields: "*",
    uniqueField: "OBJECTID",
    scaleRange: [13, 20],
    infoWindowTemplate: "<h3>Bus #{BUS_NUMBER}</h3><p>Speed: {SPEED} mph</p>"                
});

Constructor

Constructor	Description
`gvector.AGS( <AGS options> options )`	Instantiates an AGS layer with an object literal with AGS options described below.

Options

Option	Type	Default Value	Description
`url`	`String`	`null`	Required - A url for a specific layer in an ArcGIS Server service.
`map`	`Object google.maps.Map object`	`null`	The Google Maps API `Map` object where the layer will be added. The layer can be added to the map later with the `setMap` method.
`scaleRange`	`Array`	`null`	An array with two number values that represent the minimum and maximum scales the layer is visible. For example: `[14, 17]`
`dynamic`	`Boolean`	`false`	Whether or not the layer contains dynamic data. If true, feature geometry and attributes will be checked for changes after extent change and/or after a defined interval. For details check the dynamic data documentation.
`autoUpdate`	`Boolean`	`false`	Whether or not to auto-update a dynamic layer. If true, feature geometry and attributes will be updated at an interval set by the `autoUpdateInterval` option. For details check the dynamic data documentation.
`autoUpdateInterval`	`Integer`	`null`	The interval (in milliseconds) between checks for updated feature geometry and attributes when the `autoUpdate` option is set to `true`. For details check the dynamic data documentation.
`infoWindowTemplate`	`String\|Function`	`null`	A template for creating the content of a Google Maps InfoWindow when a feature is clicked. For details check the InfoWindow Template documentation.
`singleInfoWindow`	`Boolean`	`false`	Whether or not to show a single InfoWindow for a layer when features are clicked. This keeps the map from getting cluttered when multiple features are clicked.
`symbology`	`Object symbology options`	`null`	The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the symbology options documentation.
`showAll`	`Boolean`	`false`	If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.
`fields`	`String`	`null`	A list of comma separated fields to be returned with the features. For example `"OBJECTID,OWNER_NAME"` returns two fields and `"*"` returns all fields.
`where`	`String`	`null`	Any additional SQL query(ies) to further filter the returned features.
`uniqueField`	`String`	`null`	A field in the returned data that can be considered unique. This isn't required but is very helpful in determining which features are already on the map when the map extent changes.
`esriOptions`	`Boolean`	`false`	Whether or not to request `scaleRange` and `symbology` settings from the ArcGIS Server back-end. This can help a lot of you've spent a lot of time on symbolizing things in ArcGIS Desktop.

Methods

Method	Description
`setMap( <google.maps.Map> Map )`	Adds the layer to a map. Remove the layer by passing `null`.
`getMap()`	Gets the map (if any) that the layer has been added to.

gvector.A2E Arc2Earth

This class creates a layer that processes and displays features from an Arc2Earth Sync instance.

Usage Example

var myA2ELayer = new gvector.A2E({
    url: "http://sync.arc2earth.com/6442491/ArcGIS/rest/services/tfs/2447544/FeatureServer/0",
    esriOptions: true,
    uniqueField: "global_fid",
    infoWindowTemplate: '<div class="iw-content"><h3>{Name}</h3></div>',
    singleInfoWindow: true,
    dynamic: true,
    autoUpdate: true
});

Constructor

Constructor	Description
`gvector.A2E( <A2E options> options )`	Instantiates an A2E layer with an object literal with A2E options described below.

Options

Option	Type	Default Value	Description
`url`	`String`	`null`	Required - A url for a specific layer in an ArcGIS Server service.
`map`	`Object google.maps.Map object`	`null`	The Google Maps API `Map` object where the layer will be added. The layer can be added to the map later with the `setMap` method.
`scaleRange`	`Array`	`null`	An array with two number values that represent the minimum and maximum scales the layer is visible. For example: `[14, 17]`
`dynamic`	`Boolean`	`false`	Whether or not the layer contains dynamic data. If true, feature geometry and attributes will be checked for changes after extent change and/or when a PubNub message is sent to the client.
`autoUpdate`	`Boolean`	`false`	Whether or not to auto-update a dynamic layer. If true, feature geometry and attributes will be updated in near real-time by subscribing to PubNub events.
`infoWindowTemplate`	`String\|Function`	`null`	A template for creating the content of a Google Maps InfoWindow when a feature is clicked. For details check the InfoWindow Template documentation.
`singleInfoWindow`	`Boolean`	`false`	Whether or not to show a single InfoWindow for a layer when features are clicked. This keeps the map from getting cluttered when multiple features are clicked.
`symbology`	`Object symbology options`	`null`	The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the symbology options documentation.
`showAll`	`Boolean`	`false`	If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.
`fields`	`String`	`null`	A list of comma separated fields to be returned with the features. For example `"OBJECTID,OWNER_NAME"` returns two fields and `"*"` returns all fields.
`where`	`String`	`null`	Any additional SQL query(ies) to further filter the returned features.
`uniqueField`	`String`	`null`	A field in the returned data that can be considered unique. This isn't required but is very helpful in determining which features are already on the map when the map extent changes.
`esriOptions`	`Boolean`	`false`	Whether or not to request `scaleRange` and `symbology` settings from the Arc2Earth Sync back-end. Layers loaded from ArcGIS Desktop into Arc2Earth Sync will retain `scaleRange` and `symbology` settings from ArcGIS Desktop.

Methods

Method	Description
`setMap( <google.maps.Map> Map )`	Adds the layer to a map. Remove the layer by passing `null`.
`getMap()`	Gets the map (if any) that the layer has been added to.

gvector.GeoIQ GeoIQ - Geocommons

This class creates a layer that processes and displays features from a GeoIQ dataset.

Usage Example

var myGeoIQLayer = new gvector.GeoIQ({
    dataset: 164880,
    uniqueField: "NAME",
    scaleRange: [6, 20],
    infoWindowTemplate: '<div class="iw-content"><h3>{NAME}</h3></div>',
    singleInfoWindow: true,
    symbology: {
        type: "single",
        vectorOptions: {
    	    icon: "../../docs-demo/img/markers/ski-lift.png"
        }
    }
});

Constructor

Constructor	Description
`gvector.GeoIQ( <GeoIQ options> options )`	Instantiates a GeoIQ layer with an object literal with GeoIQ options described below.

Options

Option	Type	Default Value	Description
`dataset`	`Number`	`null`	Required - A dataset id for a GeoIQ/Geocommons dataset.
`map`	`Object google.maps.Map object`	`null`	The Google Maps API `Map` object where the layer will be added. The layer can be added to the map later with the `setMap` method.
`scaleRange`	`Array`	`null`	An array with two number values that represent the minimum and maximum scales the layer is visible. For example: `[14, 17]`
`dynamic`	`Boolean`	`false`	Whether or not the layer contains dynamic data. If true, feature geometry and attributes will be checked for changes after extent change and/or after a defined interval. For details check the dynamic data documentation.
`autoUpdate`	`Boolean`	`false`	Whether or not to auto-update a dynamic layer. If true, feature geometry and attributes will be updated at an interval set by the `autoUpdateInterval` option. For details check the dynamic data documentation.
`autoUpdateInterval`	`Integer`	`null`	The interval (in milliseconds) between checks for updated feature geometry and attributes when the `autoUpdate` option is set to `true`. For details check the dynamic data documentation.
`infoWindowTemplate`	`String\|Function`	`null`	A template for creating the content of a Google Maps InfoWindow when a feature is clicked. For details check the InfoWindow Template documentation.
`singleInfoWindow`	`Boolean`	`false`	Whether or not to show a single InfoWindow for a layer when features are clicked. This keeps the map from getting cluttered when multiple features are clicked.
`symbology`	`Object symbology options`	`null`	The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the symbology options documentation.
`showAll`	`Boolean`	`false`	If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.
`uniqueField`	`String`	`null`	A field in the returned data that can be considered unique. This isn't required but is very helpful in determining which features are already on the map when the map extent changes.

Methods

Method	Description
`setMap( <google.maps.Map> Map )`	Adds the layer to a map. Remove the layer by passing `null`.
`getMap()`	Gets the map (if any) that the layer has been added to.

gvector.CartoDB CartoDB

This class creates a layer that processes and displays features from a CartoDB table.

Usage Example

var myCartoDBLayer = new gvector.CartoDB({
    user: "geojason",
    table: "man_hole",
    scaleRange: [16, 20],
    symbology: {
        type: "single",
        vectorOptions: {
            icon: "../../docs-demo/img/markers/manhole.png"
        }
    },
    infoWindowTemplate: '<h3>Man Hole</h3<p>Depth: {mh_depth}</p>',
    singleInfoWindow: true
});

Constructor

Constructor	Description
`gvector.CartoDB( <CartoDB options> options )`	Instantiates a CartoDB layer with an object literal with CartoDB options described below.

Options

Option	Type	Default Value	Description
`user`	`String`	`null`	Required - The CartoDB user that owns the table to be displayed. For example a CartoDB map viewed via a URL like `http://geojason.cartodb.com/map`, "geojason" is the CartoDB user.
`table`	`String`	`null`	Required - The CartoDB table name for the data to be displayed.
`version`	`String\|Number`	`1`	The CartoDB API version.
`where`	`String`	`null`	Any additional SQL query(ies) to further filter the returned features.
`map`	`Object google.maps.Map object`	`null`	The Google Maps API `Map` object where the layer will be added. The layer can be added to the map later with the `setMap` method.
`scaleRange`	`Array`	`null`	An array with two number values that represent the minimum and maximum scales the layer is visible. For example: `[14, 17]`
`dynamic`	`Boolean`	`false`	Whether or not the layer contains dynamic data. If true, feature geometry and attributes will be checked for changes after extent change and/or after a defined interval. For details check the dynamic data documentation.
`autoUpdate`	`Boolean`	`false`	Whether or not to auto-update a dynamic layer. If true, feature geometry and attributes will be updated at an interval set by the `autoUpdateInterval` option. For details check the dynamic data documentation.
`autoUpdateInterval`	`Integer`	`null`	The interval (in milliseconds) between checks for updated feature geometry and attributes when the `autoUpdate` option is set to `true`. For details check the dynamic data documentation.
`infoWindowTemplate`	`String\|Function`	`null`	A template for creating the content of a Google Maps InfoWindow when a feature is clicked. For details check the InfoWindow Template documentation.
`singleInfoWindow`	`Boolean`	`false`	Whether or not to show a single InfoWindow for a layer when features are clicked. This keeps the map from getting cluttered when multiple features are clicked.
`symbology`	`Object symbology options`	`null`	The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the symbology options documentation.
`showAll`	`Boolean`	`false`	If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.
`fields`	`String`	`"*"`	A list of comma separated fields to be returned with the features. By default all fields are returned.

Methods

Method	Description
`setMap( <google.maps.Map> Map )`	Adds the layer to a map. Remove the layer by passing `null`.
`getMap()`	Gets the map (if any) that the layer has been added to.

gvector.PRWSF PostGIS RESTful Web Service Framework

This class creates a layer that processes and displays features from a PostGIS RESTful Web Service Framework geotable.

The PostGIS RESTful Web Service Framework is an open source project written in PHP that creates a set of web services that allow you to query geo data in a PostGIS database. These web services are extemely flexible allowing you to project, aggregate, order and serialize your data in many different ways. Below are some implementations I've found:

Usage Example

var myPrwsfLayer = new gvector.PRWSF({
    url: "http://gis.drcog.org/REST",
    geotable: "mountain_backdrop_preservation_area",
    fields: "gid",
    uniqueField: "gid",
    srid: 2232,
    showAll: true,
    symbology: {
        type: "single",
        vectorOptions: {
            fillColor: "#2f4a00",
            fillOpacity: 0.4,
            strokeWeight: 1.8,
            strokeColor: "#2f4a00",
            strokeOpacity: 1,
            clickable: false
        }
    }
});

Constructor

Constructor	Description
`gvector.PRWSF( <PRWSF options> options )`	Instantiates a PRWSF layer with an object literal with PRWSF options described below.

Options

Option	Type	Default Value	Description
`url`	`String`	`null`	Required - The root URL for the PostGIS RESTful Web Service Framework instance.
`geotable`	`String`	`null`	Required - The geotable for which we want data to be displayed.
`fields`	`String`	`null`	A list of comma separated fields to be returned with the features. By default only the geometry field is returned. You'd likely want to also return a unique id and some other attribute information.
`geomFieldName`	`String`	`"the_geom"`	The geometry field name for this geotable. Most commonly found as `the_geom`
`srid`	`Integer`	`null`	The SRID of the geometry in this geotable. This isn't required but increases performance drastically as the bounding box geometry can be projected to match your features' projection, which makes use of spatial indexes (that you've hopefully built).
`where`	`String`	`null`	Any additional SQL query(ies) to further filter the returned features.
`limit`	`Integer`	`null`	Limit the number of returned features.
`map`	`Object google.maps.Map object`	`null`	The Google Maps API `Map` object where the layer will be added. The layer can be added to the map later with the `setMap` method.
`scaleRange`	`Array`	`null`	An array with two number values that represent the minimum and maximum scales the layer is visible. For example: `[14, 17]`
`dynamic`	`Boolean`	`false`	Whether or not the layer contains dynamic data. If true, feature geometry and attributes will be checked for changes after extent change and/or after a defined interval. For details check the dynamic data documentation.
`autoUpdate`	`Boolean`	`false`	Whether or not to auto-update a dynamic layer. If true, feature geometry and attributes will be updated at an interval set by the `autoUpdateInterval` option. For details check the dynamic data documentation.
`autoUpdateInterval`	`Integer`	`null`	The interval (in milliseconds) between checks for updated feature geometry and attributes when the `autoUpdate` option is set to `true`. For details check the dynamic data documentation.
`infoWindowTemplate`	`String\|Function`	`null`	A template for creating the content of a Google Maps InfoWindow when a feature is clicked. For details check the InfoWindow Template documentation.
`singleInfoWindow`	`Boolean`	`false`	Whether or not to show a single InfoWindow for a layer when features are clicked. This keeps the map from getting cluttered when multiple features are clicked.
`symbology`	`Object symbology options`	`null`	The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the symbology options documentation.
`showAll`	`Boolean`	`false`	If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.

Methods

Method	Description
`setMap( <google.maps.Map> Map )`	Adds the layer to a map. Remove the layer by passing `null`.
`getMap()`	Gets the map (if any) that the layer has been added to.

gvector.GISCloud GIS Cloud

This class creates a layer that processes and displays features from a GIS Cloud map layer.

Usage Example

var myGisCloudLayer = new gvector.GISCloud({
    mapID: 27322,
    layerID: 117755,
    symbology: {
        type: "single",
        vectorOptions: {
            strokeWeight: 4,
            strokeColor: "#46461f",
            strokeOpacity: 0.8
        }
    },
    scaleRange: [13, 18]
});

Constructor

Constructor	Description
`gvector.GISCloud( <GISCloud options> options )`	Instantiates a GISCloud layer with an object literal with GISCloud options described below.

Options

Option	Type	Default Value	Description
`mapID`	`String\|Number`	`null`	Required - The GIS Cloud Map ID where your layer can be found.
`layerID`	`String\|Number`	`null`	Required - The GIS Cloud Layer ID for your layer.
`where`	`String`	`null`	Any additional SQL query(ies) to further filter the returned features.
`map`	`Object google.maps.Map object`	`null`	The Google Maps API `Map` object where the layer will be added. The layer can be added to the map later with the `setMap` method.
`scaleRange`	`Array`	`null`	An array with two number values that represent the minimum and maximum scales the layer is visible. For example: `[14, 17]`
`dynamic`	`Boolean`	`false`	Whether or not the layer contains dynamic data. If true, feature geometry and attributes will be checked for changes after extent change and/or after a defined interval. For details check the dynamic data documentation.
`autoUpdate`	`Boolean`	`false`	Whether or not to auto-update a dynamic layer. If true, feature geometry and attributes will be updated at an interval set by the `autoUpdateInterval` option. For details check the dynamic data documentation.
`autoUpdateInterval`	`Integer`	`null`	The interval (in milliseconds) between checks for updated feature geometry and attributes when the `autoUpdate` option is set to `true`. For details check the dynamic data documentation.
`infoWindowTemplate`	`String\|Function`	`null`	A template for creating the content of a Google Maps InfoWindow when a feature is clicked. For details check the InfoWindow Template documentation.
`singleInfoWindow`	`Boolean`	`false`	Whether or not to show a single InfoWindow for a layer when features are clicked. This keeps the map from getting cluttered when multiple features are clicked.
`symbology`	`Object symbology options`	`null`	The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the symbology options documentation.
`showAll`	`Boolean`	`false`	If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.

Methods

Method	Description
`setMap( <google.maps.Map> Map )`	Adds the layer to a map. Remove the layer by passing `null`.
`getMap()`	Gets the map (if any) that the layer has been added to.

Other Reference

Symbology

Symbology for a layer can be defined a few different ways including single, unique and range. If no symbology is defined the default Google Maps vector styles will be used -- Sad, black lines with gray fill for paths and boring red markers.

When instantiating a new layer, use one of the options below when setting the symbology option value.

single

The single type displays all features with the same symbology.

{
    type: "single", // Defines the symbology as a single type of representation for all features
    vectorOptions: { // Google maps vector options for all features
        fillColor: "#46461f",
        fillOpacity: 0.5,
        strokeWeight: 4,
        strokeColor: "#ff7800"
    }    
}

unique

The unique type displays features with the same attibute values with the same symbology. This is helpful when you have a handful of discrete values for which you want to define symbology.

Check the districts example on the ArcGIS Server demo page and view source to see it in action.

{
    type: "unique", // Defines the symbology as a unique type where features with an attribute of a specific value are symbolized the same way
    property: "DISTRICT", // The property (field, attribute) to use for defining unique values and styles
    values: [ // An array of values to set symbology. Each value has a specific symbology
        {
            value: "A", // If feature.properties.DISTRICT == "A"
            vectorOptions: { // Use these Google Maps vector options for features matching
                fillColor: "#6600FF",
                fillOpacity: 0.6,
                strokeColor: "#666666",
                strokeOpacity: 0.8,
                strokeWeight: 1
            }
        },
        {
            value: "B",
            vectorOptions: {
                fillColor: "#660066",
                fillOpacity: 0.6,
                strokeColor: "#666666",
                strokeOpacity: 0.8,
                strokeWeight: 1
            }
        },
        {
            value: "C",
            vectorOptions: {
                fillColor: "#FF9900",
                fillOpacity: 0.6,
                strokeColor: "#666666",
                strokeOpacity: 0.8,
                strokeWeight: 1
            }
        }
    ]
}

range

The range type tests values to see if they are within a specified range and symbolizes them accordingly. This is helpful for datasets that have values with lots of individual values like population counts per county in the US or in this example, vehicle speeds.

{
    type: "range", // Defines the symbology as a range type where values above a minimum and below a maximum value are symbolized the same way
    property: "SPEED", // The property (field, attribute) to use for defining range values and styles
    ranges: [ // An array of value ranges to set symbology. Each value range has a specific symbology.
        {
            range: [1, 20], // if feature.properties.SPEED >= 1 AND feature.properties.SPEED <= 20
            vectorOptions: { // Use these Google Maps vector options for features with values in this range
                icon: "../../docs-demo/img/markers/bus-brown.png"
            }
        },{
            range: [21, 100],
            vectorOptions: {
                icon: "../../docs-demo/img/markers/bus-green.png"
            }
        }
    ]
}

InfoWindow Templates

To create content to show InfoWindows when features are clicked we can use the infoWindowTemplate option. An infoWindowTemplate can be set two ways:

A string with property names wrapped in curly brackets ({road_name}) to act as placeholders for the values
A function that returns a string that will be used as the InfoWindow content. This function is passed the feature properties so that these properties can be used any number of ways to create InfoWindow content. You could do things like create a chart with Google's Chart API or format ALL CAPS text to Proper Case.

String Based

A simple infoWindowTemplate might look like:

"<h3>{road_name}</h3><p>Speed Limit: {speed_limit} mph</p>"

which gets transformed to:

"<h3>S Bemis St</h3><p>Speed Limit: 25 mph</p>"

Function Based

For more flexibility we can use a function to do some more complex operations with our feature properties for customized output. A function for an infoWindowTemplate might look like:

function(properties) {
    /* Assuming "properties" is an object like:
    {
        ROAD_NAME: "S Bemis St",
        SPEED_LIMIT: 25
    }
    */
    
    var output = "<h3>State Road</h3>";
    
    for (var prop in properties) {
        output += prop.replace(/_/gi, " ").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) + ": " + properties[prop] + "<br />";
    }
    return output;
}

This function iterates through each property in properties and formats each to Proper Case for better looking output.

"<h3>State Road</h3>Road Name: S Bemis St<br />Speed Limit: 25<br />"

Dynamic Data

To create a dynamic layer simply set the dynamic option to true. Using this option alone (without autoUpdate and autoUpdateInterval) will check for feature geometry and property changes when the map extent changes. If geometry changes are found the feature is altered on the map. If properties changes are found any InfoWindows associated with this feature are updated to reflect this change.

Auto-update

Using the autoUpdate and autoUpdateInterval options we can set a layer to automatically fetch new features every x seconds, even when the map extent hasn't changed. Set the autoUpdate option to true and autoUpdateInterval to the amount of time (in milliseconds) for how often you want features fetched. To create a dynamic layer that auto-updates every 5 seconds you might create your layer like:

var myAGSLayer = new gvector.AGS({
    url: "http://maps.rtd-denver.com/ArcGIS/rest/services/BusLocations/MapServer/0",
    fields: "*",
    uniqueField: "OBJECTID",
    dynamic: true,
    autoUpdate: true,
    autoUpdateInterval: 5000
});

Arc2Earth

Auto-updating works slightly different with Arc2Earth layers. Since update messages are almost immediately sent to the client using PubNub, only the dynamic and autoUpdate parameters must be set (both to true). This eliminates the need for constant polling, thus reducing the load on the server.

An auto-updating Arc2Earth layer might look something like:

myA2ELayer = new gvector.A2E({
    url: "http://sync.arc2earth.com/6442491/ArcGIS/rest/services/tfs/2447544/FeatureServer/0",
    esriOptions: true,
    uniqueField: "global_fid",
    popupTemplate: '<div class="iw-content"><h3>{Name}</h3></div>',
    singlePopup: true,
    dynamic: true,
    autoUpdate: true
});