Skip to main content
deleted 46 characters in body
Source Link
PolyGeo
  • 65.4k
  • 29
  • 114
  • 345

In the hopes that it might prove useful...

In the hopes that it might prove useful...

added 135 characters in body
Source Link
Dave Jarvis
  • 711
  • 2
  • 8
  • 21

Findings

This reduces the number of sites from ~700 to well below 400. IE8 remains slightly sluggish, but is no longer unusable.

Findings

This reduces the number of sites from ~700 to well below 400. IE8 remains slightly sluggish, but is no longer unusable.

Source Link
Dave Jarvis
  • 711
  • 2
  • 8
  • 21

In the hopes that it might prove useful...

Define Style

Make the most important feature (icon) represent the cluster.

var siteStyle = new OpenLayers.Style(
  {
    graphicWidth: ICON_SIZE_WIDTH,
    graphicHeight: ICON_SIZE_HEIGHT,
    graphicXOffset: -(ICON_SIZE_WIDTH / 2),
    graphicYOffset: -(ICON_SIZE_HEIGHT),
    externalGraphic: '${icon}',
  },
  { context: {
    icon: function( feature ) {
      if( feature.cluster ) {
        var maxImportance = 0;
        var mainFeature = 0;
        
        for( var c = 0; c < feature.cluster.length; c++ ) {
          var i = feature.cluster[c].attributes.importance;
          
          if( i > maxImportance ) {
            maxImportance = i;
            mainFeature = c;
          }
        }

        feature.attributes = feature.cluster[mainFeature].attributes;
      }
      
      return feature.attributes.icon;
    }
  }  
});

Define Icon Overlap

Determine the threshold, in pixels, that quantifies two icons overlapping.

  // At least 35% of the icon must be visible.
  var overlapDistance = Math.round( Math.sqrt( 
    Math.pow( ICON_SIZE_WIDTH, 2) +
    Math.pow( ICON_SIZE_HEIGHT, 2) ) * 0.35 );

Define Strategy

Hide sites that are behind other sites using the Cluster strategy.

  var strategy = new OpenLayers.Strategy.Cluster(
    { distance: overlapDistance, threshold: 2 }
  );

Apply Strategy

Create a layer to show the site icons.

  var siteLayer = new OpenLayers.Layer.Vector( 'Sites', {
    strategies: [strategy],
    styleMap: new OpenLayers.StyleMap( siteStyle )
  });

Describe Feature Priority

Create a feature.

  var feature = new OpenLayers.Feature.Vector(
    getPoint( lon, lat ),
    {
      uuid: uuid,
      icon: getIconPath( classification, MAP_ICON_SUFFIX ),
      siteType: classification,
      title: label,
      importance: priority
    }
  );