Overlays

 
//This uses the MQA.withModule support to download and initialize the shape support module.
//When the modules are ready for use, the function provided as the last parameter will be executed.
MQA.withModule('shapes', function() {

	
  var line = new MQA.LineOverlay();

  /*Set the shape points for the line.  The format is latitude1,longitude1,latitude2,longitude2.
    These are pairs of sequential points.  You must provide at least 2 pairs to draw a line but are 
    not limited to only 2.  If more are supplied, the line will continue to the next pair of points.*/
  line.setShapePoints([39.633041, -105.318492, 39.847136, -104.674787]);

  /*Adds the MQA.LineOverlay to the default shape collection of the MQA.TileMap*/
  map.addShape(line);

	
});

 
//This uses the MQA.withModule support to download and initialize the shape support module.
//When the modules are ready for use, the function provided as the last parameter will be executed.
MQA.withModule('shapes', function() {

	
  /*Creates an instance of MQA.RectangleOverlay*/
  var rectangle = new MQA.RectangleOverlay();	

  /*Sets the shape points. They must be in the following order [upper left latitude, upper left longitude, 
    lower right latitude, lower right longitude] to define the upper left and lower right corners of the rectangle.*/
  rectangle.setShapePoints([39.847136, -105.362437, 39.641389, -104.682833]);

  /*Adds the MQA.RectangleOverlay to the default shape collection of the MQA.TileMap*/
  map.addShape(rectangle);


});

 
//This uses the MQA.withModule support to download and initialize the shape support module.
//When the modules are ready for use, the function provided as the last parameter will be executed.
MQA.withModule('shapes', function() {

	
  /*Creates a new MQA.PolygonOverlay*/
  var poly = new MQA.PolygonOverlay();
 
  /*Sets the shape points. They must be in the following order [upper left latitude, upper left longitude,
    lower right latitude, lower right longitude] to define the upper left and lower right corners of the rectangle.*/
  poly.setShapePoints([39.756048, -105.221936, 39.602842, -105.0313, 39.73346, -104.831999]);

  /*Adds the MQA.PolygonOverlay to the default shape collection of the MQA.TileMap*/
  map.addShape(poly);


});

 
//This uses the MQA.withModule support to download and initialize the shape support module.
//When the modules are ready for use, the function provided as the last parameter will be executed.
MQA.withModule('shapes', function() {

	
  /*Creates a new MQA.EllipseOverlay*/
  var ellipse = new MQA.EllipseOverlay();

  /*Sets the shape points. They must be in the following order [upper left latitude, upper left longitude,
    lower right latitude, lower right longitude] to define the upper left and lower right corners of the rectangle.*/
  ellipse.setShapePoints([39.844927, -105.110526, 39.734442, -104.833237]);

  /*Adds the MQA.EllipseOverlay to the default shape collection of the MQA.TileMap*/
  map.addShape(ellipse);


});

 
//This uses the MQA.withModule support to download and initialize the shape support module.
//When the modules are ready for use, the function provided as the last parameter will be executed.
MQA.withModule('shapes', function() {

	
  /*Creates a new MQA.CircleOverlay*/
  var circle = new MQA.CircleOverlay();	

  /*Sets the radius unit to Miles. Options are 'MI' and 'KM' - defaults to miles if none specified.*/
  circle.radiusUnit='MI';

  /*Sets the radius measurement to 3 (miles) - specified with radiusUnit above.*/
  circle.radius='3';

  /*Sets the center point for the MQA.CircleOverlay*/
  circle.shapePoints=[39.744202, -105.019819];

  /*Adds the MQA.CircleOverlay to the default shape collection of the MQA.TileMap*/
  map.addShape(circle);


});

 
 //This uses the MQA.withModule support to download and initialize the shape support module.
 //When the modules are ready for use, the function provided as the last parameter will be executed.
 MQA.withModule('shapes', function() {

	
   var rectangle = new MQA.RectangleOverlay();		
   rectangle.setShapePoints([39.847136, -105.362437, 39.641389, -104.682833]);
   map.addShape(rectangle);

   /*Register event listeners*/
   MQA.EventManager.addListener(rectangle, 'mousedown', eventRaised);
   MQA.EventManager.addListener(rectangle, 'mouseup', eventRaised);
   MQA.EventManager.addListener(rectangle, 'mouseover', eventRaised);
   MQA.EventManager.addListener(rectangle, 'mouseout', eventRaised);
   MQA.EventManager.addListener(rectangle, 'dblclick', eventRaised);
   MQA.EventManager.addListener(rectangle, 'click', eventRaised);
   MQA.EventManager.addListener(rectangle, 'removed', eventRaised);
   MQA.EventManager.addListener(rectangle, 'mousemove', eventRaised);

   /*Write out events to events div*/
   function eventRaised(evt){
     var e=document.createElement('div');
     e.innerHTML=evt.eventName;
     var eDiv=document.getElementById('overlayEvents');
     eDiv.insertBefore(e, eDiv.firstChild);
   
     /*Cancels events from proprogating up*/
     MQA.EventUtil.stop(evt.domEvent);
  }


 });

 
//This uses the MQA.withModule support to download and initialize the shape support module.
//When the modules are ready for use, the function provided as the last parameter will be executed.
MQA.withModule('shapes', function() {

	
  /*Creates an instance of MQA.RectangleOverlay*/
  var rectangle = new MQA.RectangleOverlay();

  /*Sets the shape points. They must be in the following order [upper left latitude, upper left longitude,
    lower right latitude, lower right longitude] to define the upper left and lower right corners of the rectangle.*/
  rectangle.setShapePoints([39.847136, -105.362437, 39.641389, -104.682833]);

  /*Sets border color*/
  rectangle.color='#B00303';

  /*Sets alpha transparency of the border*/
  rectangle.colorAlpha=.3;

  /*Sets width of the border*/
  rectangle.borderWidth=4;

  /*Sets fill color*/
  rectangle.fillColor='#EFFF79';

  /*Sets alpha transparency of the fill color*/
  rectangle.fillColorAlpha=.2;

  /*Add the shape to the map's default shape collection*/
  map.addShape(rectangle);


});

 
//This uses the MQA.withModule support to download and initialize the shape support module.
//When the modules are ready for use, the function provided as the last parameter will be executed.
MQA.withModule('shapes', function() {

	
  /*Creates a new MQA.ImageOverlay*/
  var image = new MQA.ImageOverlay();	

  /*Set the URL of the image*/
  image.imageURL="/sdk/js/v6.1.0/images/mqlogo.png";

  /*Sets the shape points. They must be in the following order [upper left latitude, upper left longitude,
    lower right latitude, lower right longitude] to define the upper left and lower right corners of the rectangle.*/
  image.shapePoints=[39.844927, -105.110526, 39.734442, -104.833237];
 
  /*Add to the map's default shape collection*/
  map.addShape(image);

	
 });