update VERSION_NUMBER to 2.13-rc5

Merge pull request #987 from ahocevar/google-orphaned
Vector layer duplicates when changeing to google base layer. r=@bartvde
2013-05-30 15:41:00 +02:00 · 2013-05-30 15:37:35 +02:00 · 2013-05-30 15:33:24 +02:00
10 changed files with 556 additions and 11 deletions
--- a/examples/feature-events.html
+++ b/examples/feature-events.html
@@ -0,0 +1,46 @@
+<!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 Feature Events 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">
+    #result {
+        height: 60px;
+        width: 514px;
+        font-size: smaller;
+        overflow: auto;
+        margin-top: 5px;
+    }
+    </style>
+  </head>
+  <body>
+    <h1 id="title">Feature Events Example</h1>
+
+    <div id="tags">
+        feature, select, hover
+    </div>
+
+    <div id="shortdesc">Feature hover and click events</div>
+
+    <div id="map" class="smallmap"></div>
+    <div id="docs">
+        <p id="result">Hover over or click features on the map.</p>
+
+        <p>This example shows how to use the 'featureclick', 'nofeatureclick',
+            'featureover' and 'featureout' events to make features interactive.
+            Look at the <a href="feature-events.js">feature-events.js</a> source
+            code to see how this is done.</p>
+        
+        <p>Note that these events can be registered both on the map and on
+            individual layers. If many layers need to be observed, it is
+            recommended to register listeners once on the map for performance
+            reasons.</p>
+    </div>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="feature-events.js"></script>
+  </body>
+</html>
--- a/examples/feature-events.js
+++ b/examples/feature-events.js
@@ -0,0 +1,67 @@
+var layerListeners = {
+    featureclick: function(e) {
+        log(e.object.name + " says: " + e.feature.id + " clicked.");
+        return false;
+    },
+    nofeatureclick: function(e) {
+        log(e.object.name + " says: No feature clicked.");
+    }
+};
+
+var style = new OpenLayers.StyleMap({
+    'default': OpenLayers.Util.applyDefaults(
+        {label: "${l}", pointRadius: 10},
+        OpenLayers.Feature.Vector.style["default"]
+    ),
+    'select': OpenLayers.Util.applyDefaults(
+        {pointRadius: 10},
+        OpenLayers.Feature.Vector.style.select
+    )
+});
+var layer1 = new OpenLayers.Layer.Vector("Layer 1", {
+    styleMap: style,
+    eventListeners: layerListeners
+});
+layer1.addFeatures([
+    new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 -1)"), {l:1}),
+    new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 1)"), {l:1})
+]);
+var layer2 = new OpenLayers.Layer.Vector("Layer 2", {
+    styleMap: style,
+    eventListeners: layerListeners
+});
+layer2.addFeatures([
+    new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 1)"), {l:2}),
+    new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 -1)"), {l:2})
+]);
+
+var map = new OpenLayers.Map({
+    div: "map",
+    allOverlays: true,
+    layers: [layer1, layer2],
+    zoom: 6,
+    center: [0, 0],
+    eventListeners: {
+        featureover: function(e) {
+            e.feature.renderIntent = "select";
+            e.feature.layer.drawFeature(e.feature);
+            log("Map says: Pointer entered " + e.feature.id + " on " + e.feature.layer.name);
+        },
+        featureout: function(e) {
+            e.feature.renderIntent = "default";
+            e.feature.layer.drawFeature(e.feature);
+            log("Map says: Pointer left " + e.feature.id + " on " + e.feature.layer.name);
+        },
+        featureclick: function(e) {
+            log("Map says: " + e.feature.id + " clicked on " + e.feature.layer.name);
+        }
+    }
+});
+
+function log(msg) {
+    if (!log.timer) {
+        result.innerHTML = "";
+        log.timer = window.setTimeout(function() {delete log.timer;}, 100);
+    }
+    result.innerHTML += msg + "<br>";
+}
--- a/lib/OpenLayers.js
+++ b/lib/OpenLayers.js
@@ -146,6 +146,7 @@
                "OpenLayers/Kinetic.js",
                "OpenLayers/Events.js",
                "OpenLayers/Events/buttonclick.js",
+                "OpenLayers/Events/featureclick.js",
                "OpenLayers/Request.js",
                "OpenLayers/Request/XMLHttpRequest.js",
                "OpenLayers/Projection.js",
