//create new bounds object
var bounds = new giscloud.Bounds(-8007996.928,5238368.0905,
-8005498.3926,5240264.6843);
bounds.center().toString(); //returns center of the bounds
bounds.height().toString(); //returns height of the bounds
bounds.width().toString(); //returns width of the bounds
bounds.isPoint(); //false
bounds.valid(); //true
Constructor
Constructor
Usage
Description
giscloud.Bounds( <Number> left, <Number> bottom, <Number> right, <Number> top )
//create new color object
var c = new giscloud.Color(255, 0, 0);
c.hex() // "#FF0000"
c.hex("0x") // "0xFF0000"
c.hex("HEX:") // "HEX:FF0000"
c.hex("") // "FF0000"
Gets or sets the color’s HSL values. Input params are integers, color component levels in HSL space. The value range for should be 0-360 for hue and 0-100 for saturation and lightness values.
hsv( <Number> hue, <Number> saturation, <Number> value )
get:[hue, saturation, value], set:this
Gets or sets the color’s HSV values. Input params are integers, color component levels in HSV space. The value range for should be 0-360 for hue and 0-100 for saturation and value values.
rgb( <Number> red, <Number> green, <Number> blue )
get:[hue, saturation, lightness], set:this
Gets or sets the color’s RGB values. Input params are integers, color component levels in RGB space. Values should range from 0 to 255.
//create new feature
var pointStyle = new giscloud.GraphicStyle("point");
var pointGeom = new giscloud.geometry.Point(-6140.0432, 6709200.4413);
var point = new giscloud.GraphicFeature(pointGeom, pointStyle);
var featureData = {
data: {
title: "myFeature",
name: "feature 1",
message: "Feature is created!",
attribute1: "myAttribute"
},
layerId: 733107
};
var feature = new giscloud.Feature(featureData);
feature.geometry = point;
feature.update();
Makes a new feature object which is a clone of the original. Call update on the new feature to save it to the cloud. It is necessary to have feature’s geometry defined to actually see the feature on the map.
Marker that can have title and content. It has a possibility to define title background color.
//create new flag marker
var lonlat = new giscloud.LonLat(lon,lat);
var text = "Marker text!";
var marker = new giscloud.FlagMarker(); //create marker
giscloud.ui.map.addMarker(marker); //add marker to map
marker.position(lonlat).content(text);
Gets or sets the color of the flag marker. If the color argument is provided, the FlagMarker object is returned; if omitted, the method returns the current marker color as a giscloud.Color object.
content( <String> content )
set:this, get:String
Gets or sets the content of the flag marker. If the content argument is provided, the FlagMarker object is returned; if omitted, the method returns the current marker content.
Gets or sets the position of the flag marker. If the pos argument is provided, the FlagMarker object is returned; if omitted, the method returns the marker’s current location as a giscloud.LonLat object.
title( <String> title )
set:this, get:String
Gets or sets the title of the flag marker. If the title argument is provided, the FlagMarker object is returned; if omitted, the method returns the current title.
A layer on the map which can hold arbitrary geometries. Add giscloud.GraphicFeatures to this layer.
//add point to graphic layer
var pointStyle = new giscloud.GraphicStyle("point");
var pointGeom = new giscloud.geometry.Point(-6140.0432, 6709200.4413);
var point = new giscloud.GraphicFeature(pointGeom, pointStyle);
viewer.graphic.add(point);
This starts the drawing on the viewer graphic layer. Type can be point, line or polygon. The drawing ends on a doubleclick, right click and "end draw", or when another draw command is issued either to start a new drawing or to just end the current one. The last is done by calling graphic.draw(false).
A stylable feature which can be shown on a map via the giscloud.Graphic layer.
//create new line with line style
var lineStyle = new giscloud.GraphicStyle("line");
var lineGeom = new giscloud.geometry.Line([firstPoint, secondPoint]);
var line = new giscloud.GraphicFeature(lineGeom, lineStyle); //new line with
//line style
//create new line and show that line with default 'line' style
var lineStyle = new giscloud.GraphicStyle("line"); //'line' is default style
var lineGeom = new giscloud.geometry.Line([firstPoint, secondPoint]);
var line = new giscloud.GraphicFeature(lineGeom, lineStyle);
//create new line and show that line with created style
var lineGraphic = {
color: new giscloud.Color(160,160,160,100),
size: 1
};
var lineStyle = new giscloud.GraphicStyle(lineGraphic);
var lineGeom = new giscloud.geometry.Line([firstPoint, secondPoint]);
var line = new giscloud.GraphicFeature(lineGeom, lineStyle);
Simple marker with only three methods. Great for showing one information per object.
//create new label marker
var lonlat = new giscloud.LonLat(lon,lat);
var text = "Marker text!";
var marker = new giscloud.LabelMarker(); //create marker
giscloud.ui.map.addMarker(marker); //add marker to map
marker.location(lonlat).content(text);
//create new LonLat object and print object properties (lon and lat)
var lonlat = new giscloud.LonLat(3,5);
lonlat.lon.toString(); //return longitude -> "3"
lonlat.lat.toString(); //return latitude -> "5"
//create two LonLat objects and check if coordinates of objects are equal
var lonlat_first = new giscloud.LonLat(3,5);
var lonlat_second = new giscloud.LonLat(5,3);
lonlat_first.equals(lonlat_second); //return false
//transform LonLat object from one projection to another
var lonlat = new giscloud.LonLat(11,17);
lonlat.transform(4326,900913);
Constructor
Constructor
Usage
Description
giscloud.LonLat( <Number> longitude, <Number> latitude )
The most complex marker with many different options.
//create new marker
var lonlat = new giscloud.LonLat(lon,lat);
var text = "Marker text!";
var markerIcon = { url: "...", width: 0, height: 0 };
var marker = new giscloud.Marker(); //create marker
marker.icon(markerIcon);
giscloud.ui.map.addMarker(marker); //add marker to map
marker.location(lonlat).label(text);
Makes a new marker. Options are title, content, visible,
Methods
Method
Returns
Description
content( <String> content )
set:this, get:String
Gets or sets the content of the marker. Content is shown in the popup, together with the title. If the content argument is provided, the Marker object is returned; if omitted, the method returns the current marker content.
icon( <Object> iconDefinition )
set:this, get:IconDefinition
Gets or sets the marker icon. Input is Object or string, an icon definition object or the url if the icon image. If the iconDefinition argument is provided, the Marker object is returned; if omitted, the method returns the marker’s icon.
Gets or sets the location of the marker. Called without arguments, returns the current location of the marker. If the lonlat argument is provided, the Marker object is returned; if omitted, the method returns the marker’s current location as a giscloud.LonLat object.
popup( <Boolean> onoff )
set:this, get:Boolean
Shows or hides the marker popup. Called without arguments, returns the current visibility of the popup. If the onoff argument is provided, the Marker object is returned; if omitted, the method returns the current popup visibility (bool).
rotation( <Number> rotation )
set:this, get:<Number>
Gets or sets the rotation of the marker.
title( <String> title )
set:this, get:String
Gets or sets the marker title. The title is shown as a tip when hovering the marker. If the title argument is provided, the Marker object is returned; if omitted, the method returns the current title.
visible( <Boolean> onoff )
set:this, get:String
Gets or sets the visibility of the flag marker. Called without arguments, returns the current visibility of the marker. If the onoff argument is provided, the Marker object is returned; if omitted, the method returns the marker’s visibility as a boolean value.
This object is equal to jQuery promise() object. Description from jQuery official page: ‘Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.’ (web page: http://api.jquery.com/promise/).
//create new query for 'myTable' table
new giscloud.Query("myTable")
.where("ogc_fid",">",3)
.first()
.done(function(record) {
console.log(record);
});
//bind event handler on viewer and show coordinates of mouse as tooltip
...
viewer.bind("mouseMove", showCoords);
function showCoords (coord) {
viewer.showTip(coord);
}
Gets or sets the bounds of the viewer. If the bounds argument is provided, the Viewer object is returned; if omitted, the method returns the current viewer bounds.
Gets or sets the center of the viewer. If the bounds argument is provided, the Viewer object is returned; if omitted, the method returns the current viewer center as a LonLat object.
container( <String> containerId )
set:this, get:container
Gets or sets map viewer container.
createAsMaplimProject()
doubleClick( <Function> callback )
this
Event handler function for the viewer doubleClick event.
Sets active dynamic feature filtering. Object filter has to be specified with properties ‘attributes’ which list which attributes should be loaded with map tiles and property ‘filter’ which is a function that will do the filtering. e.g. {"attributes":"a,b", filter: function(obj) { return obj.a == 123 || obj.b = 456;}
fullExtent()
this
Zooms to map full extent.
getRenderParams( <Number> scale )
Object
Returns render parameters, image scale factor, image width(px) and height(px).
height( <Number> height )
get:Number, set:this
Gets or sets the height of the viewer container element. If the height argument is provided, the Viewer object is returned; if omitted, the method returns the height in pixels.
hideLayer( <Number> layerId )
this
Hides a layer.
hideLayerLabels( <Number> layerId )
this
Hides a layer’s labels.
hideTip()
this
Hides the tooltip.
init( <Function> handler )
this
Binds an event that fires upon viewer initialization.
Gets or sets the viewer scale. If the scale argument is provided, the Viewer object is returned; if omitted, the method returns the current viewer scale.
scaleChange( <Function> handler )
this
Binds an event that fires upon the map scale (zoom) has changed.
Select features by bounds. Optionally clears already active selection.
selectionChange( <Function> handler )
this
Binds an event that fires upon selection has changed.
showLayer( <Number> layerId )
this
Shows a layer.
showLayerLabels( <Number> layerId )
this
Shows layer’s labels.
showTip( <String> text )
this
Shows the tooltip.
unbind( <String> eventName, <Function> handler )
this
Unbinds an event handler.
width( <Number> width )
get:Number, set:this
Gets or sets the width of the viewer container element. If the width argument is provided, the Viewer object is returned; if omitted, the method returns the width in pixels.
zoomToCurrentLocation()
this
Function zooms on map to your current location using browsers geolocation.
zoomToLayer( <Number> layerId )
this
Zooms to a layer’s extent.
Events
Event
Data
Description
mouseDown
MouseEvent
Fired when the user pushes the mouse button on the viewer.
mouseUp
MouseEvent
Fired when the user pushes the mouse button on the viewer.
mouseMove
MouseEvent
Fired while the mouse moves over the viewer.
dragEnd
DragEndEvent
Fired when the user stops dragging the map.
scaleChange
ResizeEvent
Fired when the map is resized.
boundsChange
Event
Fired when the map bounds are changed.
featureClick
Event
Fired when the user clicks on any of features.
featureDoubleclick
Event
Fired when the user double-clicks on any of features.
//list all data sources for one user
giscloud.datasources.list()
.done(function (data) {
console.log(data.total); //number of data sources
});
//create new data source
var data = {
name: "MyDatasource",
type: 10,
owner_id: , //userId
params: {
type: "pg"
},
epsg: 4326
};
giscloud.datasources.create(data) //create new data source
.done(function (data) {
console.log(data);
});
//create new data source -> from wms
var data = {
name: "MyWMS",
type: 40,
params: {
url: "http://editor.giscloud.com/wms/450a77de8b3cace9fcc3c3bd39ccaa86"
}
};
giscloud.datasources.create(data) //create new data source
.done(function (data) {
console.log(data);
});
Methods
Method
Returns
Description
giscloud.datasources.addColumn( <String> id_or_rel_path, <Object> data )
Creates a new giscloud.datasources.Datasource object. Data properties can be id, resource_id, name, owner_id, type, epsg, proj4, description and copyright.
Methods
Method
Returns
Description
clone()
A new giscloud.Datasource object.
Creates a new giscloud.Datasource object with the same values as the original.
//print list of projections used in map with defined wms url
giscloud.datasources.wms
.getCapabilities("http://editor.giscloud.com/wms/346c5724511c16b7faffa35cfce2f7b6", "1.3.0")
.done(function (data) {
console.log(data.srs);
});
//print number of days in July 2014
var numberOfDays = giscloud.date.daysInMonth(7,2014);
parseInt(numberOfDays); //return number of days in July, 2014 year
Methods
Method
Returns
Description
giscloud.date.daysInMonth( <Number> month, <Number> year )
Date
Constructs Date object from month year
giscloud.date.generateTimeline( <Array> years, <Boolean> showDays, <Number> step, <Boolean> dontGoInFuture )
Note: adding or removing a feature from a map requires reinitialization of the map or the layer it belongs to in order to see the changes. (Check out giscloud.maps.reset or giscloud.layers.reset ) The optimal way to add more than one feature is to first add all of them and then reinitialize the current map or layer.
//create new feature
var pointStyle = new giscloud.GraphicStyle("point");
var pointGeom = new giscloud.geometry.Point(50,50);
var point = new giscloud.GraphicFeature(pointGeom, pointStyle);
var featureData = {
data: {
title: "myFeature",
name: "feature 1",
message: "Feature is created!"
},
geometry: {point},
layerId: 733107
};
giscloud.features.create(733107, featureData);
//print number of features in defined bounds
var bounds = new giscloud.Bounds(-8007996.928,5238368.0905,-8005498.3926,5240264.6843);
giscloud.features.byBounds(layerId, bounds, function (features) {
console.log(features.length); //number of features
});
//print geometry in OGC Simple Features WKT
var point = new giscloud.geometry.Point(-6140.0432, 6709200.4413); //giscloud point object
giscloud.geometry.toOGC(point);
// print number of features at defined point in two layers
var lonlat = new giscloud.LonLat(-6140.0432, 6709200.4413);
var options = {
srid: 900913
};
giscloud.geoutils.featuresAtPoint(lonlat, [733107,748680], options, function (data) {
console.log(data.length); //number of features at point lonlat -> layer 733107
//and 748680
});
// filter features from layers using custom polygon geometry from WKT
var gcPolygon = giscloud.geometry.fromOGC(
"POLYGON ((1788874.8822150454 5752001.034001928,1790728.480150964 5752516.983942853,1790766.6986651048" +
"5753520.219939096,1788913.1007291898 5753778.194909558,1788406.7054168023 5753615.766224453,1788874.8822150454 5752001.034001928))"
);
// srid: any EPSG
// operation: within|outside|intersect (default if not specified)
giscloud.geoutils.spatialFilter(gcPolygon, [, , ...], {srid: 900913, operation: "within"}).done(out);
// print number of point features (in layer with id 1078) within polygon (in layer with id 1071, feature id 8)
giscloud.geoutils.spatialFilter(JSON.stringify({"1071": [8]}), [1078], {operation: "within"})
.done(function (e) {
console.log(e.length);
});
This creates a new layer. Input is object containing layer data. See the data returned using methods like giscloud.layers.byId to see a sample of data.
giscloud.layers.export( <Number> layerId, <String> exportFormat, <Boolean> zip )
String("URL")
Returns URL that can be used to export layerId into an exportFromat
The GIS Cloud API uses the OAuth 2.0 protocol for user authentication. This means you can have your custom built apps access data which is private to your GIS Cloud account. To authorize such access you must first obtain a client id from the GIS Cloud application.
//create login button in 'login' container
//apiKey is generated by Gis Cloud, you can make your own application on
//My Account -> API access -> Applications
giscloud.oauth2.authorize(apiKey, function() {
giscloud.oauth2.button("login");
});
//call "www.giscloud.com" and print http status
function httpStatus (response) {
console.log(response.http_status); //print http status
}
giscloud.proxy.call("www.giscloud.com", httpStatus);
// find features with these conditions:
// - layer id is equal to 3100666
// - one of the attributes has a value that is equal to or contains the word "Site3"
// - * in the fields parameter means that search goes through all the attributes
giscloud.search.features("Site3", "3100666~*");
// find features with these conditions:
// - layer id is equal to 3100666 or 3100667
// - one of the attributes has a value that is equal to or contains the word "Site1"
// - in the layer with the layer id 3100666 only attribute site_id is searched
// - in the layer with the layer id 3100667 only attribute site_id2 is searched
// - columns metadata is returned
giscloud.search.features("Site1", "3100666~site_id;3100667~site_id2", { columns_meta: true });
// find features with these conditions:
// - layer id is equal to 3100666 or 3100667
// - one of the attributes has a value that is equal to or contains the word "Site2"
// - returned features are sorted according to the distance of the newly created
// LonLat object
// print search results (score, match and distance)
giscloud.search.features("Site2", "3100666~*;3100667~*",
new giscloud.LonLat(46.80175781249989, -19.3526108943786))
.done(function (features) {
features && features.length > 0 && features.forEach(function (feature) {
console.log(feature.searchResult);
});
});
//check if one feature is within another
//9->first layer id, 8->first feature id, 10->second layer id, 1->second feature id
giscloud.spatialrelationship.within(9, 8, 10, 1)
.done(function (onoff) {
console.log(onoff); //prints true or false -> if it's true,
//feature 8 is within feature 1
});
//create giscloud table object with spatial data
//table definition -> spatial data
tableDef = {
name: table, //table name (string)
geometry: "point",
srid: 4326, //EPSG:4326
columns: {
"Country": { "type": "text" },
"City": { "type": "text" }
}
};
//create table
giscloud.tables.create(tableDef)
.fail(function () {
console.log("Problems with saving your table!");
return;
})
.done(function () {
console.log("Your table is saved!");
return;
});
//create giscloud table object with non spatial data
//table definition -> non spatial data
tableDef = {
name: table, //table name (string)
columns: {
id: { "type": "key" },
"Country": { "type": "text" },
"City": { "type": "text" }
}
};
//create table
giscloud.tables.create(tableDef)
.fail(function () {
console.log("Problems with saving your table!");
return;
})
.done(function () {
console.log("Your table is saved!");
return;
});
//search table by name
giscloud.tables.byName("building").done(out);
//find feature whose FID value is equal to 3 and print
//time of feature creating
var query = new giscloud.Query("myTable")
.equalTo("ogc_fid", "3")
.first();
giscloud.tables.query("myTable", query)
.done(function (result) {
console.log(result.__created); //time of feature creating
});
//list rows in polygon table
giscloud.tables.rows.list("polygon")
.done(function (rows) {
console.log(parseInt(rows.total)); //print number of rows in polygon table
});
//add a new row in point table
var point = new giscloud.geometry.Point(-6140.0432, 6709200.4413);
var data = {
geometry: point.toOGC(),
data: {
"attribute1": "myPoint",
"attribute2": "This is my first row."
}
};
giscloud.tables.rows.add("point", data); //add new row in 'point' table
//update row in point table
var data = {
data: {
"attribute1": "notMyPoint"
}
};
giscloud.tables.rows.update("point", 1, data); //update row,
//(tableName, rowId/featureId, data)
Shows a confirm dialog. In options it’s possible to specify callback_yes and callback_no properties as functions that will be called upon dialog result.
// create new FeatureForm
var myFeatureForm = new giscloud.ui.FeatureForm(, , );
// wait until the feature form is loaded, add two attributes and save the form
myFeatureForm.loaded.then(function() {
myForm.data({ "attribute1": 4, "attribute2": "hello" });
myForm.save().then(function(id) {
console.log(id); // print the feature id
});
});
// wait until the feature form is loaded, read all the attributes,
// clear all the attributes and save the form
myFeatureForm.loaded.then(function() {
var allData = myForm.data();
console.log(allData); // print all the attributes data
myForm.clear();
myForm.save().then(function(id) {});
});
// wait until the feature form is loaded, change one of the attributes,
// reset the form attributes and save the form
myFeatureForm.loaded.then(function() {
myFeatureForm.data({ "attribute1": 5 });
myForm.reset();
myForm.save().then(function(id) {});
});
// wait until the feature form is loaded, then destroy the form;
// which automatically removes it from the container
myFeatureForm.loaded.then(function() {
myFeatureForm.destroy();
});
Takes in an attributes object and sets new values for those attributes. Alternatively, it takes no params and returns an object with all the attribute values
destroy()
Destroys the form and removes it from the container
reset()
Sets the form attribute values to the last saved values
save()
Promise
Returns a thenable Deferred’s Promise object. Resolved when the form is saved with the value of the featureId
Properties
Property
Type
Description
loaded
Object
A thenable Deferred’s Promise object. Resolved when the form is loaded.
//create viewer in 'map' container and toolbar in 'toolbar' container
var viewer = new giscloud.Viewer("map", "mapId"); //creates viewer in 'map'
//container
var toolbar = new giscloud.ui.Toolbar({
viewer: viewer,
container: "toolbar", //creates toolbar in 'toolbar' container
defaultTools: ["pan", "zoom", "full", "measure", "select"] //some of default
//tools
});
//create your own tool and add it in toolbar
//tool will show mouse coordinate in marker
//when you click on viewer
var marker, newIcon = { url: "...", width: 0, height: 0 };
...
//add your own tool in toolbar
myFirstTool = new giscloud.ui.Toolbar.Tool(
//tool name
"myTool",
//tool options
{
styles: {
caption: "Show coords",
showCaption: true,
cssClass: "myTool",
active: "mytool-hover"
},
actions: {
activation: function (viewer) {
viewer.bind("mouseDown", showCoords);
},
deactivation: function (viewer) {
var markersList, i;
viewer.unbind("mouseDown", showCoords);
markersList = viewer.markers;
for (i = 0; i < markersList.length; i++) {
markersList[i].visible(false);
}
marker = null;
}
}
}
//add tool
toolbar.add(myFirstTool);
);
...
function showCoords (coord) {
//create new marker
if (!marker) {
marker = new giscloud.Marker();
marker.icon(newIcon);
viewer.addMarker(marker);
}
marker.location(coord).label("lon:" + coord.lon + " lat:" + coord.lat);
}
Options for default tools are: - instant (if true this tool will just run the activation function when activated, no event is triggered) - actions (functions which will handle tool actions) -> activation (activation function) -> deactivation (deactivation function) - styles (style options) -> caption (visible text for the tool or alt text if icons are used) -> showCaption (if true, the caption will be visible) -> cssClass (css class for the tool, .gc-tool is the default class) -> active (css class for an active tool, .gc-tool-active is the default class) -> hover (css class for the tool hover event, .gc-tool-hover is the default class) - icon (src for the icon image) -> iconActive (src for the active icon image) -> iconHover (src for the hover icon image) - toolbar (if the tooolbar is set through options, after the tool is added to that toolbar it will not be rendered, instead you should call the tool's method yourself. This way a tool can be placed anywhere on the page instead the toolbar strip.) - viewer (If you set the viewer through options, the tool can act independatly without being added to a toolbar. If the tool is, however, added to a toolbar, the toolbars viewer takes precedence over this setting.
GIS Cloud Developers