ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #174 from ahocevar/feature-events

Browse Source 
Turning @tschaub's FeatureAgent into an event extension. r=@bartvde
This commit is contained in:
ahocevar
2013-05-27 17:17:42 -07:00
committed by Bart van den Eijnden
parent 8778b746b3
commit fe0620dc7f
7 changed files with 532 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
examples/feature-events.html Normal file
View File

@@ -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>

67
examples/feature-events.js Normal file
View File

@@ -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>";
}