postrunner 0.0.10 → 0.0.11

data/misc/openlayers/examples/strategy-cluster-extended.js

@@ -1,247 +0,0 @@
-/**
- * Class: OpenLayers.Strategy.AttributeCluster
- * Strategy for vector feature clustering based on feature attributes.
- *
- * Inherits from:
- *  - <OpenLayers.Strategy.Cluster>
- */
-OpenLayers.Strategy.AttributeCluster = OpenLayers.Class(OpenLayers.Strategy.Cluster, {
-    /**
-     * the attribute to use for comparison
-     */
-    attribute: null,
-    /**
-     * Method: shouldCluster
-     * Determine whether to include a feature in a given cluster.
-     *
-     * Parameters:
-     * cluster - {<OpenLayers.Feature.Vector>} A cluster.
-     * feature - {<OpenLayers.Feature.Vector>} A feature.
-     *
-     * Returns:
-     * {Boolean} The feature should be included in the cluster.
-     */
-    shouldCluster: function(cluster, feature) {
-        var cc_attrval = cluster.cluster[0].attributes[this.attribute];
-        var fc_attrval = feature.attributes[this.attribute];
-        var superProto = OpenLayers.Strategy.Cluster.prototype;
-        return cc_attrval === fc_attrval && 
-               superProto.shouldCluster.apply(this, arguments);
-    },
-    CLASS_NAME: "OpenLayers.Strategy.AttributeCluster"
-});
-
-/**
- * Class: OpenLayers.Strategy.RuleCluster
- * Strategy for vector feature clustering according to a given rule.
- *
- * Inherits from:
- *  - <OpenLayers.Strategy.Cluster>
- */
-OpenLayers.Strategy.RuleCluster = OpenLayers.Class(OpenLayers.Strategy.Cluster, {
-    /**
-     * the rule to use for comparison
-     */
-    rule: null,
-    /**
-     * Method: shouldCluster
-     * Determine whether to include a feature in a given cluster.
-     *
-     * Parameters:
-     * cluster - {<OpenLayers.Feature.Vector>} A cluster.
-     * feature - {<OpenLayers.Feature.Vector>} A feature.
-     *
-     * Returns:
-     * {Boolean} The feature should be included in the cluster.
-     */
-    shouldCluster: function(cluster, feature) {
-        var superProto = OpenLayers.Strategy.Cluster.prototype;
-        return this.rule.evaluate(cluster.cluster[0]) &&
-               this.rule.evaluate(feature) &&
-               superProto.shouldCluster.apply(this, arguments);
-    },
-    CLASS_NAME: "OpenLayers.Strategy.RuleCluster"
-});
-
-
-// global variables
-var map, vectorlayer, features, stylemap, select;
-
-// wrap the instanciation code in an anonymous function that gets executed
-// immeadeately
-(function(){
-
-    // 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 feature = evt.feature;
-        var info = 'Last hovered feature:<br>';
-        if (feature.cluster) {
-            info += '&nbsp;&nbsp;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 += '<br>&nbsp;&nbsp;&nbsp;&nbsp;&bull;&nbsp;clazz ' + j + ': ' + clazzes[j] + ' feature' + plural_s;
-            }
-        } else {
-            info += '&nbsp;&nbsp;Single feature of clazz = ' + feature.attributes.clazz;
-        }
-        document.getElementById('info').innerHTML = info;
-    };
-
-    // 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");
-    
-    // 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
-    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;
-        }
-    };
-    
-    // style the vectorlayer
-    stylemap = new OpenLayers.StyleMap({
-        'default': new OpenLayers.Style({
-            pointRadius: 5,
-            fillColor: "${getColor}",
-            fillOpacity: 0.7,
-            strokeColor: "#666666",
-            strokeWidth: 1,
-            strokeOpacity: 1,
-            graphicZIndex: 1
-        }, {
-            context: context
-        }),
-        'select' : new OpenLayers.Style({
-            pointRadius: 5,
-            fillColor: "#ffff00",
-            fillOpacity: 1,
-            strokeColor: "#666666",
-            strokeWidth: 1,
-            strokeOpacity: 1,
-            graphicZIndex: 2
-        })
-    });
-    
-    // the vectorlayer
-    vectorlayer = new OpenLayers.Layer.Vector('Vectorlayer', {styleMap: stylemap, strategies: []});
-    
-    // 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();
-    
-    features = [];
-    // adding lots of features:
-    for (var i = 0; i < 700; i++) {
-        var r1 = Math.random();
-        var r2 = Math.random();
-        var r3 = Math.random();
-        var r4 = Math.random();
-        var px = r1 * 180 * ((r2 < 0.5) ? -1 : 1); 
-        var py = r3 * 90 * ((r4 < 0.5) ? -1 : 1);
-        var p = new OpenLayers.Geometry.Point(px, py);
-        var clazz = (i % 10 === 0) ? 4 : Math.ceil(r4 * 3);
-        var f = new OpenLayers.Feature.Vector(p, {clazz: clazz});
-        features.push(f);
-    }
-    vectorlayer.addFeatures(features);
-    updateGeneralInformation();
-
-    // the behaviour and methods for the radioboxes    
-    var changeStrategy = function() {
-        var strategies = [];
-        // this is the checkbox
-        switch(this.value) {
-            case 'cluster':
-                // standard clustering
-                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({
-                    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({
-                    rule: new OpenLayers.Rule({
-                        filter: new OpenLayers.Filter.Comparison({
-                            type: OpenLayers.Filter.Comparison.LESS_THAN,
-                            property: "clazz",
-                            value: 4
-                        })
-                    })
-                }));
-                break;
-        }
-        // remove layer and control
-        map.removeLayer(vectorlayer);
-        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();
-    };
-    // bind the behviour to the radios
-    var inputs = document.getElementsByTagName('input');
-    for( var cnt = 0; cnt < inputs.length; cnt++) {
-      var input = inputs[cnt];
-      if (input.name === 'strategy') {
-         input.onclick = changeStrategy;
-      }
-    }
-})();

