OpenLayers OpenLayers

Changeset 5307

Show
Ignore:
Timestamp:
11/30/07 17:07:54 (1 year ago)
Author:
ahocevar
Message:

new GeoRSS example to show thumbnails from Flickr as propertyValues

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/ahocevar/styles/examples/georss-flickr.html

    r5298 r5307  
    1515    <script type="text/javascript"> 
    1616        var map, layer, markerLayer, style, popup; 
    17  
    18         // by default, use the red marker 
     17         
     18        // create a property style that reads the externalGraphic url from 
     19        // the thumbail attribute of the rss item 
    1920        style = new OpenLayers.Style({ 
    20             externalGraphic: "../img/marker.png", 
    21             graphicOpacity: 1, 
    22             graphicYOffset: -19, 
    23             pointRadius: 10}); 
    24          
    25         // define rules for pre-defined title/title substring to style with 
    26         // specific markers 
    27         var ruleEquals = new OpenLayers.Rule.Comparison({ 
    28                 type: OpenLayers.Rule.Comparison.EQUAL_TO, 
    29                 property: "title", 
    30                 value: "Darwin's Ltd.", 
    31                 symbolizer: {'Point': {externalGraphic: '../img/marker-blue.png'}}}); 
    32         var ruleLike = new OpenLayers.Rule.Comparison({ 
    33                 type: OpenLayers.Rule.Comparison.LIKE, 
    34                 property: "title", 
    35                 value: "Hot Springs", 
    36                 symbolizer: {'Point': {externalGraphic: '../img/marker-green.png'}}}); 
    37         style.addRules([ruleLike, ruleEquals]); 
     21            externalGraphic: "${thumbnail}", 
     22            pointRadius: 20}); 
    3823 
    3924        function init(){ 
    …… 
    4429            map.addLayer(layer); 
    4530             
    46             // replaces OpenLayers.Layer.Vector.drawFeature 
     31            map.setCenter(new OpenLayers.LonLat(0, 0), 0); 
     32            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     33             
     34            OpenLayers.loadURL("xml/georss-flickr.xml", "", null, afterload); 
     35             
     36        } 
     37         
     38        function afterload(req) { 
     39            // extended version of OpenLayers.Format.GeoRSS.createFeatureFromItem; 
     40            // adds the thumbnail attribute to the feature 
     41            function createFeatureFromItem(item) { 
     42                var feature = OpenLayers.Format.GeoRSS.prototype 
     43                        .createFeatureFromItem.apply(this, arguments); 
     44                feature.attributes.thumbnail = 
     45                        this.getElementsByTagNameNS( 
     46                        item, "*", "thumbnail")[0].getAttribute("url"); 
     47                return feature; 
     48            } 
     49 
     50            var store = new OpenLayers.Format.GeoRSS({ 
     51                    geons: "http://www.georss.org/georss", 
     52                    createFeatureFromItem: createFeatureFromItem}); 
     53 
     54            rss = store.read(req.responseXML); 
     55 
     56            // get the title of the RSS feed 
     57            var title = req.responseXML.getElementsByTagName("title")[0] 
     58                    .firstChild.nodeValue; 
     59 
     60            // extended version of OpenLayers.Layer.Vector.drawFeature; 
     61            // applies the style before calling the original function 
    4762            var drawFeature = function(feature) { 
    4863                feature.style = feature.layer.style.createStyle(feature); 
    …… 
    5065            } 
    5166 
    52             // replaces OpenLayers.Control.Select.select 
    53             var select = function(feature) { 
    54                 // store layer style 
    55                 var style = feature.layer.style; 
    56                 // set temporary layer style for hover rendering 
    57                 feature.layer.style = new OpenLayers.Style(this.selectStyle); 
    58                 OpenLayers.Control.SelectFeature.prototype.select.apply(this, arguments); 
    59                 // restore layer style 
    60                 feature.layer.style = style; 
    61             } 
    62  
    63             markerLayer = new OpenLayers.Layer.Vector("GeoRSS feed", { 
     67            markerLayer = new OpenLayers.Layer.Vector(title, { 
    6468                    style: style, 
    6569                    drawFeature: drawFeature}); 
    6670            map.addLayer(markerLayer); 
    6771 
    68             var popupControl = new OpenLayers.Control.SelectFeature(markerLayer, { 
    69                 select: select, 
    70                 selectStyle: { 
    71                     externalGraphic: "../img/marker-gold.png"}});  
     72            markerLayer.addFeatures(rss); 
     73             
     74            // control that will show a popup when clicking on a thumbnail 
     75            var popupControl = new OpenLayers.Control.SelectFeature(markerLayer);  
    7276            map.addControl(popupControl); 
    7377             
     78            // onSelect function to create a popup 
    7479            popupControl.onSelect = function(feature) { 
    7580                var pos = feature.geometry; 
    …… 
    7984                popup = new OpenLayers.Popup("popup", 
    8085                    new OpenLayers.LonLat(pos.x, pos.y), 
    81                     new OpenLayers.Size(300,180), 
     86                    new OpenLayers.Size(254,320), 
    8287                    "<h3>" + feature.attributes.title + "</h3>" + 
    8388                    feature.attributes.description, 
    …… 
    8792             
    8893            popupControl.activate(); 
    89             map.setCenter(new OpenLayers.LonLat(0, 0), 0); 
    90             map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    91              
    92             OpenLayers.loadURL("georss.xml", "", null, afterload); 
    93              
    94         } 
    95          
    96         function afterload(req) { 
    97             var store = new OpenLayers.Format.GeoRSS({geons: "http://www.georss.org/georss"}); 
    98             rss = store.read(req.responseXML); 
    99  
    100             var title = req.responseXML.getElementsByTagName("title")[0] 
    101                     .firstChild.nodeValue; 
    102  
    103             markerLayer.addFeatures(rss); 
    10494        } 
    10595    </script> 
    10696  </head> 
    10797  <body onload="init()"> 
    108     <h1>GeoRSS in OpenLayers</h1> 
    109     <p>The displayed GeoRSS feed has a title property for every item. The example is configured with style rules to render the items with different icons, depending on this title. The blue marker is created by looking at an exact title string, the green ones are a substring match on "Hot Spring".</p> 
     98    <h1>GeoRSS from Flickr in OpenLayers</h1> 
     99    <p>The displayed GeoRSS feed has a <tt>&lt;media:thumbnail/&gt;</tt> property for each item. An extended <tt>createFeatureFromItem()</tt> function is used to add this attribute to the attributes hash of each feature read in by <tt>OpenLayers.Format.GeoRSS</tt>. The example is configured with a style to render each item with its thumbnail image.</p> 
    110100    <div id="map"></div> 
    111101  </body>