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