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>