@@ -425,4 +426,4 @@
 * When asking questions or reporting issues, make sure to include the output of
 *     OpenLayers.VERSION_NUMBER in the question or issue-description.
 */
-OpenLayers.VERSION_NUMBER="Release 2.13-rc4";
+OpenLayers.VERSION_NUMBER="Release 2.13-rc5";
--- a/lib/OpenLayers/Events/featureclick.js
+++ b/lib/OpenLayers/Events/featureclick.js
@@ -0,0 +1,321 @@
+/* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for
+ * full list of contributors). Published under the 2-clause BSD license.
+ * See license.txt in the OpenLayers distribution or repository for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Events.js
+ */
+
+/**
+ * Class: OpenLayers.Events.featureclick
+ *
+ * Extension event type for handling feature click events, including overlapping
+ * features. 
+ * 
+ * Event types provided by this extension:
+ * - featureclick 
+ */
+OpenLayers.Events.featureclick = OpenLayers.Class({
+    
+    /**
+     * Property: cache
+     * {Object} A cache of features under the mouse.
+     */
+    cache: null,
+    
+    /**
+     * Property: map
+     * {<OpenLayers.Map>} The map to register browser events on.
+     */
+    map: null,
+    
+    /**
+     * Property: provides
+     * {Array(String)} The event types provided by this extension.
+     */
+    provides: ["featureclick", "nofeatureclick", "featureover", "featureout"],
+    
+    /**
+     * Constructor: OpenLayers.Events.featureclick
+     * Create a new featureclick event type.
+     *
+     * Parameters:
+     * target - {<OpenLayers.Events>} The events instance to create the events
+     *     for.
+     */
+    initialize: function(target) {
+        this.target = target;
+        if (target.object instanceof OpenLayers.Map) {
+            this.setMap(target.object);
+        } else if (target.object instanceof OpenLayers.Layer.Vector) {
+            if (target.object.map) {
+                this.setMap(target.object.map);
+            } else {
+                target.object.events.register("added", this, function(evt) {
+                    this.setMap(target.object.map);
+                });
+            }
+        } else {
+            throw("Listeners for '" + this.provides.join("', '") +
+                "' events can only be registered for OpenLayers.Layer.Vector " + 
+                "or OpenLayers.Map instances");
+        }
+        for (var i=this.provides.length-1; i>=0; --i) {
+            target.extensions[this.provides[i]] = true;
+        }
+    },
+    
+    /**
+     * Method: setMap
+     *
+     * Parameters:
+     * map - {<OpenLayers.Map>} The map to register browser events on.
+     */
+    setMap: function(map) {
+        this.map = map;
+        this.cache = {};
+        map.events.register("mousedown", this, this.start, {extension: true});
+        map.events.register("mouseup", this, this.onClick, {extension: true});
+        map.events.register("touchstart", this, this.start, {extension: true});
+        map.events.register("touchmove", this, this.cancel, {extension: true});
+        map.events.register("touchend", this, this.onClick, {extension: true});
+        map.events.register("mousemove", this, this.onMousemove, {extension: true});
+    },
+    
+    /**
+     * Method: start
+     * Sets startEvt = evt.
+     *
+     * Parameters:
+     * evt - {<OpenLayers.Event>}
+     */
+    start: function(evt) {
+        this.startEvt = evt;
+    },
+    
+    /**
+     * Method: cancel
+     * Deletes the start event.
+     *
+     * Parameters:
+     * evt - {<OpenLayers.Event>}
+     */    
+    cancel: function(evt) {
+        delete this.startEvt;
+    },
+    
+    /**
+     * Method: onClick
+     * Listener for the click event.
+     *
+     * Parameters:
+     * evt - {<OpenLayers.Event>}
+     */
+    onClick: function(evt) {
+        if (!this.startEvt || evt.type !== "touchend" &&
+                !OpenLayers.Event.isLeftClick(evt)) {
+            return;
+        }
+        var features = this.getFeatures(this.startEvt);
+        delete this.startEvt;
+        // fire featureclick events
+        var feature, layer, more, clicked = {};
+        for (var i=0, len=features.length; i<len; ++i) {
+            feature = features[i];
+            layer = feature.layer;
+            clicked[layer.id] = true;
+            more = this.triggerEvent("featureclick", {feature: feature});
+            if (more === false) {
+                break;
+            }
+        }
+        // fire nofeatureclick events on all vector layers with no targets
+        for (i=0, len=this.map.layers.length; i<len; ++i) {
+            layer = this.map.layers[i];
+            if (layer instanceof OpenLayers.Layer.Vector && !clicked[layer.id]) {
+                this.triggerEvent("nofeatureclick", {layer: layer});
+            }
+        }
+    },
+    
+    /**
+     * Method: onMousemove
+     * Listener for the mousemove event.
+     *
+     * Parameters:
+     * evt - {<OpenLayers.Event>}
+     */
+    onMousemove: function(evt) {
+        delete this.startEvt;
+        var features = this.getFeatures(evt);
+        var over = {}, newly = [], feature;
+        for (var i=0, len=features.length; i<len; ++i) {
+            feature = features[i];
+            over[feature.id] = feature;
+            if (!this.cache[feature.id]) {
+                newly.push(feature);
+            }
+        }
+        // check if already over features
+        var out = [];
+        for (var id in this.cache) {
+            feature = this.cache[id];
+            if (feature.layer && feature.layer.map) {
+                if (!over[feature.id]) {
+                    out.push(feature);
+                }
+            } else {
+                // removed
+                delete this.cache[id];
+            }
+        }
+        // fire featureover events
+        var more;
+        for (i=0, len=newly.length; i<len; ++i) {
+            feature = newly[i];
+            this.cache[feature.id] = feature;
+            more = this.triggerEvent("featureover", {feature: feature});
+            if (more === false) {
+                break;
+            }
+        }
+        // fire featureout events
+        for (i=0, len=out.length; i<len; ++i) {
+            feature = out[i];
+            delete this.cache[feature.id];
+            more = this.triggerEvent("featureout", {feature: feature});
+            if (more === false) {
+                break;
+            }
+        }
+    },
+    
+    /**
+     * Method: triggerEvent
+     * Determines where to trigger the event and triggers it.
+     *
+     * Parameters:
+     * type - {String} The event type to trigger
+     * evt - {Object} The listener argument
+     *
+     * Returns:
+     * {Boolean} The last listener return.
+     */
+    triggerEvent: function(type, evt) {
+        var layer = evt.feature ? evt.feature.layer : evt.layer,
+            object = this.target.object;
+        if (object instanceof OpenLayers.Map || object === layer) {
+            return this.target.triggerEvent(type, evt);
+        }
+    },
+
+    /**
+     * Method: getFeatures
+     * Get all features at the given screen location.
+     *
+     * Parameters:
+     * evt - {Object} Event object.
+     *
+     * Returns:
+     * {Array(<OpenLayers.Feature.Vector>)} List of features at the given point.
+     */
+    getFeatures: function(evt) {
+        var x = evt.clientX, y = evt.clientY,
+            features = [], targets = [], layers = [],
+            layer, target, feature, i, len;
+        // go through all layers looking for targets
+        for (i=this.map.layers.length-1; i>=0; --i) {
+            layer = this.map.layers[i];
+            if (layer.div.style.display !== "none") {
+                if (layer.renderer instanceof OpenLayers.Renderer.Elements) {
+                    if (layer instanceof OpenLayers.Layer.Vector) {
+                        target = document.elementFromPoint(x, y);
+                        while (target && target._featureId) {
+                            feature = layer.getFeatureById(target._featureId);
+                            if (feature) {
+                                features.push(feature);
+                                target.style.display = "none";
+                                targets.push(target);
+                                target = document.elementFromPoint(x, y);
+                            } else {
+                                // sketch, all bets off
+                                target = false;
+                            }
+                        }
+                    }
+                    layers.push(layer);
+                    layer.div.style.display = "none";
+                } else if (layer.renderer instanceof OpenLayers.Renderer.Canvas) {
+                    feature = layer.renderer.getFeatureIdFromEvent(evt);
+                    if (feature) {
+                        features.push(feature);
+                        layers.push(layer);
+                    }
+                }
+            }
+        }
+        // restore feature visibility
+        for (i=0, len=targets.length; i<len; ++i) {
+            targets[i].style.display = "";
+        }
+        // restore layer visibility
+        for (i=layers.length-1; i>=0; --i) {
+            layers[i].div.style.display = "block";
+        }
+        return features;
+    },
+    
+    /**
+     * APIMethod: destroy
+     * Clean up.
+     */
+    destroy: function() {
+        for (var i=this.provides.length-1; i>=0; --i) {
+            delete this.target.extensions[this.provides[i]];
+        }        
+        this.map.events.un({
+            mousemove: this.onMousemove,
+            mousedown: this.start,
+            mouseup: this.onClick,
+            touchstart: this.start,
+            touchmove: this.cancel,
+            touchend: this.onClick,
+            scope: this
+        });
+        delete this.cache;
+        delete this.map;
+        delete this.target;
+    }
+    
+});
+ 
+/**
+ * Class: OpenLayers.Events.nofeatureclick
+ *
+ * Extension event type for handling click events that do not hit a feature. 
+ * 
+ * Event types provided by this extension:
+ * - nofeatureclick 
+ */
+OpenLayers.Events.nofeatureclick = OpenLayers.Events.featureclick;
+
+/**
+ * Class: OpenLayers.Events.featureover
+ *
+ * Extension event type for handling hovering over a feature. 
+ * 
+ * Event types provided by this extension:
+ * - featureover 
+ */
+OpenLayers.Events.featureover = OpenLayers.Events.featureclick;
+
+/**
+ * Class: OpenLayers.Events.featureout
+ *
+ * Extension event type for handling leaving a feature. 
+ * 
+ * Event types provided by this extension:
+ * - featureout 
+ */
+OpenLayers.Events.featureout = OpenLayers.Events.featureclick;
--- a/lib/OpenLayers/Layer/Google.js
+++ b/lib/OpenLayers/Layer/Google.js
@@ -274,6 +274,10 @@ OpenLayers.Layer.Google = OpenLayers.Class(
            if (poweredBy && poweredBy.parentNode) {
                poweredBy.parentNode.removeChild(poweredBy);
            }
+            if (this.mapObject && window.google && google.maps &&
+                    google.maps.event && google.maps.event.clearListeners) {
+                google.maps.event.clearListeners(this.mapObject, 'tilesloaded');
+            }
        }
    },

