[blog.schreiter.info]

Platial has a very cool feature called MapKit. With this you can add a map directly to your site or blog. However, the options for customization are still very limited. This is what it looks like originally.

Apart from the “advanced options” which are “coming soon”, there is a little hacky but simple way of customizing your mapkit in order to match your needs. Let me just recommend the great tool Firebug which is in fact a plugin for Mozilla Firefox. It was a big help in investigating the dynamic HTML structure constructed by the Platial JavaScript code.Essentially, this is the HTML code generated by the script “http://platial.com/mapkit/load?…”:

<div id=”platial_mapKit” style=”border: 2px solid rgb(81, 125, 218); padding: 0pt; overflow: hidden; text-align: left; width: 160px; min-width: 160px; background-color: rgb(238, 238, 238); color: rgb(0, 0, 0);”>

<div id=”platial_mapContainer” style=”margin: 0pt; padding: 0pt; position: relative; background-color: lightgrey;”>

<div id=”platial_widgetHeader” style=”border-bottom: 1px solid rgb(107, 148, 231); padding: 7px 0px 5px 10px; background-image: url(http://platial.com/images/top-gradient-blue.png); background-repeat: repeat-x; background-position: left center; font-family: arial,sans-serif; color: rgb(0, 0, 0);”>

<div id=”platial_maptitle” style=”text-align: left; margin-right: 2px;”>
…
</div>

</div>

<div id=”platial_mapimage” class=”platial_mapimage” style=”margin: 0pt; padding: 0pt; height: 200px; font-size: 7pt; font-family: arial,sans-serif; color: rgb(0, 0, 0); position: relative; background-color: rgb(229, 227, 223);”>
…
</div>

<div id=”platial_links” style=”border: 1px solid rgb(102, 102, 102); padding: 3px 0pt; background-image: url(http://platial.com/images/silversliver.png); background-repeat: repeat-x; background-position: left bottom; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); vertical-align: middle; position: relative;”>
…
</div>

<div id=”platial_itemDetail” style=”padding: 0pt 2px; z-index: 999; background-color: rgb(238, 238, 238); margin-right: 10px;”/>

</div>

As you can see, there is a set of divs having IDs. These IDs can be used in order to customize the appearance of the MapKit. Please note, that all style attributes are set directly in the tags (which is necessary when using dynamic code w/o further stylesheets). In the following, we will override these style attributes using CSS’ !important rules. This is a mechanism to override style attributes with a lower priority such as the ones locally defined in the MapKit.

Example #1: Removing the header line

In my case I wanted to get rid of the light blue header line including the map’s title “World Tour ‘07″. So what to do?

As explained above, we can do this using CSS. This is the code:

#platial_widgetHeader {
display: none !important;
}

Example #2: Removing the blue border and changing the width

Almost as simple as this is to change the default width of 160px for the sidebar version of the MapKit. It broke my sidebar since it has to be 150px at largest for this theme.

And of course, we would like to get rid of the annoying blue 2-pixel-wide border. Just include the following CSS statements into your stylesheet.

#platial_mapKit {
width: 150px !important;
min-width: 150px !important;
border: none !important;
}

You can see the result of the two examples in the sidebar of the main page.

Hint: Customizing multiple MapKits on one page

If you have multiple MapKits on a single page, then you might put a div with a unique ID around each of them and then format your CSS like this:

#mymapkit1 #platial_mapKit {
width: 300px !important;
min-width: 300px !important;
}

and

#mymapkit2 #platial_mapKit {
width: 150px !important;
min-width: 150px !important;
}