MapQuest JS Tiled Map CSS Overloading/Overriding

Friday, March 13th, 2009 | Technology, Web Design

For the past week I’ve been working on implementing my own CSS styles with the MapQuest JS platform.  I was unable to find any resources on the technique required to successfully replace the default CSS, so I’ve created my own and would like to share it with the community!

First thing to explain is when the JS tiled maps are rendered, the CSS styles are inline with the element definition.  For example:

<div class=”map-zoom-in” style=”width: 100px background: url(…”> </div>

In order to over load these inline styles with externally defined CSS, the “!important” attribute is needed.  For example:

.map-zoom-in
{
width: 200px !important;
}

The second useful gem I’ve created is an ordered list of elements and classes that can be overloaded.  The full list can be found at [url=http://www.madclouds.com]MadClouds[url].

Zoom control:

div id=mapDiv

div

div class=map-controls-bg screen

div  background: http://img.mqcdn.com/mqtoolkit/zoom-bg-tilemap.png

ul class=map-controls screen

li class=map-zoom

div class=io map-zoom-in

img src=http://img.mqcdn.com/mqtoolkit/z-out.png

div class=io map-zoom-out

img src=http://img.mqcdn.com/mqtoolkit/z-in.png

Pan control:

div id=mapDiv

div

div class=map-controls-bg screen

div  background: http://img.mqcdn.com/mqtoolkit/map-controls-box-bg.png

ul class=map-controls screen

li class=map-box-wrapper

div class=map-compass

img src=

img class=map-compass-links src=http://img.mqcdn.com/a/a usemap=#mq-pancontrol-linkmap

map id=#mq-pancontrol-linkmap

<area shape=”poly” coords=”14,21,16,16,21,14,25,16,27,21,25,25,21,27,16,25,14,21,14,21″ href=”#center”/>

<area shape=”rect” coords=”11,1,29,12″ href=”#north” title=”Pan North” alt=”Pan North”/>

<area shape=”rect” coords=”27,13,40,28″ href=”#east” title=”Pan East” alt=”Pan East”/>

<area shape=”rect” coords=”1,13,14,28″ href=”#west” title=”Pan West” alt=”Pan West”/>

<area shape=”rect” coords=”11,29,29,40″ href=”#south” title=”Pan South” alt=”Pan South”/>

Map type control:

div id=mapDiv

div

ul class=map-view screen

li class=map-view-street

img class=[a]ctive, [o]ver or “” src=http://img.mqcdn.com/mqtoolkit/icon-btn-street-view.png

li class=map-view-aerial

img class=[a]ctive, [o]ver or “” src=http://img.mqcdn.com/mqtoolkit/icon-btn-aerial-view.png

li class=map-view-hybrid

img class=[a]ctive, [o]ver or “” src=http://img.mqcdn.com/mqtoolkit/icon-btn-hybrid-view.png

Hover popup:

div id=mapDiv

div id=map.div1

div id=mqtiledmap

div id=mqpoidiv

div id=poi.shape.div

div id=minipopup class=mqminipopup background: http://img.mqcdn.com/mqtoolkit/rollover-left.png

div class=mqminipopuphead

div

Content popup:

div id=mapDiv

div id=map.div1

div id=mqtiledmap

div id=mqpoidiv

div id=poi.shape.div

img -(developer defined icon)

img src=http://img.mqcdn.com/mqtoolkit/shadow.png -(poi shadow)

div id=poi.label.div

div id=popupcontainer class=mqpoipopup

div id=poiclose class=mqpoiclose

div background: http://img.mqcdn.com/mqtoolkit/infopopup.png

div id=popup-topleft

div background: http://img.mqcdn.com/mqtoolkit/infopopup.png

div id=popup-topright

div background: http://img.mqcdn.com/mqtoolkit/infopopup.png

div id=popup-bottomleft

div background: http://img.mqcdn.com/mqtoolkit/infopopup.png

div id=popup-bottomright

div background: http://img.mqcdn.com/mqtoolkit/infopopup.png

div id=popup-pointer

div background: http://img.mqcdn.com/mqtoolkit/infopopup.png

div id=popup-fillercontainer

div id=popup-content

div class=mqpoiheading

div

div class=mqpoicontenttext

div

As an example, if we wanted to overload the default Zoom-In button we could use this style:

div .map-zoom-in img

{

display: none !important;

}

div .map-zoom-in

{

background: transparent url((<url to img>) no-repeat scroll 0% 0% !important;

}

Or if we wanted to change the background of the zoom buttons:

div .map-controls-bg[style] div

{

background: transparent url(<url to img>) no-repeat scroll 0% 0% !important;

}

Please leave a message if this resource has helped you!

Tags: , ,

What do you think?

Leave a comment

Categories