Google Earth 5.0 and Balloon description
565 views
Skip to first unread message
phil....@sunandshadows.net
Apr 12, 2009, 11:00:01 AM4/12/09
to KML Developer Support - Getting Started with KML
In the KML Reference, I see that, in version 5.0:
"CSS is allowed. As with CSS in a regular web browser, CSS can be used
to style text, page elements, and to control the size and appearance
of the description balloon."
As a KML newbie, are they any examples available of version 5.0
Balloon Style with CSS ?
"CSS is allowed. As with CSS in a regular web browser, CSS can be used
to style text, page elements, and to control the size and appearance
of the description balloon."
As a KML newbie, are they any examples available of version 5.0
Balloon Style with CSS ?
Roman N
Apr 16, 2009, 8:50:14 PM4/16/09
to KML Developer Support - Getting Started with KML
Sure! Here's a very trivial sample:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<description><![CDATA[
<style>
h1 { color: red; letter-spacing: -2px; font-family: helvetica,
arial, sans-serif; }
</style>
<h1>Hello</h1>
<p style="font-family: Georgia; font-size: 14px; font-style:
italic;">Foo bar</p>
]]></description>
<Point>
<coordinates>-122,37</coordinates>
</Point>
</Placemark>
</kml>
- Roman
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<description><![CDATA[
<style>
h1 { color: red; letter-spacing: -2px; font-family: helvetica,
arial, sans-serif; }
</style>
<h1>Hello</h1>
<p style="font-family: Georgia; font-size: 14px; font-style:
italic;">Foo bar</p>
]]></description>
<Point>
<coordinates>-122,37</coordinates>
</Point>
</Placemark>
</kml>
- Roman
phil....@sunandshadows.net
Apr 19, 2009, 5:34:57 AM4/19/09
to KML Developer Support - Getting Started with KML
Thanks for your help.
I want to use a Balloon Style for several Placemark descriptions such
as:
<BalloonStyle>
<bgColor>7d00ffff</bgColor> <!-- default=ffffffff -->
<textColor>7da5605a</textColor> <!-- default=ff000000 -->
<text> <!-- eliminates the driving directions -->
<![CDATA[
$[name]
<p>
$[description]
]]>
</text>
</BalloonStyle>
. Can
On Apr 17, 1:50 am, Roman N wrote:
> Sure! Here's a very trivial sample:
>
> <?xml version="1.0" encoding="UTF-8"?>
> <kml xmlns="http://www.opengis.net/kml/2.2">
> <Placemark>
> <description><![CDATA[
> <style>
> h1 { color: red; letter-spacing: -2px; font-family: helvetica,
> arial, sans-serif; }
> </style>
> <h1>Hello</h1>
> <pstyle="font-family: Georgia; font-size: 14px; font-style:
I want to use a Balloon Style for several Placemark descriptions such
as:
<BalloonStyle>
<bgColor>7d00ffff</bgColor> <!-- default=ffffffff -->
<textColor>7da5605a</textColor> <!-- default=ff000000 -->
<text> <!-- eliminates the driving directions -->
<![CDATA[
$[name]
<p>
$[description]
]]>
</text>
</BalloonStyle>
. Can
On Apr 17, 1:50 am, Roman N wrote:
> Sure! Here's a very trivial sample:
>
> <?xml version="1.0" encoding="UTF-8"?>
> <kml xmlns="http://www.opengis.net/kml/2.2">
> <Placemark>
> <description><![CDATA[
> <style>
> h1 { color: red; letter-spacing: -2px; font-family: helvetica,
> arial, sans-serif; }
> </style>
> <h1>Hello</h1>
> italic;">Foo bar</p>
> ]]></description>
> <Point>
> <coordinates>-122,37</coordinates>
> </Point>
> </Placemark>
> </kml>
>
> - Roman
>
> On Apr 12, 8:00 am, "[email address]" wrote:
>
> > In the KML Reference, I see that, in version5.0:
>
> > "CSS is allowed. As with CSS in a regular web browser, CSS can be used
> > tostyletext, page elements, and to control the size and appearance
> ]]></description>
> <Point>
> <coordinates>-122,37</coordinates>
> </Point>
> </Placemark>
> </kml>
>
> - Roman
>
> On Apr 12, 8:00 am, "[email address]" wrote:
>
> > In the KML Reference, I see that, in version5.0:
>
> > "CSS is allowed. As with CSS in a regular web browser, CSS can be used
phil....@sunandshadows.net
Apr 19, 2009, 5:55:02 AM4/19/09
to KML Developer Support - Getting Started with KML
Thanks for your help .
I want to use a Balloon Style with several Placemark descriptions,
For example:
<BalloonStyle>
<bgColor>7d00ffff</bgColor> <!-- default=ffffffff -->
<textColor>7da5605a</textColor> <!-- default=ff000000 -->
<text> <!-- eliminates the driving directions -->
<![CDATA[
$[name]
<p>
$[description]
]]>
</text>
</BalloonStyle>
<Placemark>
<description><
...
<description><
...
</description>
<Point>
<coordinates>-123,38</coordinates>
</Point>
</Placemark>
...
...
Can I use CSS in my Balloon Style in the same way as your example ?
Again, a sample would be helpful .
Phil
On Apr 17, 1:50 am, Roman N wrote:
I want to use a Balloon Style with several Placemark descriptions,
For example:
<BalloonStyle>
<bgColor>7d00ffff</bgColor> <!-- default=ffffffff -->
<textColor>7da5605a</textColor> <!-- default=ff000000 -->
<text> <!-- eliminates the driving directions -->
<![CDATA[
$[name]
<p>
$[description]
]]>
</text>
</BalloonStyle>
<description><
...
</description>
<Point>
<coordinates>-122,37</coordinates>
</Point>
</Placemark>
<Placemark>
<Point>
<coordinates>-122,37</coordinates>
</Point>
</Placemark>
<description><
...
</description>
<Point>
<coordinates>-123,38</coordinates>
</Point>
</Placemark>
...
...
Can I use CSS in my Balloon Style in the same way as your example ?
Again, a sample would be helpful .
Phil
On Apr 17, 1:50 am, Roman N wrote:
> Sure! Here's a very trivial sample:
>
> <?xml version="1.0" encoding="UTF-8"?>
> <kml xmlns="http://www.opengis.net/kml/2.2">
> <Placemark>
> <description><![CDATA[
> <style>
> h1 { color: red; letter-spacing: -2px; font-family: helvetica,
> arial, sans-serif; }
> </style>
> <h1>Hello</h1>
> <pstyle="font-family: Georgia; font-size: 14px; font-style:
>
> <?xml version="1.0" encoding="UTF-8"?>
> <kml xmlns="http://www.opengis.net/kml/2.2">
> <Placemark>
> <description><![CDATA[
> <style>
> h1 { color: red; letter-spacing: -2px; font-family: helvetica,
> arial, sans-serif; }
> </style>
> <h1>Hello</h1>
> italic;">Foo bar</p>
> ]]></description>
> <Point>
> <coordinates>-122,37</coordinates>
> </Point>
> </Placemark>
> </kml>
>
> - Roman
>
> On Apr 12, 8:00 am, "[email address]" wrote:
>
> > In the KML Reference, I see that, in version5.0:
>
> > "CSS is allowed. As with CSS in a regular web browser, CSS can be used
> > tostyletext, page elements, and to control the size and appearance
> ]]></description>
> <Point>
> <coordinates>-122,37</coordinates>
> </Point>
> </Placemark>
> </kml>
>
> - Roman
>
> On Apr 12, 8:00 am, "[email address]" wrote:
>
> > In the KML Reference, I see that, in version5.0:
>
> > "CSS is allowed. As with CSS in a regular web browser, CSS can be used
Noisette
Apr 19, 2009, 7:14:06 PM4/19/09
to KML Developer Support - Getting Started with KML
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>Title</name>
<Style id="my_id">
<BalloonStyle>
<text><![CDATA[
<html><head>
<style type="text/css">
body {background-color: #ffff00}
p {color: #5a60a5}
p {font-family: verdana}
a:link {color: #B75B00}
</style>
</head>
<body>$[description]</body>
</html>
]]></text>
</BalloonStyle>
</Style>
<Placemark>
<name>Placemark 1</name>
<description><![CDATA[<p>Text of description. <a href="http://
www.google.com">Link</p></a>]]></description>
<styleUrl>#my_id</styleUrl>
<Point>
<coordinates>-122,37</coordinates>
</Point>
</Placemark>
</Document>
<coordinates>-122,37</coordinates>
</Point>
</Placemark>
</kml>
You'll notice though that the background colour doesn't go all the way
to the edges of the balloon the way it does if you use <bgColor>.
>
> - Show quoted text -
becca
Apr 22, 2009, 8:27:11 AM4/22/09
to KML Developer Support - Getting Started with KML
I would like to use a central css file for the ballontype. this works
fine when using the kml file in google earth but not when linking to
that kml file with the ge api.
Is there something I can do?
On 20 Apr., 01:14, Noisette wrote:
> <?xml version="1.0" encoding="UTF-8"?>
> <kml xmlns="http://earth.google.com/kml/2.2">
> <Document>
> <name>Title</name>
> <Style id="my_id">
> <BalloonStyle>
> <text><![CDATA[
> <html><head>
> <style type="text/css">
> body {background-color: #ffff00}
> p {color: #5a60a5}
> p {font-family: verdana}
> a:link {color: #B75B00}
> </style>
> </head>
> <body>$[description]</body>
> </html>
> ]]></text>
> </BalloonStyle>
> </Style>
> <Placemark>
> <name>Placemark 1</name>
> <description><![CDATA[<p>Text of description. <a href="http://www.google.com">Link</p></a>]]></description>
fine when using the kml file in google earth but not when linking to
that kml file with the ge api.
Is there something I can do?
On 20 Apr., 01:14, Noisette wrote:
> <?xml version="1.0" encoding="UTF-8"?>
> <kml xmlns="http://earth.google.com/kml/2.2">
> <Document>
> <name>Title</name>
> <Style id="my_id">
> <BalloonStyle>
> <text><![CDATA[
> <html><head>
> <style type="text/css">
> body {background-color: #ffff00}
> p {color: #5a60a5}
> p {font-family: verdana}
> a:link {color: #B75B00}
> </style>
> </head>
> <body>$[description]</body>
> </html>
> ]]></text>
> </BalloonStyle>
> </Style>
> <Placemark>
> <name>Placemark 1</name>
am2100
Apr 23, 2009, 8:56:44 AM4/23/09
to KML Developer Support - Getting Started with KML
Hello becca
first thing to realise is that the KML that the GE API works with is
different to the KML that you use in the GE Application You will need
to add <Schema>'s to map any dynamic data, and replace your <Data>
tags with <SimpleData> tags, remove the <value> tags etc. Look up
Schema in the KML reference and you'll see what I'm talking about.
The second thing is that when your balloon is showing in the API
context, it's getting it's styles from the page, not from the CSS
embedded in the <BalloonStyle> in the KML. We recently ran up against
this and did the following. We gave the HTML in the KML file unique
Id's (#balloonHeader, #balloonMain etc.) and removed all the CSS from
the KML. We then created a balloonStyles.css file and imported that
into the webpage.This is where we put all the CSS that we'd taken out
of the KML file that we had used for the GE Application. It worked
well.
first thing to realise is that the KML that the GE API works with is
different to the KML that you use in the GE Application You will need
to add <Schema>'s to map any dynamic data, and replace your <Data>
tags with <SimpleData> tags, remove the <value> tags etc. Look up
Schema in the KML reference and you'll see what I'm talking about.
The second thing is that when your balloon is showing in the API
context, it's getting it's styles from the page, not from the CSS
embedded in the <BalloonStyle> in the KML. We recently ran up against
this and did the following. We gave the HTML in the KML file unique
Id's (#balloonHeader, #balloonMain etc.) and removed all the CSS from
the KML. We then created a balloonStyles.css file and imported that
into the webpage.This is where we put all the CSS that we'd taken out
of the KML file that we had used for the GE Application. It worked
well.
phil....@sunandshadows.net
Apr 27, 2009, 6:45:27 PM4/27/09
to KML Developer Support - Getting Started with KML
HI Noisette
How can I get the background colour to go to the edge of the balloon ,
as in <bgColor>?
Phil
On 20 Apr, 00:14, Noisette wrote:
> <?xml version="1.0" encoding="UTF-8"?>
> <kml xmlns="http://earth.google.com/kml/2.2">
> <Document>
> <name>Title</name>
> <Style id="my_id">
> <BalloonStyle>
> <text><![CDATA[
> <html><head>
> <style type="text/css">
> body {background-color: #ffff00}
> p {color: #5a60a5}
> p {font-family: verdana}
> a:link {color: #B75B00}
> </style>
> </head>
> <body>$[description]</body>
> </html>
> ]]></text>
> </BalloonStyle>
> </Style>
> <Placemark>
> <name>Placemark 1</name>
> <description><![CDATA[<p>Text of description. <a href="http://www.google.com">Link</p></a>]]></description>
> > Can I useCSSin myBalloonStyle in the same way as your example ?
How can I get the background colour to go to the edge of the balloon ,
as in <bgColor>?
Phil
On 20 Apr, 00:14, Noisette wrote:
> <?xml version="1.0" encoding="UTF-8"?>
> <kml xmlns="http://earth.google.com/kml/2.2">
> <Document>
> <name>Title</name>
> <Style id="my_id">
> <BalloonStyle>
> <text><![CDATA[
> <html><head>
> <style type="text/css">
> body {background-color: #ffff00}
> p {color: #5a60a5}
> p {font-family: verdana}
> a:link {color: #B75B00}
> </style>
> </head>
> <body>$[description]</body>
> </html>
> ]]></text>
> </BalloonStyle>
> </Style>
> <Placemark>
> <name>Placemark 1</name>
> <styleUrl>#my_id</styleUrl>
> <Point>
> <coordinates>-122,37</coordinates>
> </Point>
> </Placemark>
> </Document>
> </kml>
>
> You'll notice though that the background colour doesn't go all the way
> to the edges of theballoonthe way it does if you use <bgColor>.
> <Point>
> <coordinates>-122,37</coordinates>
> </Point>
> </Placemark>
> </Document>
> </kml>
>
> You'll notice though that the background colour doesn't go all the way
>
> On Apr 19, 11:55 am, "[email address]" wrote:
>
> > Thanks for your help .
>
> > I want to use aBalloonStyle with several Placemark descriptions,
> On Apr 19, 11:55 am, "[email address]" wrote:
>
> > Thanks for your help .
>
> > Again, a sample would be helpful .
>
> > Phil
>
> > On Apr 17, 1:50 am, Roman N wrote:
>
> > > Sure! Here's a very trivial sample:
>
> > > <?xml version="1.0" encoding="UTF-8"?>
> > > <kml xmlns="http://www.opengis.net/kml/2.2">
> > > <Placemark>
> > > <description><![CDATA[
> > > <style>
> > > h1 { color: red; letter-spacing: -2px; font-family: helvetica,
> > > arial, sans-serif; }
> > > </style>
> > > <h1>Hello</h1>
> > > <pstyle="font-family: Georgia; font-size: 14px; font-style:
> > > italic;">Foo bar</p>
> > > ]]></description>
> > > <Point>
> > > <coordinates>-122,37</coordinates>
> > > </Point>
> > > </Placemark>
> > > </kml>
>
> > > - Roman
>
> > > On Apr 12, 8:00 am, "[email address]" wrote:
>
> > > > In the KML Reference, I see that, in version5.0:
>
> > > > "CSSis allowed. As withCSSin a regular web browser,CSScan be used
>
> > Phil
>
> > On Apr 17, 1:50 am, Roman N wrote:
>
> > > Sure! Here's a very trivial sample:
>
> > > <?xml version="1.0" encoding="UTF-8"?>
> > > <kml xmlns="http://www.opengis.net/kml/2.2">
> > > <Placemark>
> > > <description><![CDATA[
> > > <style>
> > > h1 { color: red; letter-spacing: -2px; font-family: helvetica,
> > > arial, sans-serif; }
> > > </style>
> > > <h1>Hello</h1>
> > > <pstyle="font-family: Georgia; font-size: 14px; font-style:
> > > italic;">Foo bar</p>
> > > ]]></description>
> > > <Point>
> > > <coordinates>-122,37</coordinates>
> > > </Point>
> > > </Placemark>
> > > </kml>
>
> > > - Roman
>
> > > On Apr 12, 8:00 am, "[email address]" wrote:
>
> > > > In the KML Reference, I see that, in version5.0:
>
> > > > tostyletext, page elements, and to control the size and appearance
> > > > of thedescriptionballoon."
>
> > > > As a KML newbie, are they any examples available of version5.0
> > > >BalloonStylewithCSS?- Hide quoted text -
> > > > of thedescriptionballoon."
>
> > > > As a KML newbie, are they any examples available of version5.0
Reply all
Reply to author
Forward
0 new messages