The Artima Developer Community
Sponsored Link

Ruby Buzz Forum
Styling GeoRSS Points

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 0 replies on 1 page


Posts: 201
Nickname: cfis
Registered: Mar, 2006

Charlie Savage
Styling GeoRSS Points Posted: Jun 3, 2007 9:31 PM
Reply to this message Reply

This post originated from an RSS feed registered with Ruby Buzz by .
Original Post: Styling GeoRSS Points
Feed Title: cfis
Feed URL: http://cfis.savagexi.com/articles.rss
Feed Description: Charlie's Blog
Latest Ruby Buzz Posts
Latest Ruby Buzz Posts by
Latest Posts From cfis

Advertisement

As we add custom styles for MapBuzz, an obvious question is how to style GeoRss points. In particular, I would like to specify two images/icons for each Atom entry that has a GeoRss point - a normal image and a hover image for mouse overs.

I'm wondering if there is any community consensus on how to do this? Doing a bit of research, I found a discussion about this on the GeoRss mailing list in January. A good starting point is a post by Christopher Schmidt who talked about reusing KML, while Mikel Maron asked if reusing CSS was more appropriate.

I agree that styling information shouldn't be added to GeoRss and that reusing CSS is a good choice. However, CSS doesn't work for points when you want to represent them with an image/symbol. Based on its HTML heritage, CSS considers images to be markup and not presentation and thus does not support changing an image's src attribute. The closest it gets is supporting background images, but that seems like the wrong solution for this problem.

Thus, we need to find another solution. Some ideas I've pondered include:

1. Use KML as Chris suggested. It would look something like this:

<Style id="highlightPlacemark">
  <IconStyle>
  <Icon>
  <href>http://maps.google.com/mapfiles/kml/paddle/red-stars.png</href>
  </Icon>
  </IconStyle>
</Style>
<Style id="normalPlacemark">
  <IconStyle>
  <Icon>
  <href>http://maps.google.com/mapfiles/kml/paddle/wht-blank.png</href>
  </Icon>
  </IconStyle>
</Style>
<StyleMap id="exampleStyleMap">
  <Pair>
    <key>normal</key>
    <styleUrl>#normalPlacemark</styleUrl>
  </Pair>
  <Pair>
    <key>highlight</key>
    <styleUrl>#highlightPlacemark</styleUrl>
  </Pair>
</StyleMap>

The obvious downside to this is how verbose it is - which is fine for KML but doesn't fit the GeoRss philosphy of keeping things simple.

2. Reuse atom's icon element:

<atom:icon>http://www.mapbuzz.com/images/marker.gif</atom:icon>
<atom:icon pseudo-class="hover">
    http://www.mapbuzz.com/images/marker_hover.gif</atom:icon>

The downsides to this approach are:

  • atom:icon is defined only at the feed level.
  • we have to introduce a custom attribute, which I called pseudo-class to match CSS's terminology.
  • If Atom ever supports icon at the entry level the semantics likely will be a bit different.
  • atom:icon does not specify widths or heights, which is important to support SVG symbols.

3. Reuse XHTML's img element:

<xhtml:img href="http://www.mapbuzz.com/images/marker.gif"
  height="32" width="32"/>
<xhtml:img href="http://www.mapbuzz.com/images/marker.gif"
  height="32" width="32"alt="hover"/>

The advantage to this approach is that Atom's content element already allows mixing in of XHTML, so there is some precedence. It also supports image sizes and we could hijack alt to specify different images types.

4. Reuse SVG's image element:

<xhtml:img xlink:href="http://www.mapbuzz.com/images/marker.gif"
x="100" y="100"height="32" width="32"/>
<xhtml:img xlink:href="http://www.mapbuzz.com/images/marker.gif"
x="100" y="100"height="32" width="32" pseudo-class="hover"/>

An SVG image introduces a funny twist - it let's you specify x and y values.I could see this being confused with the x/y values in a GeoRss point. Alternatively, it could be helpful to precisely postion this image. SVG images also support a number of style related attributes, such as opacity, which could be helpful.

Currently, option #4 looks like the best choice to me, but just wondering what other people think.

Read: Styling GeoRSS Points

Topic: ActiveRecordJDBC Database Speed Comparison Previous Topic   Next Topic Topic: Get It!

Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2019 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use