Using MultiGeometry for Mouseover Effects in Google Earth KML


Well, this has been sitting in my half-finished pile for a long time, so I figured I’d better polish it up and kick it out the door (I’m practicing for my kids). There are probably other sites that have documented this, but here’s my version.

Google’s KML format has some really strong styling elements built into it, similar to HTML/CSS. In a single <Style> tag, you can specify how points, lines, and polygons should display in the Google Earth browser. For instance:

<Style id="parcelNormal">
  <IconStyle>
    <scale>0.8</scale>
    <Icon>
      <href>http://maps.google.com/mapfiles/kml/pal4/icon56.png</href>
    </Icon>
  </IconStyle>
  <LabelStyle>
    <scale>0</scale>
  </LabelStyle>
  <LineStyle>
    <color>ff4090ff</color>
    <width>10</width>
  </LineStyle>
  <PolyStyle>
    <color>00000000</color>
  </PolyStyle>
</Style>

This allows you to define polygons, points, and lines, all referencing the same style definition. Definitely a space saver over having to define the style against each feature:

<Placemark>
  <name>238 Franklyn St.</name>
  <styleUrl>#parcelNormal</styleUrl>
  <Point>
    <coordinates>-123.938788334,49.1646409443,0</coordinates>
  </Point>
</Placemark>
<Placemark>
  <name>238 Franklyn St.</name>
  <styleUrl>#parcelNormal</styleUrl>
  <Polygon>
    <outerBoundaryIs>
      <LinearRing>
        <coordinates>
          -123.93904811,49.16434558280001,0
          -123.939274779,49.16457225540001,0
          -123.939105984,49.1646449658,0
          -123.93924107,49.1647800536,0
          -123.938876261,49.16493630590001,0
          -123.938424057,49.1646143977,0
          -123.93904811,49.16434558280001,0
        </coordinates>
      </LinearRing>
    </outerBoundaryIs>
  </Polygon>
</Placemark>

And this is what it looks like:

Basic Styling

There is also a <StyleMap> entity that allows you to specify a style to apply when a feature is active and when a feature is inactive:

<StyleMap id="parcel">
  <Pair>
    <key>normal</key>
    <styleUrl>#parcelNormal</styleUrl>
  </Pair>
  <Pair>
    <key>highlight</key>
    <styleUrl>#parcelHighlight</styleUrl>
  </Pair>
</StyleMap>

Unfortunately, the only feature type that triggers this normal/highlight switch is the point:

Highlight Style on Point

The secret to working around this is to provide a point feature as part of every line or polygon Placemark that you want to be affected by a mouseover. Then, when the user hovers over the point, the line or polygon is affected by the stylemap that applies to that composite feature. The key to doing this is a “wrapper” called MultiGeometry. MultiGeometry allows you to have multiple geometries tied to a single feature. For example:

<Placemark>
  <name>238 Franklyn St.</name>
  <styleUrl>#parcel</styleUrl>
  <MultiGeometry>
    <Point>
      <coordinates>-123.938788334,49.1646409443,0</coordinates>
    </Point>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
            <coordinates>
              -123.93904811,49.16434558280001,0
              -123.939274779,49.16457225540001,0
              -123.939105984,49.1646449658,0
              -123.93924107,49.1647800536,0
              -123.938876261,49.16493630590001,0
              -123.938424057,49.1646143977,0
              -123.93904811,49.16434558280001,0
            </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </MultiGeometry>
</Placemark>

As you can see, both the point and the polygon are affected:

Highlight Style on MultiGeometry

This trick is useful for those hand-crafting their KML, but it is also possible to build this kind of construct in some of the KML generating tools out there. For instance, in Safe Software’s FME, you can generate a point at the centroid of a polygon with a CenterPointReplacer, and then merge the polygons and their centroids using an Aggregator before writing this out into KML format (pdf). You can even generate the StyleMap elements (see format docs for details). In MapGuide Open Source, I use the GetPointInRegion() method to determine the centroid of the polygon, and build my MultiGeometry from this and the polygon coordinates. Most other GIS software has similar functionality.

The final example shown here is available for download in KML, XML and TXT formats.

-J

Bookmark and Share

Related posts

  1. No comments yet.