MadClouds

MapQuest CSS Overriding

Friday, March 6th, 2009 | Technology

Over the past 6 months I’ve been working with MapQuest’s 5.3 JavaScript API to create interactive maps that our members can use to locate a 24 Hour Fitness club.  Well, I’ve expressed personal interest to modify the look and feel of the default MapQuest TileMap CSS to incorporate our company look and feel.  I’ve been granted the time resources to pursue some possible CSS modifications.  The requirement was simple:

Customization of popup windows
1. Pop-up windows in the club results map should adjust so that the entire club name appears in the bubble.
2.  Include the “driving directions” link below the phone number.
3.  Include “group exercise class schedule” link below the driving directions link (this link should open to a new window).

I scoured the Internet looking for tutorials or references on how to go about overloading the default MapQuest CSS.  I couldn’t believe it, not one article on how to do it.  Not even the smallest blog post on the secret to provide your own CSS style to MapQuest tile maps.  Well…  Behold that secret:

#identification{

attribute:value !important;

}

In the beginning I was having a hard time getting the result I was looking for.  I could overload a few attributes, but only the ones that were not predefined.  Through the FireFox plug in Firebug I noticed that all the <div> elements that made up the different pieces I was trying to manipulate had inline styles.  For example:

<div id=popupcontent style=”width: 200px; height: 100px; left 100px;”></div>

Inline styles have the highest precedence.  There is a great article here and here explaining how CSS precedence works.  (Advance CSS techniques gives me goose bumps… but that’s beside the point).  This means that when I put an external CSS definition, it was always getting overridden by the inline style.  The big secret is adding the !important which uses our external CSS for styling.  Added to the proper identification elements, I was able to manipulate the MapQuest TileMap CSS.

/*  Adds 100px to the popup box */

#popup-topleft
{
width: 253px !important;
}
#popup-bottomleft
{
width: 253px !important;
}
#popup-bottomright
{
left: 253px !important;
}
#popup-topright
{
left: 253px !important;
}
#poiclose
{
left: 235px !important;
}
#popup-content
{
width: 238px !important;
}

Before:

After:

Tags: css, Job, webdesign

What do you think?

Leave a comment