OpenLayers Marker Overload

Hopefully 1000 markers won't overload your browser. Most browsers these days are competing on performance with things like this (lots of objects in memory). When I first made this example in ~2008 this was too many markers, causing mega-slowdown in most browsers.

<html>
<head><title>OpenLayers Marker Overload</title></head>
<body>
  <div id="mapdiv"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>           
  <script>
  
    function rand(min, max) {
      var offset = min;
      var range = (max - min) + 1;
     
      var randomNumber = Math.floor( Math.random() * range) + offset;
      return randomNumber;
    }

map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    
    epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
    projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
   
    var centrelon =  -0.1279688;
    var centrelat = 51.5077286;
    var lonLat = new OpenLayers.LonLat(centrelon , centrelat).transform(epsg4326, projectTo);
          
    
    var zoom=14;
    map.setCenter (lonLat, zoom);

function createPopup(feature) {
      feature.popup = new OpenLayers.Popup.FramedCloud("pop",
          feature.geometry.getBounds().getCenterLonLat(),
          null,
          '<div class="markerContent">'+feature.attributes.description+'</div>',
          null,
          true,
          function() { controls['selector'].unselectAll(); }
      );
      //feature.popup.closeOnMove = true;
      map.addPopup(feature.popup);
    }

function destroyPopup(feature) {
      feature.popup.destroy();
      feature.popup = null;
    }
    
    map.addControl(controls['selector']);
    controls['selector'].activate();
    
   
  </script>
  
</body></html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

OpenLayers Marker Overload