← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/openlayers/examples/georss-flickr.html

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/openlayers/examples/georss-flickr.html
 
1
<html xmlns="http://www.w3.org/1999/xhtml">
 
2
  <head>
 
3
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
 
4
    <link rel="stylesheet" href="style.css" type="text/css" />
 
5
    <style type="text/css">
 
6
        .olPopupContent {
 
7
            font-size: smaller;
 
8
        }
 
9
    </style>
 
10
    <script src="../lib/OpenLayers.js"></script>
 
11
    <script type="text/javascript">
 
12
        var map, layer, markerLayer, style, popup;
 
13
        
 
14
 
 
15
        function init(){
 
16
            map = new OpenLayers.Map('map', {maxResolution:'auto'});
 
17
            
 
18
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
 
19
                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
 
20
            map.addLayer(layer);
 
21
            
 
22
            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
 
23
            map.addControl(new OpenLayers.Control.LayerSwitcher());
 
24
            
 
25
            // create a property style that reads the externalGraphic url from
 
26
            // the thumbail attribute of the rss item
 
27
            style = new OpenLayers.Style({externalGraphic: "${thumbnail}"});
 
28
            
 
29
            // create a rule with a point symbolizer that will make the thumbnail
 
30
            // larger if the title of the rss item contains "powder"
 
31
            var rule = new OpenLayers.Rule({
 
32
                symbolizer: {pointRadius: 30},
 
33
                filter: new OpenLayers.Filter.Comparison({
 
34
                    type: OpenLayers.Filter.Comparison.LIKE,
 
35
                    property: "title",
 
36
                    value: "*powder*"
 
37
                })
 
38
            });
 
39
            rule.filter.value2regex("*");
 
40
            
 
41
            // If the above rule does not apply, use a smaller pointRadius.
 
42
            var elseRule = new OpenLayers.Rule({
 
43
                elseFilter: true,
 
44
                symbolizer: {pointRadius: 20}
 
45
            });
 
46
            
 
47
            style.addRules([rule, elseRule]);
 
48
            
 
49
            // Create a GML layer with GeoRSS format and a style map.
 
50
            markerLayer = new OpenLayers.Layer.GML("Some images from Flickr",
 
51
                                                               "xml/georss-flickr.xml", {
 
52
                format: OpenLayers.Format.GeoRSS,
 
53
                formatOptions: {
 
54
                    // adds the thumbnail attribute to the feature
 
55
                    createFeatureFromItem: function(item) {
 
56
                        var feature = OpenLayers.Format.GeoRSS.prototype
 
57
                                .createFeatureFromItem.apply(this, arguments);
 
58
                        feature.attributes.thumbnail =
 
59
                                this.getElementsByTagNameNS(
 
60
                                item, "*", "thumbnail")[0].getAttribute("url");
 
61
                        return feature;
 
62
                    }
 
63
                },
 
64
                                // Giving the style map keys for "default" and "select"
 
65
                                // rendering intent, to make the image larger when selected
 
66
                styleMap: new OpenLayers.StyleMap({
 
67
                    "default": style,
 
68
                    "select": new OpenLayers.Style({pointRadius: 35})
 
69
                })
 
70
            });
 
71
            map.addLayer(markerLayer);
 
72
            
 
73
            // control that will show a popup when clicking on a thumbnail
 
74
            var popupControl = new OpenLayers.Control.SelectFeature(markerLayer, {
 
75
              onSelect: function(feature) {
 
76
                  var pos = feature.geometry;
 
77
                  if (popup) {
 
78
                      map.removePopup(popup);
 
79
                  }
 
80
                  popup = new OpenLayers.Popup("popup",
 
81
                      new OpenLayers.LonLat(pos.x, pos.y),
 
82
                      new OpenLayers.Size(254,320),
 
83
                      "<h3>" + feature.attributes.title + "</h3>" +
 
84
                      feature.attributes.description,
 
85
                      true);
 
86
                  map.addPopup(popup);
 
87
              }
 
88
            }); 
 
89
            map.addControl(popupControl);
 
90
            
 
91
            popupControl.activate();
 
92
        }
 
93
    </script>
 
94
  </head>
 
95
  <body onload="init()">
 
96
    <h1 id="title">GeoRSS from Flickr in OpenLayers</h1>
 
97
    <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. Also, to show how rules work, we defined a rule that if the title of an rss item contains "powder", it will be rendered larger than the others.</p>
 
98
    <div id="map" class="smallmap"></div>
 
99
  </body>
 
100
</html>