JavaScript

Create your first map

TIBCO 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>

   <meta charset="UTF-8"/>

  </head>

  <body>

  </body>

</html>


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

<link rel="stylesheet" href="https://geoanalytics.tibco.com/javascript/v1.3.1/GeoAnalytics.css"/>
<script type="text/javascript" src='https://geoanalytics.tibco.com/javascript/v1.3.1/GeoAnalytics.js'></script>


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

<div id="map"></div>


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:

<script language="javascript">

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:

<!DOCTYPE html>

<html>

  <head>

   <meta charset="UTF-8"/>

   <link rel="stylesheet" href="https://geoanalytics.tibco.com/javascript/v1.3.1/GeoAnalytics.css"/>
 
<script type="text/javascript" src='https://geoanalytics.tibco.com/javascript/v1.3.1/GeoAnalytics.js'></script>

   <style>

    #map{

      width:600px;

      height:400px;

     }

   </style>

  </head>

  <body>

  <div id="map"></div>

  <script language="javascript">

window.onload = function(){

 //Create map container

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

 //Instantiate the map

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

 

 //Add the navigation control

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

  map.addLayer(tibcoLayerStandard);  

 //Add the navigation control

 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);

 //Add the marker

 var markersLayer = new T.MarkersLayer();

 map.addLayer(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);

     

};

</script>

  </body>

</html>