data/misc/openlayers/examples/strategy-cluster-threshold.html

@@ -1,149 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-        <title>OpenLayers Cluster Strategy Threshold</title>
-        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
-        <link rel="stylesheet" href="style.css" type="text/css">
-        <style type="text/css">
-            ul {
-                list-style: none;
-                padding-left: 2em;
-            }
-            #reset {
-                margin-left: 2em;
-            }
-        </style>
-        <script src="../lib/OpenLayers.js"></script>
-        <script type="text/javascript">
-            // create a semi-random grid of features to be clustered
-            var dx = 3;
-            var dy = 3;
-            var px, py;
-            var features = [];
-            for(var x=-45; x<=45; x+=dx) {
-                for(var y=-22.5; y<=22.5; y+=dy) {
-                    px = x + (2 * dx * (Math.random() - 0.5));
-                    py = y + (2 * dy * (Math.random() - 0.5));
-                    features.push(new OpenLayers.Feature.Vector(
-                        new OpenLayers.Geometry.Point(px, py), {x: px, y: py}
-                    ));
-                }
-            }
-
-            var map, strategy, clusters;
-            function init() {
-                map = new OpenLayers.Map('map');
-                var base = new OpenLayers.Layer.WMS("OpenLayers WMS", 
-                     "http://vmap0.tiles.osgeo.org/wms/vmap0",
-                    {layers: 'basic'}
-                );
-
-                var style = new OpenLayers.Style({
-                    pointRadius: "${radius}",
-                    fillColor: "#ffcc66",
-                    fillOpacity: 0.8,
-                    strokeColor: "#cc6633",
-                    strokeWidth: "${width}",
-                    strokeOpacity: 0.8
-                }, {
-                    context: {
-                        width: function(feature) {
-                            return (feature.cluster) ? 2 : 1;
-                        },
-                        radius: function(feature) {
-                            var pix = 2;
-                            if(feature.cluster) {
-                                pix = Math.min(feature.attributes.count, 7) + 2;
-                            }
-                            return pix;
-                        }
-                    }
-                });
-                
-                strategy = new OpenLayers.Strategy.Cluster();
-
-                clusters = new OpenLayers.Layer.Vector("Clusters", {
-                    strategies: [strategy],
-                    styleMap: new OpenLayers.StyleMap({
-                        "default": style,
-                        "select": {
-                            fillColor: "#8aeeef",
-                            strokeColor: "#32a8a9"
-                        }
-                    })
-                });
-                
-                var select = new OpenLayers.Control.SelectFeature(
-                    clusters, {hover: true}
-                );
-                map.addControl(select);
-                select.activate();
-                clusters.events.on({"featureselected": display});
-
-                map.addLayers([base, clusters]);
-                map.setCenter(new OpenLayers.LonLat(0, 0), 2);
-                
-                reset();
-                document.getElementById("reset").onclick = reset;
-
-            }
-            
-            function reset() {
-                var distance = parseInt(document.getElementById("distance").value);
-                var threshold = parseInt(document.getElementById("threshold").value);
-                strategy.distance = distance || strategy.distance;
-                strategy.threshold = threshold || strategy.threshold;
-                document.getElementById("distance").value = strategy.distance;
-                document.getElementById("threshold").value = strategy.threshold || "null";
-                clusters.removeFeatures(clusters.features);
-                clusters.addFeatures(features);
-            }
-            
-            function display(event) {
-                var f = event.feature;
-                var el = document.getElementById("output");
-                if(f.cluster) {
-                    el.innerHTML = "cluster of " + f.attributes.count;
-                } else {
-                    el.innerHTML = "unclustered " + f.geometry;
-                }
-            }
-            
-            
-        </script>
-    </head>
-    <body onload="init()">
-        <h1 id="title">Cluster Strategy Threshold</h1>
-        <div id="tags">
-            vector, feature, stylemap, wfs, cluster, strategy, cleanup
-        </div>         
-        <p id="shortdesc">
-            Demonstrates the use of the cluster strategy threshold property.
-        </p>
-        <div id="map" class="smallmap"></div>
-        <div id="docs">
-            <p>The Cluster strategy lets you display points representing clusters
-            of features within some pixel distance.  You can control the behavior
-            of the cluster strategy by setting its distance and threshold properties.
-            The distance determines the search radius (in pixels) for features to
-            cluster.  The threshold determines the minimum number of features to
-            be considered a cluster.</p>
-        </div>
-        <br>
-        <p>Cluster details: <span id="output">hover over a feature to see details.</span></p>
-        <ul>
-            <li>
-                <input id="distance" name="distance" type="text" value="" size="3" />
-                <label for="distance">distance</label>
-            </li>
-            <li>
-                <input id="threshold" name="threshold" type="text" value="" size="3" />
-                <label for="threshold">threshold</label>
-            </li>
-        </ul>
-        <button id="reset">recluster</button>
-    </body>
-</html>

