Customizing the User Interface

Allowing the user to customize the look and feel of their mapping application has always been a popular request. The documentation below shows how easy it is to customize the following elements:


Changing Colors

If all you need is a set of MapQuest controls in varying colors, you're in luck! This method simply involves downloading the zoom and toggle controls and the inset map control, changing the colors with an image editor and overriding a few CSS classes as seen below.

  /*Replace colors in the image name to red, green or yellow to view other options. 
  CSS classes associated for each: 
    -Zoom Control: .panControl, .sliderWrapper, .slider, .zoomin, .zoomout 
    -View/Traffic Control: .maptoggle, .maptoggle span 
    -Inset Map Control: .min, .min:hover, .max, .max:hover */ 

  .panControl, .sliderWrapper, .slider, .zoomin, .zoomout, .maptoggle, .maptoggle span {
    background-image:url("http://developer.mapquest.com/content/documentation/common/images/sprite_map_controls_blue.png") !important;
  }

  .min, .min:hover, .max, .max:hover {
    background-image:url("http://developer.mapquest.com/content/documentation/common/images/min_max_blue.png") !important;
  }

 

Several color themed controllers have also been pre-made and are available for download: blue, red, green, yellow.

 

 

 

 

Custom Controls

While everyone's custom controls will come in varying sizes and shapes, the JavaScript SDK allows for anyone to implement their own control onto their mapping application. The following example shows a horizontal control including the full spectrum of our available zoom levels (2-18). The files needed to re-create the sample can be downloaded here.

Your custom control placement and size will more than likely be different than the one shown below. Please make sure to change the code as needed.

  var map;
  var myControl;
  var myZoomOut;
  var myZoomIn;
  var myZoomBar = new Array();
	
  /*An example of using the MQA.EventUtil to hook into the window load event and execute defined function 
  passed in as the last parameter. You could alternatively create a plain function here and have it 
  executed whenever you like (e.g. <body onload="yourfunction">).*/ 

  MQA.EventUtil.observe(window, 'load', function() {

    /*Create an object for options*/ 
    var options={
      elt:document.getElementById('map'),       /*ID of element on the page where you want the map added*/ 
      zoom:10,                                  /*initial zoom level of the map*/ 
      latLng:{lat:39.743943, lng:-105.020089},  /*center of map in latitude/longitude */ 
      mtype:'map'                               /*map type (map)*/ 
    };

    /*Construct an instance of MQA.TileMap with the options object*/ 
    window.map = new MQA.TileMap(options);

    createCustomControl();

    function createCustomControl() {
      /*Create new zoom control holder. This should include the image of your zoom control 
      without any of the zoom buttons.*/ 
      myControl = document.createElement("div");
      myControl.id = "control";
      myControl.style.position = "absolute";
      myControl.style.zIndex = "50";
      myControl.style.width = "251px";
      myControl.style.height = "44px";
      myControl.style.top = "5px";
      myControl.style.left = "5px";
      myControl.style.backgroundImage = "url(http://developer.mapquest.com/content/documentation/common/images/solo_zoom_back.png)";
      document.getElementById('map').appendChild(myControl);

      /*Create new 'Zoom Out' button. Set width/height and top/left for button.*/ 
      myZoomOut = document.createElement("div");
      myZoomOut = document.createElement("img");
      myZoomOut.style.position = "absolute";
      myZoomOut.style.zIndex = "50";
      myZoomOut.style.width = "26px";
      myZoomOut.style.height = "44px";
      myZoomOut.style.top = "5px";
      myZoomOut.style.left = "14px";
      myZoomOut.alt = "Zoom Out";
      myZoomOut.title = "Zoom Out";
      myZoomOut.src = "http://developer.mapquest.com/content/documentation/common/images/solo_zoom_off_out.png";
      document.getElementById('map').appendChild(myZoomOut);

      /*Set and highlight zoom levels for the 'Zoom Out' button.*/ 
      myZoomOut.onclick = function() {
        map.setZoomLevel(map.getZoomLevel()-1);
        highlight();
      }
      myZoomOut.onmouseover = function() { this.src = "http://developer.mapquest.com/content/documentation/common/images/solo_zoom_on_out.png"; }
      myZoomOut.onmouseout = function() { this.src = "http://developer.mapquest.com/content/documentation/common/images/solo_zoom_off_out.png"; }

      /*Create new 'Zoom In' button. Set width/height and top/left for button.*/ 
      myZoomIn = document.createElement("div");
      myZoomIn = document.createElement("img");
      myZoomIn.style.position = "absolute";
      myZoomIn.style.zIndex = "50";
      myZoomIn.style.width = "26px";
      myZoomIn.style.height = "44px";
      myZoomIn.style.top = "5px";
      myZoomIn.style.left = "223px";
      myZoomIn.alt = "Zoom In";
      myZoomIn.title = "Zoom In";
      myZoomIn.src = "http://developer.mapquest.com/content/documentation/common/images/solo_zoom_off_in.png";
      document.getElementById('map').appendChild(myZoomIn);

      /*Set and highlight zoom levels for the 'Zoom In' button.*/ 
      myZoomIn.onclick = function() {
        map.setZoomLevel(map.getZoomLevel()+1);
        highlight();
      }
      myZoomIn.onmouseover = function() { this.src = "http://developer.mapquest.com/content/documentation/common/images/solo_zoom_on_in.png"; }
      myZoomIn.onmouseout = function() { this.src = "http://developer.mapquest.com/content/documentation/common/images/solo_zoom_off_in.png"; }

      /*Create Zoom Bar buttons for all zoom levels (17 total)*/ 
      for (i=0;i<17;i++) {
        myZoomBar[i] = document.createElement("div");
        myZoomBar[i] = document.createElement("img");
        myZoomBar[i].style.position = "absolute";
        myZoomBar[i].style.zIndex = "100";
        myZoomBar[i].style.width = "10px";
        myZoomBar[i].style.height = "44px";
        myZoomBar[i].style.top = "5px";
				
        /*Add images for zoom level options at 48px in, then at every 10px. Available zoom 
        levels are between 2-18.*/ 
        var newSlideLeft = 48 + (10*i);
        myZoomBar[i].style.left = newSlideLeft + 'px';
        myZoomBar[i].alt = "Zoom Level " + (i+2);
        myZoomBar[i].title = "Zoom Level " + (i+2);
        myZoomBar[i].src = "http://developer.mapquest.com/content/documentation/common/images/zoombar_off.png";
				
        /*Set and highlight zoom levels for the Zoom Bar. We set the map zoom level 2 above 
        the array index since zoom levels do not begin at 0.*/ 
        myZoomBar[i].onmouseover = function() { this.src = "http://developer.mapquest.com/content/documentation/common/images/zoombar_on.png"; }
        myZoomBar[i].onmouseout = function() {
          this.src = "http://developer.mapquest.com/content/documentation/common/images/zoombar_off.png";
          highlight();
        }
        myZoomBar[i].onclick = function() {
          var myZoomBarClick = myZoomBar.indexOf(this);
          map.setZoomLevel(myZoomBarClick + 2);
          highlight();
        }

        document.getElementById('map').appendChild(myZoomBar[i]);
      }

      /*Highlight current zoom level*/ 
      var currentZoom = map.getZoomLevel() - 2;
      myZoomBar[currentZoom].src = "http://developer.mapquest.com/content/documentation/common/images/zoombar_on.png";
		
      function highlight() {
        var currentZoom = map.getZoomLevel() - 2;
        for (i=0;i<17;i++) {
          if (i==currentZoom) {
            myZoomBar[i].src = "http://developer.mapquest.com/content/documentation/common/images/zoombar_on.png";
          } else {
            myZoomBar[i].src = "http://developer.mapquest.com/content/documentation/common/images/zoombar_off.png";
          }
        }
      }
    }
  });

 

 

 

 

