Varying icon by color and number

2,721 views
Skip to first unread message

mikemcc

unread,
Dec 30, 2010, 9:44:12 AM12/30/10
to KML Developer Support - Advanced Support for KML
Is there a clever way to vary the KML for an icon by color AND
number ?

I want the placemark to have:
- icon color determined by the value of the category 1 column in a
table
- icon number determined by the value of the category 2 column in the
table

So, for example, a paddle icon could be:
- yellow with the number 1
- yellow with the number 7
- lime with the number 1
- lime with the number 7

Icon <href> is a feature of <Icon> but <color> is a feature of
<IconStyle>
so I imagine that I need to have an icon style for each combination of
category 1 and category 2 values. This is possible but long-winded, so
I hope that I'm wrong and that someone can advise how to code it more
cleverly. Thanks.

Nymor

unread,
Dec 30, 2010, 12:06:08 PM12/30/10
to KML Developer Support - Advanced Support for KML
Having a separate style for each is probably, whilst time consuming, a
more straightforward way of handling your needs. There are things you
can do to make it less long winded although it would add some
complexity and have some limitations in use of colours.

Have a play with these icons in Google Earth
http://www.thekmz.co.uk/images/misc/ico_square.png
http://www.thekmz.co.uk/images/misc/ico_square2.png
(save them away somewhere)

These are 2 simple 64x64 square icons - both have the top-left
quadrant transparent and then each has the other quadrants coloured in
some way - black, white & red or green, blue and red. If you create a
placemark in GE and use these icons for the placemark and then look to
see the result as you change the placemark colour (in edit
properties). The colour specified within the placemark is added to
that of the icon image.

So you could create an icon for each of your numbers - and associated
style and then for each colour specify that at the placemark level.

The limitation would be that the base image would have to structured
in such a way that the area you want to override has to be white ...
so when the colour is added from the placemark colour tag you get that
colour.

I spent a day earlier this week doing exactly what you are ...
creating placemark icons along a number/colour combination route. In
my case Mile/Km distance markers on 4 different colour bases. While
you can try and get fancy with something like I suggest above I chose
to create all the icons separately and go from there.

(My stuff is using the GE plugin (rather that pure KML) so there's a
bit more flexibility in that enviroment for easily creating what's
needed. Same would apply if you are generating your KML via code
somehow - I do that from database apps for example.)

As an aside - and this would only apply to the API - it was this issue
of 100's of icons that prompted me to make this feature request
http://code.google.com/p/earth-api-samples/issues/detail?id=493

... it's common, and good, practice to use Sprite Sheets and CSS to
select image icons and this technique is also available in Maps when
setting a Marker's styling. It would be great to have this available
in the API as 1 x Image <<<<<<< 100's x Image when looking at network
round trips etc.

Either way individual icons and styles is the way to go imho.

Regards
Nymor

mikemcc

unread,
Dec 31, 2010, 5:08:33 AM12/31/10
to KML Developer Support - Advanced Support for KML
Thanks again Nymor. As usual, you are several steps ahead of me and as
usual I'm fitting this development work around the day job, so I'll
take time to think that through and respond.

It seems to be a fundamental principle of map-based design that one
should be able to display (up to) three types of information about a
place which can be absorbed by the user at a glance, by changing the:
- icon's external shape (eg a paddle, a train or an aeroplane)
- icon's color
- the letter, number or internal shape (eg the square, circle, star or
diamond on the Google paddle)

So the sets of icons provided and the KML spec should help us do that
as efficiently as possible.
Happy NY.

mikemcc

unread,
Jan 11, 2011, 6:02:12 AM1/11/11
to KML Developer Support - Advanced Support for KML
Thanks to a post by Chris Broadfoot, I came across the Freestanding
Image Icons served by the Google Charts API. They work fine in Google
Earth and are easy to implement (even for me).

Their significance (for me) are that (eg with MySQL and PHP) you can
economically display icons with different shape, color, text and
starrred/with slanting tail, according to the different
characteristics of a place.

See:
http://code.google.com/apis/chart/docs/gallery/dynamic_icons.html#freestanding_icons

This may be rubbish PHP code, but in case it helps someone ...

This is all I put in the placemark's style tag:

$kml[] = '<Style id="poiplace">';
$kml[] = '<IconStyle>';
$kml[] = '<scale>'.$icon_scale.'</scale>';
$kml[] = '</IconStyle>';
$kml[] = '<LabelStyle>';
$kml[] = '<color>'.$label_color.'</color>';
$kml[] = '<scale>'.$label_scale.'</scale>';
$kml[] = '</LabelStyle>';
$kml[] = '</Style>';

and this is the PHP code for the placemark tags:
$kml[] = '<Placemark id="poiplace'.$id.'">';
$kml[] = '<name>'.$name.'</name>';
$kml[] = '<styleUrl>#poiplace</styleUrl>';
$kml[] = '<Style><Icon>';
$kml[] = '<href>https://chart.googleapis.com/chart?
chst=d_map_pin_icon&amp;chld='.$icon_string.'|'.$fill_color.'</href>';
$kml[] = '</Icon></Style>';
$kml[] = '<Point><coordinates>'.$lng.','.$lat.'</coordinates></
Point>';
$kml[] = '</Placemark>';

So the "default" style just controls the icon size, while the <href>
in the placemark style controls the icon type (eg a pin), the icon (eg
a house) and the color. If you choose a balloon icon type, it can hold
the name text too.

The choice of icons isn't fantastic (even when using the free ones
from glyphish.com). There's nothing wrong with them but they are
probably designed for charts, not for geographical applications, so
you sometimes have to be imaginative in your choice of icon for a
category of place.

Thanks again for your help, Nymor.
Reply all
Reply to author
Forward
0 new messages