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.


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.






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.


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.