Obsługa zdarzenia mouseover dla placemark'ów - Google Earth KML

Google Earth nie posiada możliwości dołączenia zdarzeń chociażby w taki sposób jak jest to robione w JavaScript'cie. Zamiast tego posiada zdefiniowane akcje - na kliknięcie pojawia się tekst, zaś na najechanie myszą tekst oraz ikona nieco się powiększa. Odpowiednia definicja stylów oraz ich podpięcie do placemark'a pozwala podmienić jego wizerunek.



Definicja stylów pozwala na podanie stylu jako pary (<Pair>) - klucza (<key>) oraz stylu (<Style>). Wartością klucza może być normal lub highlight. Jak wskazują same nazwy definicja stylów normal definiuje normalny wygląd placemark'a, zaś highlight w momencie najechania na niego myszą.

<Pair>
  <key>normal</key>
  <Style>
    ...
  </Style>
</Pair>
<Pair>
  <key>highlight</key>
  <Style>
    ...
  </Style>
</Pair>

Niestety w przeciwieństwie do przykładu z poprzedniego posta nie możemy umieścić tego węzła bezpośrednio w tagu placemark'a. W tym celu należy zastosować pełną formę dokumentu KML - pierwszym węzłem musi być tag <Document>, a w nim zawarte kolejne elementy (w tym tag placemark'a).

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Placemark>
      ...
    </Placemark>
  </Document>
</kml>

Definicja stylów składających się z par trzeba umieścić w osobnym (od placemark'a) węźle - StyleMap. Dodając do niego atrybut id będziemy mogli się do niego odwołać w placemark'u.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <StyleMap id="mojPlacemark">
      ...
    </StyleMap>
    <Placemark>
      ...
    </Placemark>
  </Document>
</kml>

StyleMap mieści już w sobie pary - prosty przykład poniżej.

<StyleMap id="mojPlacemark">
  <Pair>
    <key>normal</key>
    <Style>
      ...
    </Style>
  </Pair>
  <Pair>
    <key>highlight</key>
    <Style>
      ...
    </Style>
  </Pair>
</StyleMap>

Połączenie StyleMap z placemark'iem odbywa się poprzez dodanie do niego tagu <styleUrl> - jako wartość podajemy identyfikator stylu poprzedzony znakiem # (hash).

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <StyleMap id="mojPlacemark">
      <Pair>
        <key>normal</key>
        <Style>
          <IconStyle>
            <Icon>
              <href>http://google-maps-icons.googlecode.com/files/wind.png</href>
            </Icon>
            <scale>3.0</scale>
          </IconStyle>
          <LabelStyle>
            <color>7fffffff</color>
            <colorMode>normal</colorMode>
          </LabelStyle>
        </Style>
      </Pair>
      <Pair>
        <key>highlight</key>
        <Style>
          <IconStyle>
            <Icon>
              <href>http://google-maps-icons.googlecode.com/files/tram.png</href>
            </Icon>
            <scale>3.0</scale>
          </IconStyle>
          <LabelStyle>
            <color>ff888888</color>
            <colorMode>normal</colorMode>
          </LabelStyle>
        </Style>
      </Pair>
    </StyleMap>
    <Placemark>
      <name>Plac Grunwaldzki</name>
      <styleUrl>#mojPlacemark</styleUrl>
      <Point>
        <coordinates>17.05876,51.11123,0</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>

Tak oto łatwo i szybko uzyskaliśmy efekt mouseover w Google Earth.

UPDATE:
Jeżeli chcecie przetestować jak wygląda zmiana ikonek dla placemark'ów, a następnie pobrać wygenerowany kod KML, możecie wykorzystać aplikację Placemark Creator przygotowaną specjalnie jako materiał do tego postu :)