Controls

Controls are a way to encapsulate functionality on a map. The following controls are ones currently available in this release:

Modules are blocks of code not included with the default API download that provide additional functionality. For example, in order to add a control to the map you must first dynamically download the module. In order to add a control to the map you must exercise the MQA.withModule function to download initialize it prior to adding it to the map. This can be accomplished with the following code: 

   1  
   2  MQA.withModule('module_name', function() {
   3  });
   4

or

   1  
   2  MQA.withModule('zoomcontrol3', your_defined_function);
   3

As you can see, MQA.withModule takes 2 parameters. The first parameter is the name of the module to be dynamically loaded. The second parameter is a function that is called after the dynamic loading of the module has been completed; you may provide an inline function definition or the name of an already defined function.

You can also add multiple controls at the same time with the following, the key here is that the last parameter should be your callback function to be called when the downloading and initialization is complete. The following is an example of downloading multiple modules all at once: 

   1  
   2  MQA.withModule('module_name','another_module_name','one_more_module_name', function() {
   3  });
   4

After getting the module downloaded and initialized you will then need to add it to the map. See the examples below: 

   1  
   2  map.addControl( control, placement );
   3

Zoom Control 3

   1  
   2  MQA.withModule('zoomcontrol3', function() {
   3  	
   4    map.addControl(
   5      new MQA.LargeZoomControl3(), 
   6      new MQA.MapCornerPlacement(
   7        MQA.MapCorner.TOP_LEFT, 
   8        new MQA.Size(5, 5)
   9      )
  10    );
  11  
  12  });
  13

Run this example stand-alone

View Control 3

   1  
   2  MQA.withModule('viewcontrol3', function() {
   3  			
   4    map.addControl(
   5      new MQA.ViewControl3(), 
   6      new MQA.MapCornerPlacement(
   7        MQA.MapCorner.TOP_RIGHT, 
   8        new MQA.Size(5, 5)
   9      )
  10    );
  11  
  12  });
  13

Run this example stand-alone

Traffic Control

   1  
   2  MQA.withModule('traffictogglecontrol', function() {
   3  	
   4    map.addControl(
   5      new MQA.TrafficToggleControl(), 
   6  	  new MQA.MapCornerPlacement(
   7  		  MQA.MapCorner.TOP_LEFT, 
   8  		  new MQA.Size(200, 5)
   9  		)
  10  	);
  11  
  12  });
  13

Run this example stand-alone

Overview Map Control

   1  
   2  MQA.withModule('overviewmapcontrol', function() {
   3  	
   4    map.addControl(
   5      new MQA.OverviewMapControl(), 
   6  	  new MQA.MapCornerPlacement(
   7  		  MQA.MapCorner.BOTTOM_LEFT, 
   8  		  new MQA.Size(200, 5)
   9  		)
  10  	);
  11  
  12  });
  13

Run this example stand-alone

Learn how to pan a map