OpenLayers OpenLayers

Ticket #1073: georss-category.patch

File georss-category.patch, 11.4 kB (added by ahocevar, 10 months ago)

Incremental patch to the patch proposed in #533; adds styling functionality to markers and uses it in the GeoRSS layer class to style items differently according to their category property.

  • examples/georss-category.xml

    old new  
     1<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/css" href="/css/rss.css" ?> 
     2 
     3<rdf:RDF  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
     4  xmlns="http://purl.org/rss/1.0/" 
     5  xmlns:dc="http://purl.org/dc/elements/1.1/" 
     6  xmlns:georss="http://www.georss.org/georss"> 
     7<docs>This is an RSS file.  Copy the URL into your aggregator of choice.  If you don't know what this means and want to learn more, please see: <span>http://platial.typepad.com/news/2006/04/really_simple_t.html</span> for more info.</docs><channel rdf:about="http://platial.com"> 
     8<link>http://platial.com</link> 
     9<title>Crschmidt's Places At Platial</title> 
     10<description></description> 
     11</channel> 
     12<item rdf:about="http://platial.com/place/67230"> 
     13<link>http://platial.com/place/67230</link> 
     14<title>Knitting Room</title> 
     15<description><![CDATA[This little shop is jammed full. Yarn, yarn everywhere. They make the most of every possible nook and cranny. I like this place also because they have a lot of different kinds of knitting needles in all different sizes. Also, the people who work here are younger and hipper than in the other stores I go to. I reccomend buying supplies here and then knitting your way through a good documentary at the Capitol Theater across the street.<br/>Address: 2 lake St, Arlington, MA <br/>Tags: knitting, yarn, pins and needles, handspun, hand dyed, novelty yarn, fancy, simple, young, hip, friendly, needles, addy, cute hats<br /><br /><a href="http://platial.com/place/67230">Map this on Platial</a><br /> <a href="http://platial.com/place_grab/67230">Grab this on Platial</a> ]]></description> 
     16<category>sight</category> 
     17<georss:point>42.405524 -71.142273</georss:point> 
     18<dc:creator>crschmidt</dc:creator> 
     19<dc:date>2006-04-24T11:35:26.733857+00:00</dc:date> 
     20</item> 
     21<item rdf:about="http://platial.com/place/62200"> 
     22<link>http://platial.com/place/62200</link> 
     23<title>Allen Hall</title> 
     24<description><![CDATA[My dorm at UIUC.<br/>Address: 1301 W Gregory Dr, Urbana, IL<br/>Tags: dorm, uiuc, college<br/><a href="http://platial.com/place/62200"><img src="http://platial.comhttp://static.flickr.com/4/8576450_0d59cc2531_s.jpg"/></a><br/><br /><br /><a href="http://platial.com/place/62200">Map this on Platial</a><br /> <a href="http://platial.com/place_grab/62200">Grab this on Platial</a> ]]></description> 
     25<georss:point>40.104172 -88.220623</georss:point> 
     26<dc:creator>crschmidt</dc:creator> 
     27<dc:date>2006-04-14T08:01:01.872873+00:00</dc:date> 
     28</item> 
     29<item rdf:about="http://platial.com/place/28232"> 
     30<link>http://platial.com/place/28232</link> 
     31<title>Bagby Hot Springs, OR</title> 
     32<description><![CDATA[Hot spring, temperature: 136  degress F, 58  degress C. However, the area around the springs are not exactly well looked upon by people who know the place. 
     33 
     34<br/>Tags: 20s, rosalie, romance, childhood, hike, camping, soak, relax, beautiful, hot springs, bathhouse, favorite, popular, crowded, organized, honeymoon tub, plumbing made from hollowed out trees, hot springs, mt hood, notorious car break in spot, rash, bacteria<br /><br /><a href="http://platial.com/place/28232">Map this on Platial</a><br /> <a href="http://platial.com/place_grab/28232">Grab this on Platial</a> ]]></description> 
     35<category>recreation</category> 
     36<georss:point>44.936000 -122.173000</georss:point> 
     37<dc:creator>crschmidt</dc:creator> 
     38<dc:date>2006-01-03T23:10:18.553063+00:00</dc:date> 
     39</item> 
     40<item rdf:about="http://platial.com/place/43666"> 
     41<link>http://platial.com/place/43666</link> 
     42<title>Shooting Location for "The Field of Dreams" Film</title> 
     43<description><![CDATA[1989's Field of Dreams was a Best Picture Academy Award nominee, and the baseball field in the cornfield still stands today, and has become quite a tourist destination.  Games are occasionally played at the field, re-enacting professional baseball at the turn of the 20th Century.<br/>Address: Dyersville, Iowa<br/>Tags: iowa, baseball, movie locations, field of dreams, kevin costner, costner, dyersville, kinsella, james earl jones, chicago black sox, shoeless joe, joe jackson, famous farms, film, movie, cinema, shooting location<br /><br /><a href="http://platial.com/place/43666">Map this on Platial</a><br /> <a href="http://platial.com/place_grab/43666">Grab this on Platial</a> ]]></description> 
     44<category>sight</category> 
     45<georss:point>42.481213 -91.111679</georss:point> 
     46<dc:creator>echinodermata</dc:creator> 
     47<dc:date>2006-03-23T11:40:17.654061+00:00</dc:date> 
     48</item> 
     49<item rdf:about="http://platial.com/place/28394"> 
     50<link>http://platial.com/place/28394</link> 
     51<title>Moffetts (Bonneville) Hot Springs, WA</title> 
     52<description><![CDATA[Hot spring, temperature: 97  degress F, 36  degress C<br/>Tags: soak, hot springs, relax, nature<br /><br /><a href="http://platial.com/place/28394">Map this on Platial</a><br /> <a href="http://platial.com/place_grab/28394">Grab this on Platial</a> ]]></description> 
     53<category>recreation</category> 
     54<georss:point>45.658000 -121.962000</georss:point> 
     55<dc:creator>crschmidt</dc:creator> 
     56<dc:date>2006-01-03T23:16:27.329816+00:00</dc:date> 
     57</item> 
     58<item rdf:about="http://platial.com/place/28251"> 
     59<link>http://platial.com/place/28251</link> 
     60<title>Austin Hot Springs, OR</title> 
     61<description><![CDATA[Hot spring, temperature: 186  degress F, 86  degress C<br/>Tags: soak, hot springs, relax, nature, popular, crowded<br /><br /><a href="http://platial.com/place/28251">Map this on Platial</a><br /> <a href="http://platial.com/place_grab/28251">Grab this on Platial</a> ]]></description> 
     62<category>recreation</category> 
     63<georss:point>45.021000 -122.009000</georss:point> 
     64<dc:creator>crschmidt</dc:creator> 
     65<dc:date>2006-01-03T23:11:04.489886+00:00</dc:date> 
     66</item> 
     67</rdf:RDF> 

  • examples/georss.html

    old new  
    1111    <script type="text/javascript"> 
    1212        var map, layer; 
    1313 
     14        var style = new OpenLayers.Style(); 
     15        var rule = new OpenLayers.Rule.Comparison({ 
     16                type: OpenLayers.Rule.Comparison.Type.EQUAL_TO, 
     17                property: 'category'}); 
     18        style.rules.push(OpenLayers.Util.extend(OpenLayers.Util.extend({}, rule), { 
     19                value: 'sight', 
     20                symbolizer: {'Point': {externalGraphic: '../img/marker-blue.png'}}})); 
     21        style.rules.push(OpenLayers.Util.extend(OpenLayers.Util.extend({}, rule), { 
     22                value: 'recreation', 
     23                symbolizer: {'Point': {externalGraphic: '../img/marker-green.png'}}})); 
     24 
    1425        OpenLayers.ProxyHost = "/proxy/?url="; 
    1526        function init(){ 
    1627            map = new OpenLayers.Map('map', {maxResolution:'auto'}); 
    …… 
    2435            var urlObj = OpenLayers.Util.getElement('url');  
    2536            var value = urlObj.value; 
    2637            var parts = value.split("/"); 
    27                 var newl = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], value); 
     38                var newl = new OpenLayers.Layer.GeoRSS( parts[parts.length-1], value, {style: style}); 
    2839                map.addLayer(newl); 
    2940            urlObj.value = ""; 
    3041        } 
    …… 
    3748   GeoRSS URL: <input type="text" id="url" size="50" /><input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" /> 
    3849    </form>   
    3950    <p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page -- for example, entering 'georss.xml' will work by default, because there is a local file in the directory called georss.xml -- or, with a properly set up ProxyHost variable (as is used here), it will be able to load any HTTP URL which contains GeoRSS and display it. Anything else will simply have no effect.</p>     
     51    <p>Entering 'georss-category.xml' in the above input box will load a feed with a 'category' property for some items. The example is configured with style objects to render the items with different icons, depending on the category.</p> 
    4052    <div id="map"></div> 
    4153  </body> 
    4254</html> 

  • lib/OpenLayers/Feature.js

    old new  
    137137 
    138138        if (this.lonlat != null) { 
    139139            this.marker = new OpenLayers.Marker(this.lonlat, this.data.icon); 
     140            this.marker.feature = this; 
    140141        } 
    141142        return this.marker; 
    142143    }, 

  • lib/OpenLayers/Layer/GeoRSS.js

    old new  
    4040     * for this GeoRSS layer. 
    4141     */ 
    4242    icon: null, 
     43     
     44    /** 
     45     * APIProperty: style 
     46     * {OpenLayers.Style}. If more complex styling than just a global icon for 
     47     * the whole layer is needed, a style can be used. 
     48     */ 
     49    style: null, 
    4350 
    4451    /** 
    4552     * APIProperty: popupSize 
    …… 
    7784    destroy: function() { 
    7885        this.clearFeatures(); 
    7986        this.features = null; 
     87        this.style = null; 
    8088        OpenLayers.Layer.Markers.prototype.destroy.apply(this, arguments); 
    8189    }, 
    8290         
    …… 
    186194              } 
    187195              catch (e) {} 
    188196            } 
     197             
     198            try { 
     199              data.category = OpenLayers.Util.getNodes(itemlist[i], "category")[0].firstChild.nodeValue; 
     200            } 
     201            catch (e) {} 
    189202 
    190203            data.icon = this.icon == null ?  
    191204                                     OpenLayers.Marker.defaultIcon() :  
    …… 
    211224            var feature = new OpenLayers.Feature(this, location, data); 
    212225            this.features.push(feature); 
    213226            var marker = feature.createMarker(); 
     227 
     228            if (this.style) { 
     229                marker.style = this.style; 
     230            } 
     231 
    214232            marker.events.register('click', feature, this.markerClick); 
    215233            this.addMarker(marker); 
    216234        } 

  • lib/OpenLayers/Marker.js

    old new  
    5858     */ 
    5959    map: null, 
    6060     
     61    /** 
     62     * Property: feature 
     63     * {<OpenLayers.Feature>} the feature this marker was derived from, if any 
     64     */ 
     65    feature: null, 
     66     
     67    /** 
     68     * Property: style 
     69     * {<OpenLayers.Style>} the style for this marker, if any 
     70     */ 
     71    style: null, 
     72     
    6173    /**  
    6274     * Constructor: OpenLayers.Marker 
    6375     * Paraemeters: 
    …… 
    96108            this.icon.destroy(); 
    97109            this.icon = null; 
    98110        } 
     111         
     112        this.feature = null; 
     113         
     114        this.style = null; 
    99115    }, 
    100116     
    101117    /**  
    …… 
    110126    * location passed-in 
    111127    */ 
    112128    draw: function(px) { 
     129        if (this.style) { 
     130            var style = this.style.createStyle(this.feature); 
     131            if (style.externalGraphic) { 
     132                this.icon.url = style.externalGraphic; 
     133            } 
     134        } 
    113135        return this.icon.draw(px); 
    114136    },  
    115137