openlayers/examples/strategy-bbox.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2     <head>
   3         <title>OpenLayers BBOX 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         <script src="../lib/OpenLayers.js"></script>
   7         <script type="text/javascript">
   8             var map, photos;
   9             OpenLayers.ProxyHost = (window.location.host == "localhost") ?
  10                 "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
  11
  12             function init() {
  13                 map = new OpenLayers.Map('map', {
  14                     restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
  15                 });
  16                 var base = new OpenLayers.Layer.WMS("Imagery",
  17                     ["http://t1.hypercube.telascience.org/tiles?",
  18                      "http://t2.hypercube.telascience.org/tiles?",
  19                      "http://t3.hypercube.telascience.org/tiles?",
  20                      "http://t4.hypercube.telascience.org/tiles?"],
  21                     {layers: 'landsat7'}
  22                 );
  23
  24                 var style = new OpenLayers.Style({
  25                     externalGraphic: "${img_url}",
  26                     pointRadius: 30
  27                 });
  28
  29                 photos = new OpenLayers.Layer.Vector("Photos", {
  30                     strategies: [new OpenLayers.Strategy.BBOX()],
  31                     protocol: new OpenLayers.Protocol.HTTP({
  32                         url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
  33                         params: {
  34                             format: "WFS",
  35                             sort: "interestingness-desc",
  36                             service: "WFS",
  37                             request: "GetFeatures",
  38                             srs: "EPSG:4326",
  39                             maxfeatures: 10
  40                         },
  41                         format: new OpenLayers.Format.GML()
  42                     }),
  43                     styleMap: new OpenLayers.StyleMap(style)
  44                 });
  45
  46                 map.addLayers([base, photos]);
  47                 map.setCenter(new OpenLayers.LonLat(-116.45, 35.42), 5);
  48             }
  49
  50         </script>
  51     </head>
  52     <body onload="init()">
  53         <h1 id="title">BBOX Strategy Example</h1>
  54         <p id="shortdesc">
  55             Uses a BBOX strategy to request features within a bounding box.
  56         </p>
  57         <div id="map" class="smallmap"></div>
  58         <div id="docs">
  59             <p>The BBOX strategy requests data within a bounding box.  When the
  60             previously requested data bounds are invalidated (by browsing to
  61             some area not covered by those bounds), another request for data
  62             is issued.</p>
  63         </div>
  64     </body>
  65 </html>