OpenLayers BBOX Strategy

This map has a 'Vector' layer fetching data with the 'text' format, and using the 'BBOX strategy'. Data is requested from 'db2text.php', a script which queries the database example.db and generates text in the format OpenLayers can use to display lots of markers

The BBOX strategy means that OpenLayers will make new requests as you pan around (if you pan far enough), with a 'bbox' parameter passed. db2text.php then uses this to only fetch markers from the database for the desired area. This solves problems seen in the example without using BBOX.

Note there is an artificial delay of 3 seconds introduced, to help you see which new data OpenLayers is fetching as you pan. When you release the mouse button after dragging, some new markers appear immediately. These in fact are already loaded by OpenLayers. Further afield, new markers will appear after 3 seconds, as they are retreived as a new bbox request.

<head>
  <title>OpenLayers BBOX Strategy Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>           
  
  <style>
#mapdiv {
   width:400px;
   height:400px;
   float:left;
}
  </style>
</head>
  
<body>
  <div id="mapdiv"></div>
  
  
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
       
    var points = new OpenLayers.Layer.Vector( "My Points",
                    { strategies: [new OpenLayers.Strategy.BBOX()],
                      protocol: new OpenLayers.Protocol.HTTP({
                        url: "./db2text.php",
                        format: new OpenLayers.Format.Text()
                      }),
                      projection: map.displayProjection
                    });
    
    map.addLayer(points);
    
    //Set start centrepoint and zoom
    //TODO: Is it possible to just zoom to extents of defined markers instead?
    
    var lonLat = new OpenLayers.LonLat( -0.1196, 51.5033 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=15;
    map.setCenter (lonLat, zoom);  
    
    
    
  </script>
</body></html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

OpenLayers BBOX Strategy