]> dev.renevier.net Git - syp.git/blob - openlayers/examples/strategy-cluster.html
avoid html injection in item title
[syp.git] / openlayers / examples / strategy-cluster.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2     <head>
3         <title>OpenLayers Cluster Strategy Example</title>
4         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5         <link rel="stylesheet" href="style.css" type="text/css" />
6         <style type="text/css">
7             #photos {
8                 height: 100px;
9                 width: 512px;
10                 position: relative;
11                 white-space: nowrap;
12             }
13             .shift {
14                 height: 25px;
15                 line-height: 25px;
16                 background-color: #fefefe;
17                 text-align: center;
18                 position: absolute;
19                 bottom: 10px;
20                 font-size: 8px;
21                 font-weight: bold;
22                 color: #696969;
23                 width: 25px;
24             }
25             #scroll-start {
26                 left: 0px;
27             }
28             #scroll-end {
29                 right: 0px;
30             }
31             #scroll {
32                 left: 30px;
33                 width: 452px;
34                 height: 100px;
35                 overflow: hidden;
36                 position: absolute;
37                 bottom: 0px;
38             }
39             #photos ul {
40                 position: absolute;
41                 bottom: 0px;
42                 padding: 0;
43                 margin: 0;
44             }
45             #photos ul.start {
46                 left: 0px;
47             }
48             #photos ul.end {
49                 right: 80px;
50             }
51             #photos ul li {
52                 padding 10px;
53                 margin: 0;
54                 list-style: none;
55                 display: inline;
56             }
57             img.thumb {
58                 height: 30px;
59             }
60             img.big {
61                 height: 90px;
62             }
63         </style>
64         <script src="../lib/OpenLayers.js"></script>
65         <script src="Jugl.js"></script>
66         <script src="animator.js"></script>
67         <script type="text/javascript">
68             var map, template;
69             var Jugl = window["http://jugl.tschaub.net/trunk/lib/Jugl.js"];
70             OpenLayers.ProxyHost = (window.location.host == "localhost") ?
71                 "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
72
73             function init() {
74                 map = new OpenLayers.Map('map', {
75                     restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
76                 });
77                 var base = new OpenLayers.Layer.WMS("Imagery", 
78                     ["http://t1.hypercube.telascience.org/tiles?",
79                      "http://t2.hypercube.telascience.org/tiles?",
80                      "http://t3.hypercube.telascience.org/tiles?",
81                      "http://t4.hypercube.telascience.org/tiles?"], 
82                     {layers: 'landsat7'}
83                 );
84
85                 var style = new OpenLayers.Style({
86                     pointRadius: "${radius}",
87                     fillColor: "#ffcc66",
88                     fillOpacity: 0.8,
89                     strokeColor: "#cc6633",
90                     strokeWidth: 2,
91                     strokeOpacity: 0.8
92                 }, {
93                     context: {
94                         radius: function(feature) {
95                             return Math.min(feature.attributes.count, 7) + 3;
96                         }
97                     }
98                 });
99
100                 var photos = new OpenLayers.Layer.Vector("Photos", {
101                     strategies: [
102                         new OpenLayers.Strategy.Fixed(),
103                         new OpenLayers.Strategy.Cluster()
104                     ],
105                     protocol: new OpenLayers.Protocol.HTTP({
106                         url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
107                         params: {
108                             format: "WFS",
109                             sort: "interestingness-desc",
110                             service: "WFS",
111                             request: "GetFeatures",
112                             srs: "EPSG:4326",
113                             maxfeatures: 150,
114                             bbox: [-180, -90, 180, 90]
115                         },
116                         format: new OpenLayers.Format.GML()
117                     }),
118                     styleMap: new OpenLayers.StyleMap({
119                         "default": style,
120                         "select": {
121                             fillColor: "#8aeeef",
122                             strokeColor: "#32a8a9"
123                         }
124                     })
125                 });
126                 
127                 var select = new OpenLayers.Control.SelectFeature(
128                     photos, {hover: true}
129                 );
130                 map.addControl(select);
131                 select.activate();
132                 photos.events.on({"featureselected": display});
133
134                 map.addLayers([base, photos]);
135                 map.setCenter(new OpenLayers.LonLat(0, 0), 1);
136                 
137                 // template setup
138                 template = new Jugl.Template("template");
139
140             }
141             
142             function display(event) {
143                 // clear previous photo list and create new one
144                 $("photos").innerHTML = "";
145                 var node = template.process({
146                     context: {features: event.feature.cluster},
147                     clone: true,
148                     parent: $("photos")
149                 });
150                 // set up forward/rewind
151                 var forward = Animator.apply($("list"), ["start", "end"], {duration: 1500});
152                 $("scroll-end").onmouseover = function() {forward.seekTo(1)};
153                 $("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
154                 $("scroll-start").onmouseover = function() {forward.seekTo(0)};
155                 $("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
156                 // set up photo zoom
157                 for(var i=0; i<event.feature.cluster.length; ++i) {
158                     listen($("link-" + i), Animator.apply($("photo-" + i), ["thumb", "big"]));
159                 }
160             }
161             
162             function listen(el, anim) {
163                 el.onmouseover = function() {anim.seekTo(1)};
164                 el.onmouseout = function() {anim.seekTo(0)};
165             }
166             
167         </script>
168     </head>
169     <body onload="init()">
170         <h1 id="title">Cluster Strategy Example</h1>
171         <p id="shortdesc">
172             Uses a cluster strategy to render points representing clusters of features.
173         </p>
174         <div id="map" class="smallmap"></div>
175         <div id="docs">
176             <p>The Cluster strategy lets you display points representing clusters
177             of features within some pixel distance.</p>
178         </div>
179         <div id="photos"></div>
180         <p>Hover over a cluster on the map to see the photos it includes.</p>
181         <div style="display: none;">
182             <div id="template">
183                 <div class="shift" id="scroll-start">&lt;&lt;</div>
184                 <div id="scroll">
185                     <ul id="list" class="start">
186                         <li jugl:repeat="feature features">
187                             <a jugl:attributes="href feature.attributes.img_url;
188                                                 id 'link-' + repeat.feature.index"
189                                target="_blank">
190                                 <img jugl:attributes="src feature.attributes.img_url;
191                                                       title feature.attributes.title;
192                                                       id 'photo-' + repeat.feature.index"
193                                      class="thumb" />
194                             </a>
195                         </li>
196                     </ul>
197                 </div>
198                 <div class="shift" id="scroll-end">&gt;&gt;</div>
199             </div>
200         </div>
201     </body>
202 </html>