Controls

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


Zoom Control

Adds the new large zoom controller that matches the freshly revamped MapQuest branding and design.

 
MQA.withModule('largezoom', function() {
	
  map.addControl(
    new MQA.LargeZoom(), 
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
  );

});

Show me the code

Play with the code


Inset Map Control

An MQA.InsetMapControl can provide users with a better idea of location by displaying the current view in context of a larger geographical area. You can customize the look and feel of the map using CSS for coloring and/or passing the optional configuration into the constructor of the control to provide size, zoom differential and mapType.

 
/*This uses the MQA.withModule support to download and initialize the MQA.InsetMapControl support module.  
When the modules are ready for use, the function provided as the last parameter will be executed.*/

MQA.withModule('insetmapcontrol', function() {
	
  /*Create an object for options (this example does the following:) 
      -Set the size of the control, default is 150px in width and 125px in height.
      -Set the zoom differential, default is 3 zoom levels.  This can also be a negative value if you would like.
      -Set the mapType of the control, default is 'map'.
      -Set the starting view of the overview map, default is minimized=false.*/
  var options={ 
    size: {width:150,height:125},
    mapType: 'map',
    zoom:3,
    minimized:false,
    retainAspectRatio:false,
    maxZoom: 11,
    slideWhenClicked:false
  };

  /*Instantiate the MQA.OverviewMapControl control with the options object and add the control to the map 
    by placing it on the bottom left corner of the map.*/
  map.addControl(
    new MQA.InsetMapControl(options), 
	  new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT)
	);

});

Show me the code

Play with the code


Carousel Control

An MQA.CarouselControl can use used for quickly navigating sets of data on a map.

 
MQA.withModule('carouselcontrol','shapes','georssdeserializer','remotecollection', function() {
	
  /*utility function for creating pois*/
	createPOI=function(title,description,lat,lng){
    var poi = new MQA.Poi({lat:lat,lng:lng});
    poi.setDeclutter(true);		
    poi.setInfoTitleHTML(title);
    poi.setInfoContentHTML(description);
    return poi;
	};
	
	/*callback function to know when an item has been enabled, 
	  see below where this is hooked up*/
	bestFitter=function(){
    map.bestFit();
	};

	/*build ski area collection*/
	var skiAreas=new MQA.ShapeCollection();
	skiAreas.collectionName='skiAreas';
	skiAreas.add(createPOI('Arapahoe Basin','Arapahoe Basin',39.645649,-105.868097));
	skiAreas.add(createPOI('Aspen Highlands','Aspen Highlands',39.182379,-106.855147));
	skiAreas.add(createPOI('Aspen Mountain','Aspen Mountain',39.186728,-106.818662));
	skiAreas.add(createPOI('Beaver Creek','Beaver Creek', 39.633001,-106.533066));
	skiAreas.add(createPOI('Breckenridge Ski Resort','Breckenridge Ski Resort',39.481041,-106.066625));
	skiAreas.add(createPOI('Buttermilk','Buttermilk', 39.206842,-106.859238));
	skiAreas.add(createPOI('Copper Mountain','Copper Mountain', 39.500904,-106.155698));
	skiAreas.add(createPOI('Crested Butte','Crested Butte',38.899736,-106.96536));
	skiAreas.add(createPOI('Eldora','Eldora',39.93723,-105.583154));
	skiAreas.add(createPOI('Howlsen Hill','Howlsen Hill',39.93723,-105.583154));
	skiAreas.add(createPOI('Keystone','Keystone', 39.607845,-105.943734));
	skiAreas.add(createPOI('Loveland','Loveland', 39.679919,-105.896495));
	skiAreas.add(createPOI('Monarch','Monarch', 38.512511,-106.331453));
	skiAreas.add(createPOI('Powderhorn','Powderhorn', 39.070053,-108.150006));
	skiAreas.add(createPOI('Silverton','Silverton', 37.630152,-107.814308));
	skiAreas.add(createPOI('Snomass','Snomass', 39.208389,-106.946967));
	skiAreas.add(createPOI('Sol Vista','Sol Vista', 40.046834,-105.899203));
	skiAreas.add(createPOI('Steamboat','Steamboat',40.45821,-106.805481));
	skiAreas.add(createPOI('Sunlight','Sunlight',39.401307,-107.340873));
	skiAreas.add(createPOI('Telluride','Telluride',37.937418,-107.822504));
	skiAreas.add(createPOI('Vail','Vail',39.638278,-106.383444));
	skiAreas.add(createPOI('Winter Park','Winter Park',39.886998,-105.763478));
	skiAreas.add(createPOI('Wolf Creek','Wolf Creek',37.474145,-106.792844));

  /*builds the shape collection*/
	var shapes=new MQA.ShapeCollection();
	shapes.collectionName='shapes';
	shapes.bestFit=false;
	
	/*add a line*/
	var line = new MQA.LineOverlay();	
	line.fillColor='#32D655';	
	line.setShapePoints([37.708817, -102.965622, 38.712905, -103.90781]);
	shapes.add(line);
	
	/*add a rectangle*/
	var rectangle = new MQA.RectangleOverlay();		
	rectangle.setShapePoints([39.847136, -105.362437, 39.641389, -104.682833]);
	rectangle.color='#B00303';
	rectangle.colorAlpha=.3;
	rectangle.borderWidth=4;
	rectangle.fillColor='#EFFF79';
	rectangle.fillColorAlpha=.2;
	shapes.add(rectangle);
	
	/*add a polygon*/
  var poly = new MQA.PolygonOverlay();		
	poly.setShapePoints([37.084051, -106.171873, 37.686504, -106.537498, 
	  38.283379, -105.98906,37.482463,-105.396622,37.017607,-105.480756]);
	poly.color='#000000';
	poly.colorAlpha=.3;
	poly.borderWidth=3;
	poly.fillColor='#075053';
	poly.fillColorAlpha=.4;			
	shapes.add(poly);

  /*remote collection for pictures*/
  var photos = new MQA.RemoteCollection('./data/pictures.rss',new MQA.GeoRSSDeserializer());
  photos.collectionName='photos';

  /*remote collection for a hurricane*/
  var hurricane=new MQA.RemoteCollection('./data/hurricaneivan.xml',new MQA.GeoRSSDeserializer());
  hurricane.collectionName='georss';

  /*actual carousel items*/
  var carouselItems = [
    {id: 'Shapes', title: 'Shapes', img: {url:'./images/shapes.png'}, 
      icon: {url: './images/shapes.png'},shapeCollection:shapes},
      
    {id: 'Ski Areas',  title: 'Ski Areas',  img: {url: './images/skiareas.png'}, 
      icon:{url:'./images/skiareas.png'}, shapeCollection:skiAreas},
      
    {id: 'Remote Photos', title: 'Remote Photos', 
      img: {url:'http://farm4.static.flickr.com/3078/buddyicons/33309265@N02.jpg?1229295070#33309265@N02'}, 
      icon: {url:'http://farm4.static.flickr.com/3078/buddyicons/33309265@N02.jpg?1229295070#33309265@N02'},
       shapeCollection:photos},
       
    {id: 'Hurricane', title: 'Hurricane',  img: {url:'./images/hurricane.png'}, 
      icon: {url:'./images/hurricane.png'},shapeCollection:hurricane}
  ];

  /*build, initilize and add the control to the map*/
	var searchControl = new MQA.CarouselControl(carouselItems);				
	map.addControl(searchControl, new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT));   
	MQA.EventManager.addListener(searchControl,'itemEnabled',bestFitter);     
	MQA.EventManager.addListener(searchControl,'itemDisabled',bestFitter);     
  
});

Show me the code

Play with the code



Next Section: Panning



  © MapQuest, Inc. All rights reserved.    Privacy Policy | Terms of Use