Custom POI InfoWindows

InfoWindows can also be easily customized by downloading the default InfoWindow and re-stylizing its elements. For example, the corners can be squared and the 'Close' button can be replaced with an image editor. Placement of the 'Close' button and other elements can all be customized by overriding the CSS classes.

The following shows the small amount of CSS that need to be changed in order to implement the new custom InfoWindow.

  /*Override all CSS classes that reference the default InfoWindow PNG file and replace with your own custom InfoWindow.*/ 
  .mqabasicwnd-corner div, .mqabasicwnd-close, .mqabasicwnd-close:hover, .mqabasicwnd-pointer-bottom, .mqabasicwnd-pointer-top, .mqabasicwnd-pointer-left, .mqabasicwnd-pointer-middleLeft, .mqabasicwnd-pointer-middleRight, .mqabasicwnd-pointer-topLeft, .mqabasicwnd-pointer-topRight, .mqabasicwnd-pointer-bottomLeft, .mqabasicwnd-pointer-bottomRight, .mqabasicwnd-btop div, .mqabasicwnd-bbottom div, .mqabasicwnd-bleft div, .mqabasicwnd-bright div {
    background-image:url("http://developer.mapquest.com/content/documentation/common/images/sprite_info_window_blue.png") !important;
  }

  /*Set the width of the custom InfoWindow and the font for its contents.*/ 
  .mqabasicwnd {
    font:14px arial, helvetica, sans-serif;
    width:300px !important;
  }
	
  /*Use CSS to place the custom 'Close' button at its desired location. Also make sure to change the width and height of the 'Close' button if it's been changed from its default size.*/ 
  .mqabasicwnd-close {
    top:0px !important;
    right:-18px !important;
    width:18px !important;
    height:20px !important;
  }

 

Hover over and click on the POI to see the new InfoWindow in action. Feel free to also download the custom InfoWindow and use it in your own application.