Controls

The Javascript API comes with a handful of built-in controls that you can use in your map:

• AGScaleControl: Here you can get the scaling part of the map measured in kilometre. By default,it is positioned to the right bottom part of the main map.
• AGZoomControl: Zoom scale is used to scale the zoom position of the map which is controlled by the zoom bar. Even you can control zoom scale using zoom slide controller of the map.
• AGOverviewMapControl: Overview map is the mini version of the main map which can be dragged in the map arena.

All of these controls are based on the AGControl object.

Adding Controls to the Map

You add controls to the map with the AGMap method addControl(). For example, to add the overviewmap control to your map, you should include the following line in your map initialization:

Positioning Controls on the Map

The addControl method takes an optional second AGControlPosition parameter that lets you identify the position of the control on your map. This value can be one of the following values, each specifying a corner of the map in which to place the control:

• TOP_RIGHT
• TOP_LEFT
• BOTTOM_RIGHT
• BOTTOM_LEFT

You can create a number of control objects in the map as you can.

The AGControlPosition may optionally specify an offset indicating how many pixels from the edge of the map to place the control. These offsets are specified using a AGSize object.

The following example adds a control object to the top left corner of the map with 10 pixels of padding.

var agmap = new AGMap(document.getElementById("MapPanel"));
agmap.centreAndScale(new AGCoord(-25.7482681, 28.2259351), 12);
var ctrlPos = new AGControlPosition(new AGPoint(10,10), AGAnchor.TOP_LEFT);
var zoomCtrl = new AGZoomControl(1);
agmap.addControl(zoomCtrl,ctrlPos);

Controls can be removed using the AGMap.removeControl() method

   var agmap = null; //declare a global map object
   var zoomCtrl = null;
   function initAGMap()
   {
      agmap = new AGMap(document.getElementById("MapPanel"));
      agmap.centreAndScale(new AGCoord(-25.7482681, 28.2259351), 12);

      var ctrlPos = new AGControlPosition( new AGPoint(10,10), AGAnchor.TOP_LEFT);
      zoomCtrl = new AGZoomControl(1);
      agmap.addControl(zoomCtrl, ctrlPos);

      // default positions of zoomcontrol
      alert(zoomCtrl.getDefaultPosition().offset);
      alert(zoomCtrl.getDefaultPosition().anchor);
   }
   
   function removeZoomCtrl()
   {
      zoomCtrl.remove();
   }