data/misc/openlayers/examples/strategy-cluster.html

@@ -1,238 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-        <title>OpenLayers Cluster Strategy Example</title>
-        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
-        <link rel="stylesheet" href="style.css" type="text/css">
-        <style type="text/css">
-            #photos {
-                height: 100px;
-                width: 512px;
-                position: relative;
-                white-space: nowrap;
-            }
-            .shift {
-                height: 25px;
-                line-height: 25px;
-                background-color: #fefefe;
-                text-align: center;
-                position: absolute;
-                bottom: 10px;
-                font-size: 8px;
-                font-weight: bold;
-                color: #696969;
-                width: 25px;
-            }
-            #scroll-start {
-                left: 0px;
-            }
-            #scroll-end {
-                right: 0px;
-            }
-            #scroll {
-                left: 30px;
-                width: 452px;
-                height: 100px;
-                overflow: hidden;
-                position: absolute;
-                bottom: 0px;
-            }
-            #photos ul {
-                position: absolute;
-                bottom: 0px;
-                padding: 0;
-                margin: 0;
-            }
-            #photos ul.start {
-                left: 0px;
-            }
-            #photos ul.end {
-                right: 80px;
-            }
-            #photos ul li {
-                padding: 10px;
-                margin: 0;
-                list-style: none;
-                display: inline;
-            }
-            img.thumb {
-                height: 30px;
-            }
-            img.big {
-                height: 90px;
-            }
-        </style>
-        <script src="../lib/OpenLayers.js"></script>
-        <script src="Jugl.js"></script>
-        <script src="animator.js"></script>
-        <script type="text/javascript">
-        
-            var map, template;
-
-            /**
-             * A specific format for parsing Flickr API JSON responses.
-             */
-            OpenLayers.Format.Flickr = OpenLayers.Class(OpenLayers.Format, {
-                read: function(obj) {
-                    if(obj.stat === 'fail') {
-                        throw new Error(
-                            ['Flickr failure response (',
-                             obj.code,
-                             '): ',
-                             obj.message].join(''));
-                    }
-                    if(!obj || !obj.photos ||
-                       !OpenLayers.Util.isArray(obj.photos.photo)) {
-                        throw new Error(
-                            'Unexpected Flickr response');
-                    }
-                    var photos = obj.photos.photo, photo,
-                        x, y, point,
-                        feature, features = [];
-                    for(var i=0,l=photos.length; i<l; i++) {
-                        photo = photos[i];
-                        x = photo.longitude;
-                        y = photo.latitude;
-                        point = new OpenLayers.Geometry.Point(x, y);
-                        feature = new OpenLayers.Feature.Vector(point, {
-                            title: photo.title,
-                            img_url: photo.url_s
-                        });
-                        features.push(feature);
-                    }
-                    return features;
-                }
-            });
-
-            function init() {
-                map = new OpenLayers.Map('map');
-                var base = new OpenLayers.Layer.OSM();
-
-                var style = new OpenLayers.Style({
-                    pointRadius: "${radius}",
-                    fillColor: "#ffcc66",
-                    fillOpacity: 0.8,
-                    strokeColor: "#cc6633",
-                    strokeWidth: 2,
-                    strokeOpacity: 0.8
-                }, {
-                    context: {
-                        radius: function(feature) {
-                            return Math.min(feature.attributes.count, 7) + 3;
-                        }
-                    }
-                });
-
-                var photos = new OpenLayers.Layer.Vector("Photos", {
-                    projection: "EPSG:4326",
-                    strategies: [
-                        new OpenLayers.Strategy.Fixed(),
-                        new OpenLayers.Strategy.Cluster()
-                    ],
-                    protocol: new OpenLayers.Protocol.Script({
-                        url: "http://api.flickr.com/services/rest",
-                        params: {
-                            api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
-                            format: 'json',
-                            method: 'flickr.photos.search',
-                            extras: 'geo,url_s',
-                            per_page: 150,
-                            page: 1,
-                            bbox: [-180, -90, 180, 90]
-                        },
-                        callbackKey: 'jsoncallback',
-                        format: new OpenLayers.Format.Flickr()
-                    }),
-                    styleMap: new OpenLayers.StyleMap({
-                        "default": style,
-                        "select": {
-                            fillColor: "#8aeeef",
-                            strokeColor: "#32a8a9"
-                        }
-                    })
-                });
-                
-                var select = new OpenLayers.Control.SelectFeature(
-                    photos, {hover: true}
-                );
-                map.addControl(select);
-                select.activate();
-                photos.events.on({"featureselected": display});
-
-                map.addLayers([base, photos]);
-                map.setCenter(new OpenLayers.LonLat(0, 0), 1);
-                
-                // template setup
-                template = new jugl.Template("template");
-
-            }
-            
-            function display(event) {
-                // clear previous photo list and create new one
-                document.getElementById("photos").innerHTML = "";
-                var node = template.process({
-                    context: {features: event.feature.cluster},
-                    clone: true,
-                    parent: document.getElementById("photos")
-                });
-                // set up forward/rewind
-                var forward = Animator.apply(document.getElementById("list"), ["start", "end"], {duration: 1500});
-                document.getElementById("scroll-end").onmouseover = function() {forward.seekTo(1)};
-                document.getElementById("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
-                document.getElementById("scroll-start").onmouseover = function() {forward.seekTo(0)};
-                document.getElementById("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
-                // set up photo zoom
-                for(var i=0; i<event.feature.cluster.length; ++i) {
-                    listen(document.getElementById("link-" + i), Animator.apply(document.getElementById("photo-" + i), ["thumb", "big"]));
-                }
-            }
-            
-            function listen(el, anim) {
-                el.onmouseover = function() {anim.seekTo(1)};
-                el.onmouseout = function() {anim.seekTo(0)};
-            }
-            
-        </script>
-    </head>
-    <body onload="init()">
-        <h1 id="title">Cluster Strategy Example</h1>
-        <div id="tags">
-            vector, feature, stylemap, cluster, strategy, flickr, script
-        </div>         
-        <p id="shortdesc">
-            Uses a cluster strategy to render points representing clusters of features.
-        </p>
-        <div id="map" class="smallmap"></div>
-        <div id="docs">
-            <p>The Cluster strategy lets you display points representing clusters
-            of features within some pixel distance.</p>
-            <p>This particular example uses the <a
-                href="http://www.flickr.com/services/api/">Flickr API.</a></p>
-        </div>
-        <div id="photos"></div>
-        <p>Hover over a cluster on the map to see the photos it includes.</p>
-        <div style="display: none;">
-            <div id="template">
-                <div class="shift" id="scroll-start">&lt;&lt;</div>
-                <div id="scroll">
-                    <ul id="list" class="start">
-                        <li jugl:repeat="feature features">
-                            <a jugl:attributes="href feature.attributes.img_url;
-                                                id 'link-' + repeat.feature.index"
-                               target="_blank">
-                                <img jugl:attributes="src feature.attributes.img_url;
-                                                      title feature.attributes.title;
-                                                      id 'photo-' + repeat.feature.index"
-                                     class="thumb" />
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="shift" id="scroll-end">&gt;&gt;</div>
-            </div>
-        </div>
-    </body>
-</html>