How to customize your Platial MapKit using CSS’ !important rules

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;
}

7 thoughts on “How to customize your Platial MapKit using CSS’ !important rules

  1. jason

    good discovery, and great clear examples. beefing up the backend and feature set is our current focus for mapkit, but a UI for customization is also in the wings, we know it’s what people want.

  2. Torben Post author

    Thanks. I’d love to see a more neat styling of the “BigMap” as well. While loading, it suddenly disappears for a couple of seconds. The background is only greyed out on the upper half of the page.

    Ever thought of using the ThickBox (http://jquery.com/demo/thickbox/)?

    Torben

  3. Aarron

    Great article. But today my sidebar mapkit looks really ugly, it looks like the css has been removed. Kind of like yours on your site.

    Any ideas?

  4. Torben Post author

    Hi Aarron,

    indeed, I noticed this as well. 🙁

    The tricks from the original post don’t work anymore. I had a short look at the new HTML structure being generated. I guess, it is still possible to achieve the same effect again.
    However, I will put some effort in this, once the guys at Platial get their things right. Actually, the whole Mapkit looks really, really ugly right now. Hopefully, they will tweak it a little in the next days.

    After this happened I will look into this again. Just check back in a couple of weeks…

  5. Torben Post author

    Thanks Platial! 🙁

    Ok, it seems the guys over at Platial don’t like customizing. They recently put an iframe around their mapkit contents. This prevents anyone (like us) from defining more specific style sheets for the content.

    However, if they don’t like this customization and take such measures I honestly do not understand why they don’t put some more flexible options for configuration into the configuration menu.

    Actually, I’m quite a bit angry about this, since Jason (one of the guys at Platial) initially posted a comment on this. I guess this is negative side of blogging.

    To make it clear to you guys at Platial:
    My sidebar breaks in IE7 if it’s larger than 150px. You managed to lock my out and leave me with a more than ugly layout without any chance to fix it.That’s just great… :((

    Regards,
    Torben

  6. Tracy

    Hi guys. Platial here, with some explanation.

    We had a problem with MapKits on Blogging sites which use templates adopting the side bar css often with disastrous effect. This version made the tool look and work consistently for everyone.

    The iframe was not intended to prevent customization. I swear it! It was to solve another big series of problem we’d encountered with google maps apis. The iframe allows us to skip the onerous process of generating a google api key for each map.

    The reason we haven’t built more advanced customization options is that we’re a very, very small team and we just haven’t had the chance! We only have two full-time engineers and one part-time and since the launch of this new stuff we’ve been concentrating most on bug fixing.

    I would love to talk to you guys more about priorities in customization, for the advanced features of the future. Email me.

  7. Torben Post author

    Hi Tracy,

    I’ve already been in touch with Jason for a couple of weeks. He’s also put quite some effort in this already. I think we’ll manage…

    Currently, I’m a bit busy. But I’ll come back to this later on.

    Cheers,
    Torben

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.