First you need to include the API into your web page. The API is readily available for use here: api.giscloud.com/1/api.js.
Start by placing this script tag in the head section of your web page.
Now that you have included the API, you can proceed by making a simple mapping application like this.
This application has a map viewer and a toolbar.
The viewer is created by supplying the giscloud. Viewer constructor with an id of the div container element and an id of a map in the GIS Cloud public directory. Once this has been done, a map viewer is embedded into the container div.
The toolbar above the map is a UI component included in the API. It is created using the giscloud.ui.Toolbar constructor.
The constructor is passed an object containing some of the toolbar properties:
Later in the reference you will learn how you can create and style your own tools to control the map viewer behaviour.
Please note that the viewer and toolbar creation code is inside a function passed to giscloud.ready(). You should use this feature when your code depends on the DOM being fully loaded. See demo.
GIS Cloud is more than just mapping. Through the JS API you can retrieve and manipulate data stored on GIS Cloud. Take a look at this example which lists all the public maps and their layers.
This example shows two methods used in data retrieval, giscloud.maps.list() and giscloud.layers.byMapId(). Those methods are used to get a list of GIS Cloud public maps and layers in those maps respectively.
Method giscloud.maps.list() makes a call to the server asking for all the maps in the public directory. Once the data is received it is passed to the callback function. Data is in form of an array withgiscloud.Map objects.
See the reference for
Method giscloud.layers.byMapId() makes a call to the server asking for the layers of the map specified by the mapId argument. Upon receiving the data, it is passed to the callback function as an argument. Layers data is in form of an array with giscloud.Layer objects.
See the reference for
Take a look at these example apps to see more features of the GIS Cloud JS API in use. The examples come with an explanation and excerpts from the code and you can always take a look at the source.
These are also available on GitHub.