--- a/lib/OpenLayers/Layer/Google/v3.js
+++ b/lib/OpenLayers/Layer/Google/v3.js
@@ -53,10 +53,9 @@ OpenLayers.Layer.Google.v3 = {

    /** 
     * Method: loadMapObject
-     * Load the GMap and register appropriate event listeners. If we can't 
-     *     load GMap2, then display a warning message.
+     * Load the GMap and register appropriate event listeners.
     */
-    loadMapObject:function() {
+    loadMapObject: function() {
        if (!this.type) {
            this.type = google.maps.MapTypeId.ROADMAP;
        }
@@ -92,7 +91,6 @@ OpenLayers.Layer.Google.v3 = {
            googleControl.style.width = '100%';
            googleControl.style.height = '100%';
            mapObject.controls[google.maps.ControlPosition.TOP_LEFT].push(googleControl);
-            this.map.div.appendChild(container);
            
            // cache elements for use by any other google layers added to
            // this same map
@@ -141,13 +139,24 @@ OpenLayers.Layer.Google.v3 = {
            }
            var container = this.mapObject.getDiv();
            if (visible === true) {
-                container.style.display = '';
-                cache.googleControl.appendChild(map.viewPortDiv);
-                google.maps.event.trigger(this.mapObject, 'resize');
+                if (container.parentNode !== map.div) {
+                    if (!cache.rendered) {
+                        var me = this;
+                        google.maps.event.addListenerOnce(this.mapObject, 'tilesloaded', function() {
+                            cache.rendered = true;
+                            me.setGMapVisibility(me.getVisibility());
+                            me.moveTo(me.map.getCenter());
+                        });
+                    } else {
+                        map.div.appendChild(container);
+                        cache.googleControl.appendChild(map.viewPortDiv);
+                        google.maps.event.trigger(this.mapObject, 'resize');
+                    }
+                }
                this.mapObject.setMapTypeId(type);                
-            } else {
+            } else if (cache.googleControl.hasChildNodes()) {
                map.div.appendChild(map.viewPortDiv);
-                container.style.display = 'none';
+                map.div.removeChild(container);
            }
        }
    },
--- a/lib/OpenLayers/SingleFile.js
+++ b/lib/OpenLayers/SingleFile.js
@@ -7,7 +7,7 @@ var OpenLayers = {
    /**
     * Constant: VERSION_NUMBER
     */
-    VERSION_NUMBER: "Release 2.13-rc4",
+    VERSION_NUMBER: "Release 2.13-rc5",

    /**
     * Constant: singleFile
--- a/notes/2.13.md
+++ b/notes/2.13.md
@@ -35,6 +35,11 @@ Corresponding issues/pull requests:

 * http://github.com/openlayers/openlayers/pull/700

+## New Map and Vector Layer Events for Feature Interaction
+
+The featureclick events extension (`lib/Events/featureclick.js`) provides four new events ("featureclick", "nofeatureclick", "featureover", "featureout") that can be used as an alternative to the Feature handler or the
+SelectFeature control. It works with multiple layers out of the box and can detect hits on multiple features (except when using the Canvas renderer). See `examples/feature-events.html` for an implementation example.
+
 # Behavior Changes from Past Releases

 ## Control.DragPan: Kinetic by default
--- a/tests/Events/featureclick.html
+++ b/tests/Events/featureclick.html
@@ -0,0 +1,91 @@
+<html>
+<head>
+<script src="../OLLoader.js"></script>
+<script type="text/javascript">
+
+var layer1, style, logevt, lognoevt, map, lonlat, pixel, element;
+
+function init() {
+
+	element = document.getElementById("map");
+
+	style = new OpenLayers.StyleMap({
+		 'default': OpenLayers.Util.applyDefaults(
+		     {label: "${l}", pointRadius: 30},
+		     OpenLayers.Feature.Vector.style["default"]
+		 ),
+		 'select': OpenLayers.Util.applyDefaults(
+		     {pointRadius: 30},
+		     OpenLayers.Feature.Vector.style.select
+		 )
+	});
+	
+	layer1 = new OpenLayers.Layer.Vector("Layer 1", {
+		styleMap: style
+	});
+
+	layer1.addFeatures([
+		 new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(0 0)"), {l:1}),
+		 new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(0 0)"), {l:1}),
+		 new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(0 0)"), {l:1}),
+		 new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(0 0)"), {l:1})
+	]);
+
+	map = new OpenLayers.Map({
+		div: "map",
+		allOverlays: true,
+		layers: [layer1],
+		zoom: 6,
+		center: [0, 0],
+		eventListeners: {
+            featureclick: logEvent,
+            nofeatureclick: logNoEvent
+		}
+	});	
+}
+
+function logNoEvent(e) {
+	lognoevt.push(e);
+}
+
+function logEvent(e) {
+	logevt.push(e);	
+}
+
+function trigger(type, pxl) {
+	var map_position = OpenLayers.Util.pagePosition(element);
+	map.events.triggerEvent(type, {
+		xy: pxl, 
+		clientX: pxl.x + map_position[0], 
+		clientY: pxl.y + map_position[1], 
+		which: 1  // which == 1 means left-click
+	}); 	
+}
+
+// TESTS
+
+function test_onClick(t) {
+	t.plan(2);
+	logevt = [];
+	lognoevt = [];
+	lonlat = new OpenLayers.LonLat(0,0);
+	pixel = map.getPixelFromLonLat(lonlat);
+
+	trigger('mousedown', pixel);
+	trigger('mouseup', pixel);
+	
+	t.eq(logevt.length, 4, "4 features hit");
+    
+    trigger('mousedown', {x: 40, y: 40});
+    trigger('mouseup', {x: 40, y: 40});
+	t.eq(lognoevt.length, 1, "nofeatureclick fired for click outside features.");
+}
+
+// END TESTS
+
+</script>
+</head>
+<body onload="init()">
+<div id="map" style="width: 300px; height: 150px; border: 1px solid black"></div>
+</body>
+</html>
--- a/tests/list-tests.html
+++ b/tests/list-tests.html
@@ -52,6 +52,7 @@
    <li>Control/ZoomBox.html</li>
    <li>Events.html</li>
    <li>Events/buttonclick.html</li>
+    <li>Events/featureclick.html?visible</li>
    <li>Extras.html</li>
    <li>Feature.html</li>
    <li>Feature/Vector.html</li>
Author	SHA1	Message	Date
Bart van den Eijnden	1cf69634cf	update VERSION_NUMBER to 2.13-rc5	2013-05-30 15:41:00 +02:00
ahocevar	c2b7e8b327	Merge pull request #987 from ahocevar/google-orphaned Vector layer duplicates when changeing to google base layer. r=@bartvde	2013-05-30 15:37:35 +02:00
ahocevar	fe0620dc7f	Merge pull request #174 from ahocevar/feature-events Turning @tschaub's FeatureAgent into an event extension. r=@bartvde	2013-05-30 15:33:24 +02:00