GeoAnalytics Documentation

Get Started

Documentation

API Reference v1.3.1

Basics Code Samples

Controls

Markers

Events

Services

GeoJSON

Layers

Demos

Create your first map

GeoAnalytics JavaScript Library contains all the classes, objects methods and events to display a map visualization.
Below you'll find a step by step guide to create your first map.

1 - Create an Html5 document:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2 - Add the JavaScript Library on the <head> section:

3 - Create a div element in the <body> section that will containing your map:

4 - Add a style element in the <head> and add a style for setup you map size

<style>

#map{

width:600px;

height:400px;

}

</style>

5 - Add a script element after the <div> and create a mapContainer with the id of your div after the document loaded event and instantiate the map with the initial LatLng geographical position and the zoom level:

window.onload = function(){

var mapContainer = T.DomUtil.get("map");

var map = new T.Map(
mapContainer,
{
zoom: 3,
center: new T.LatLng(46.87, 2.3356)

}
);

};

</script>

6 - Create a new map layer for display the base map and add it to your map object:

var tibcoLayerStandard = new T.TibcoLayer({name: "TibcoLayer 1"});

map.addLayer(tibcoLayerStandard);

7 - Add a navigation control: Instantiate your navigation control and add it to your map object:

var navigationControl = new T.NavigationControl({
offset: [10, 10],
panControl: true,
zoomControl: true,
zoomRailHeight: 120,
titles: {
panUp: "Pan up",
panDown: "Pan down",
panLeft: "Pan left",
panRight: "Pan right",
reset: "Reset map",
zoomIn: "Zoom in",
zoomOut: "Zoom out"
}
});

map.addControl(navigationControl);

The offset set the position X and Y in pixel from the top left position of the navigation control.

8 - Instantiate a markersLayer object and add it on the map:

var markersLayer = new T.MarkersLayer();

map.addLayer(markersLayer);

9 - Create a new marker using ImageMarker object and add it to the markersLayer:

var marker = new T.ImageMarker( new T.LatLng(46.87, 2.3356),

"http://geoanalytics.tibco.com/api/rest/assets/images/pin.png");

markersLayer.addMarker(marker);

Copy/Paste working example

Below you'll find the complete working example. Create a new HTML file, copy in the contents below, and open in a browser: