Controls

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

 

Large Zoom Control

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

  });
 

 

 

 

Small Zoom Control

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

  });
 

 

 

 

View Control

NOTE: The View Control can only be placed on the top right corner of the map.

  MQA.withModule('viewoptions', function() {
	
    map.addControl(
      new MQA.ViewOptions()
    );

  });
 

 

 

 

Traffic Control

NOTE: The Traffic Control can only be placed on the top right corner of the map.

  MQA.withModule('traffictoggle', function() {
	
    map.addControl(
      new MQA.TrafficToggle()
    );

  });
 

 

 

 

Inset Map Control

NOTE: The Inset Map Control currently only supports being placed on the bottom right corner of the map.

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 inset map, default is minimized=false.*/ 
    var options={
      size:{ width:150, height:125},
      zoom:3,
      mapType:'hyb',
      minimized:false };

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

  });
 

 

 

 

Geolocation Control

The code below will produce a map with the GeolocationControl, which allows the user to easily center the map to their current location. This location can be based on IP address information, WiFi connection, cell information or GPS. It is completely opt-in for the user, who gets to choose whether to share their location. The MapQuest GeolocationControl is built on top of support for the W3C Geolocation Specification implemented in many of the latest browsers. Geolocation is often associated with HTML 5, although it is not technically part of HTML 5.

  MQA.withModule('geolocationcontrol', function() {
	
    map.addControl(
      new MQA.GeolocationControl()
    );

  });
 

 

 

 

Geolocation Control using jQuery and Reverse Geocoding Service

  MQA.withModule('geolocationcontrol', function() {
    var gcontrol = new MQA.GeolocationControl();

    /*Override the onLocate callback of the GeolocationControl so we can do some custom functionality 
    when the browser successfully determines the current position. The callback takes 2 arguments: 
      1. The MQA.Poi object represents the current position on the map (the purple waving man). 
      2. A position object, as defined here: http://dev.w3.org/geo/api/spec-source.html#position_interface*/ 

    gcontrol.onLocate = function(poi, position) {
      var coords = position.coords;

      $.ajax({
        url: 'http://www.mapquestapi.com/geocoding/v1/reverse',
        dataType: 'jsonp',
        crossDomain: true,
        data: {
          key: decodeURIComponent(key),
          lat: coords.latitude,
          lng: coords.longitude
        },
        success: function(data, textStatus, jqXHR) {
          var place = data.results[0].locations[0];
          poi.setInfoContentHTML(place.street + "<br />" + place.adminArea5 + ", " + place.adminArea3);
          poi.toggleInfoWindow();
        }
      });
    };

    map.addControl(gcontrol);
  });
 

 

 

 

You can also download multiple modules at the same time, allowing you to easily add several map controls. See the Adding Basic Controls sample to learn how to add a standard set of controls.