KML met CSS combineren

[BetuweKees]

hi,

Ik ben eens aan de gang gegaan met KML. Lekker lopen lezen op de site van Google en eens wat tutorials doorgelopen, en langzaam begint er iets te voorschijn te komen. Wat ik me afvraag, en waar ik niet achter lijk te kunnen komen is het volgende:

Door middel van CDATA is het mogelijk in een KML bestand 'gewone' html op te nemen zonder dat het nodig is deze te escapen. Prima. Daarnaast is het ook mogelijk je HTML vervolgens via inline styles (daarmee bedoel ik, in de tag zelf) lekker aan te passen. Nog beter. Maar het mooiste van alles zou natuurlijk de mogelijkheid een kleine style declaratie op te nemen ergens en een aantal elementen tegelijk aan te passen. Alle dt's bold bijvoorbeld.

Zoals aangegeven heb ik al een aantal dingen geprobeerd (style tag opnemen, compleet html documentje invoegen, etc). Tevergeefs. Zoeken op zowel het forum als via de grote Google machine levert niks op. Is het mogelijk een klein stylesheetje toe te voegen aan een KML bestand? Of loop ik hier toch echt tegen een beperking aan?

[RobIII]

Gek, ik vind toch relatief vlug het volgende:

quote: http://groups.google.com/...d/thread/534b6819319d382c

I added my support to OwyheeRover's request for CSS support in
ballons.
I hope they implement something of the sort soon. The only way I found
to add style is to use html elements, for example tables, with their
own style, but this needs to be done for every placemark in a
document.
<snip>

No, you're not missing anything. There is limited styling that you can
do on a balloon, using <BalloonStyle>:

http://code.google.com/apis/kml/documentation/kml_tags_21.html#balloo...

One thing you could do is investigate using scripts that would make
the change for you. If you set-up the HTML carefully, and use
something like PHP or Python, you could bulk change all your HTML.

En:

quote: http://groups.google.com/.../web/kml-feature-requests

24.) Feature: Allow CSS style formating in balloons

Comments: For example: <span style="font-size: x-small">this would look smaller</span>. Would also be nice if balloons could use CSS classes. For example: <span class="myclass">this would be formatted text</span>. We would need a tag similar to <StyleMap> that would let us define global CSS rules for all of the balloons in the KML file.

Dus het lijkt niet te kunnen en als feature request ingediend te zijn. Kijk je echter even verder dan vind je op pagina 2:

quote: http://googleearthuser.blogspot.com/2007/02/kml-styles.html

As with external CSS and HTML files, you can define styles in one KML file that you reference in other KML files. For example, you can create a file called mystyles.kml that contains the following:

code:

<Document>
<Style id="foo">
... style description
</Style>
</Document>

Any other KML file you create can call the following:

code:

<styleUrl>http://foo.com/mystyles.kml#foo</styleUrl>

For a detailed description of how to use style tags, view the KML reference. Learn more about KML.

En:

quote: http://code.google.com/ap...kml_tags_21.html#styleurl

<styleUrl>
URI (a URI equals [URL]#ID) of a <Style> or <StyleMap> defined in a Document. If the style is in the same file, use a # reference. If the style is defined in an external file, use a full URL along with # referencing. <snip>

Nu ben ik niet thuis in KML en heb ik geen idee wat je al hebt/nog niet hebt; maar het lijkt me dus prima mogelijk.

[ Voor 57% gewijzigd door RobIII op 06-11-2007 02:12 ]

[BetuweKees]

bedankt voor het meedenken!

hetgeen je aangeeft is echter precies waar het probleem zit; wel op #id en niet op .class kunnen stylen. heb je dus bijvoorbeeld de volgende code:

XML:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
  <Placemark id="user">
    <name>User</name>
    <description>
      <![CDATA[
          
          <dl>
            <dt>Photo:</dt>
            <dd><img src="images/photo.jpg"/></dd>           

            <dt>Last login:</dt>
            <dd>1/11/2007, Amsterdam, Nederland</dd>
          </dl>
        
      ]]>
    </description>
  </Placemark>
</kml>

dan zou je idealiter gewoon via een <style> blok een CSS regel willen toevoegen

Cascading Stylesheet:

dt { font-weight: bold; }

en op die manier alle dt's van een dikke tekst voorzien. een andere optie (indien dat mogelijk zou zijn), zou het toepassen van een .class zijn, maar dat wordt ook niet ondersteund.

blijven over het gebruik van inline css (<dt style="font-weight: bold;">) die je dan iedere keer moet herhalen, of het toekennen van een uniek id aan elke dt en er dan vervolgens zo'n rare xml stylesheet van maken (die ook nog eens super redundant gaat zijn). beide dingen die me tegen de borst stuiten, omdat ik mijn opmaak nou eenmaal graag geschieden houdt van de content, en het, nog belangrijker, in hetgeen ik uiteindelijk wil bereiken, een grote rotzooi zou worden (floats, uitlijningen, etc, etc)

maar ik begrijp dat ik dus helaas tegen een probleem aanloop dat momenteel nog als een feature request geregistreerd staat..