diff --git a/examples/strategy-cluster-extended.js b/examples/strategy-cluster-extended.js index e3372bd337..163cbf47d5 100644 --- a/examples/strategy-cluster-extended.js +++ b/examples/strategy-cluster-extended.js @@ -73,67 +73,67 @@ var map, vectorlayer, features, stylemap, select; // The function that gets called on feature selection: shows information // about the feature/cluser in a div on the page - var showInformation = function(evt){ + var showInformation = function(evt){ var feature = evt.feature; - var info = 'Last hovered feature:
'; - if (feature.cluster) { - info += '  Cluster of ' + feature.attributes.count + ' features:'; - var clazzes = { - '1': 0, - '2': 0, - '3': 0, - '4': 0 - }; - for (var i = 0; i < feature.attributes.count; i++) { - var feat = feature.cluster[i]; - clazzes[feat.attributes.clazz]++; - } - for (var j=1; j<=4; j++) { - var plural_s = (clazzes[j] !== 1) ? 's' : ''; - info += '
    • clazz ' + j + ': ' + clazzes[j] + ' feature' + plural_s; - } - } else { - info += '  Single feature of clazz = ' + feature.attributes.clazz; - } - document.getElementById('info').innerHTML = info; + var info = 'Last hovered feature:
'; + if (feature.cluster) { + info += '  Cluster of ' + feature.attributes.count + ' features:'; + var clazzes = { + '1': 0, + '2': 0, + '3': 0, + '4': 0 + }; + for (var i = 0; i < feature.attributes.count; i++) { + var feat = feature.cluster[i]; + clazzes[feat.attributes.clazz]++; + } + for (var j=1; j<=4; j++) { + var plural_s = (clazzes[j] !== 1) ? 's' : ''; + info += '
    • clazz ' + j + ': ' + clazzes[j] + ' feature' + plural_s; + } + } else { + info += '  Single feature of clazz = ' + feature.attributes.clazz; + } + document.getElementById('info').innerHTML = info; }; - // The function that gets called on feature selection. Shows information + // The function that gets called on feature selection. Shows information // about the number of "points" on the map. - var updateGeneralInformation = function() { - var info = 'Currently ' + vectorlayer.features.length + ' points are shown on the map.'; - document.getElementById('generalinfo').innerHTML = info; - }; - - // instanciate the map - map = new OpenLayers.Map("map"); + var updateGeneralInformation = function() { + var info = 'Currently ' + vectorlayer.features.length + ' points are shown on the map.'; + document.getElementById('generalinfo').innerHTML = info; + }; + + // instanciate the map + map = new OpenLayers.Map("map"); - // background WMS + // background WMS var ol_wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: "basic" }); - // context to style the vectorlayer + // context to style the vectorlayer var context = { getColor: function(feature){ var color = '#aaaaaa'; - if (feature.attributes.clazz && feature.attributes.clazz === 4) { - color = '#ee0000'; - } else if(feature.cluster) { - var onlyFour = true; - for (var i = 0; i < feature.cluster.length; i++) { - if (onlyFour && feature.cluster[i].attributes.clazz !== 4) { - onlyFour = false; - } - } - if (onlyFour === true) { - color = '#ee0000'; - } - } - return color; + if (feature.attributes.clazz && feature.attributes.clazz === 4) { + color = '#ee0000'; + } else if(feature.cluster) { + var onlyFour = true; + for (var i = 0; i < feature.cluster.length; i++) { + if (onlyFour && feature.cluster[i].attributes.clazz !== 4) { + onlyFour = false; + } + } + if (onlyFour === true) { + color = '#ee0000'; + } + } + return color; } }; - + // style the vectorlayer stylemap = new OpenLayers.StyleMap({ 'default': new OpenLayers.Style({ @@ -143,32 +143,32 @@ var map, vectorlayer, features, stylemap, select; strokeColor: "#666666", strokeWidth: 1, strokeOpacity: 1, - graphicZIndex: 1 + graphicZIndex: 1 }, { context: context }), - 'select' : new OpenLayers.Style({ + 'select' : new OpenLayers.Style({ pointRadius: 5, fillColor: "#ffff00", fillOpacity: 1, strokeColor: "#666666", strokeWidth: 1, strokeOpacity: 1, - graphicZIndex: 2 + graphicZIndex: 2 }) }); // the vectorlayer vectorlayer = new OpenLayers.Layer.Vector('Vectorlayer', {styleMap: stylemap, strategies: []}); - // the select control - select = new OpenLayers.Control.SelectFeature( + // the select control + select = new OpenLayers.Control.SelectFeature( vectorlayer, {hover: true} ); map.addControl(select); select.activate(); vectorlayer.events.on({"featureselected": showInformation}); - + map.addLayers([ol_wms, vectorlayer]); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); @@ -197,18 +197,18 @@ var map, vectorlayer, features, stylemap, select; switch(this.value) { case 'cluster': // standard clustering - strategies.push(new OpenLayers.Strategy.Cluster()); + strategies.push(new OpenLayers.Strategy.Cluster()); break; case 'attribute-cluster': // use the custom class: only cluster features of the same clazz - strategies.push(new OpenLayers.Strategy.AttributeCluster({ + strategies.push(new OpenLayers.Strategy.AttributeCluster({ attribute:'clazz' })); break; case 'rule-cluster': // use the custom class: only cluster features that have a - // clazz smaller than 4 - strategies.push(new OpenLayers.Strategy.RuleCluster({ + // clazz smaller than 4 + strategies.push(new OpenLayers.Strategy.RuleCluster({ rule: new OpenLayers.Rule({ filter: new OpenLayers.Filter.Comparison({ type: OpenLayers.Filter.Comparison.LESS_THAN, @@ -219,24 +219,24 @@ var map, vectorlayer, features, stylemap, select; })); break; } - // remove layer and control + // remove layer and control map.removeLayer(vectorlayer); - map.removeControl(select); - // rebuild layer + map.removeControl(select); + // rebuild layer vectorlayer = new OpenLayers.Layer.Vector('Vectorlayer', {styleMap: stylemap, strategies: strategies}); map.addLayer( vectorlayer ); vectorlayer.addFeatures(features); // rebuild select control - select = new OpenLayers.Control.SelectFeature( - vectorlayer, {hover: true} - ); - map.addControl(select); - select.activate(); - vectorlayer.events.on({"featureselected": showInformation}); - // update meta information - updateGeneralInformation(); + select = new OpenLayers.Control.SelectFeature( + vectorlayer, {hover: true} + ); + map.addControl(select); + select.activate(); + vectorlayer.events.on({"featureselected": showInformation}); + // update meta information + updateGeneralInformation(); }; - // bind the behviour to the radios + // bind the behviour to the radios var inputs = document.getElementsByTagName('input'); for( var cnt = 0; cnt < inputs.length; cnt++) { var input = inputs[cnt];