Skip to content

Instantly share code, notes, and snippets.

@sfletche

sfletche/OpenLayers Feature Events

Created November 12, 2012 19:54
Show Gist options
  • Save sfletche/4061512 to your computer and use it in GitHub Desktop.
Save sfletche/4061512 to your computer and use it in GitHub Desktop.
Download ZIP
using event listeners rather than the SelectFeature control for vector attribution
Raw
OpenLayers Feature Events
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers Feature Events Example</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
<script src="https://raw.github.com/ahocevar/openlayers/4486a5657b2f2f004115659ad4371781c62aa61e/lib/OpenLayers.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var map, style, outputLayers;
function init() {
var clickOutput = { time: 0, layers: [] };
var hoverOutput = { layers: [] };
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
)
});
//map = new OpenLayers.Map('map');
map = new OpenLayers.Map({
div: "map",
eventListeners: {
featureover: function(e) {
e.feature.renderIntent = "select";
e.feature.layer.drawFeature(e.feature);
var index = hoverOutput.layers.indexOf(e.feature.layer.name);
if (index === -1) {
hoverOutput.layers.push(e.feature.layer.name);
}
var msg = hoverOutput.layers[0] + ' ';
for (var i=1; i<hoverOutput.layers.length; i++) {
msg += hoverOutput.layers[i] + ' ';
}
document.getElementById("hovered-layers").innerHTML = msg;
},
featureout: function(e) {
e.feature.renderIntent = "default";
e.feature.layer.drawFeature(e.feature);
var index = hoverOutput.layers.indexOf(e.feature.layer.name);
if (index !== -1) {
hoverOutput.layers.splice(index, 1);
}
if (hoverOutput.layers.length > 0) {
var msg = hoverOutput.layers[0] + ' ' || '';
for (var i=1; i<hoverOutput.layers.length; i++) {
msg += hoverOutput.layers[i] + ' ';
}
} else {
msg = '';
}
document.getElementById("hovered-layers").innerHTML = msg;
},
featureclick: function(e) {
//console.log(e.feature.layer.getZIndex());
var date = new Date();
var newTime = date.getTime();
if (newTime - clickOutput.time > 100) {
clickOutput.layers = [e.feature.layer.name];
clickOutput.time = newTime;
} else {
clickOutput.layers.push(e.feature.layer.name);
}
var msg = clickOutput.layers[0] + ' ';
for (var i=1; i<clickOutput.layers.length; i++) {
msg += clickOutput.layers[i] + ' ';
}
document.getElementById("selected-layers").innerHTML = msg;
}
}
});
var red_style = new OpenLayers.StyleMap( {
'default': OpenLayers.Util.applyDefaults(
{ fillColor: '#993333' }
),
'select': OpenLayers.Util.applyDefaults(
{ fillColor: '#cc3333' }
)
});
var green_style = new OpenLayers.StyleMap( {
'default': OpenLayers.Util.applyDefaults(
{ fillColor: '#339933' }
),
'select': OpenLayers.Util.applyDefaults(
{ fillColor: '#33cc33' }
)
});
var blue_style = new OpenLayers.StyleMap( {
'default': OpenLayers.Util.applyDefaults(
{ fillColor: '#333377' }
),
'select': OpenLayers.Util.applyDefaults(
{ fillColor: '#3333cc' }
)
});
var red_vector = new OpenLayers.Layer.Vector("red_vector", {isBaseLayer: false, styleMap: red_style});
var green_vector = new OpenLayers.Layer.Vector("green_vector", {isBaseLayer: false, styleMap: green_style});
var blue_vector = new OpenLayers.Layer.Vector("blue_vector", {isBaseLayer: false, styleMap: blue_style});
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}, {'displayInLayerSwitcher':false, 'visible':false} );
//order matters in terms of mouseover
map.addLayers([ol_wms, red_vector, green_vector, blue_vector]);
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
var feature = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((30 0, 130 -15, -1 -60, 30 0))"
)
);
red_vector.addFeatures([feature]);
var feature2 = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((-120 -50, -80 -80, 80 -20, -120 -50))"
)
);
green_vector.addFeatures([feature2]);
var feature3 = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((-10 -10, 30 -10, 30 -40, -10 -40, -10 -10))"
)
);
blue_vector.addFeatures([feature3]);
outputLayers = function () {
var mapLayers = "";
map.layers.forEach( function(lyr, i) {
if (lyr) {
mapLayers += '<p>index:' + i + ' layer:' + lyr.name + ' zIndex:' + lyr.getZIndex() + '</p>';
}
});
document.getElementById("maplayers").innerHTML = mapLayers;
};
outputLayers();
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Mouseover/Selection on Multiple Vectors</h1>
<div id="map" class="smallmap"></div>
<div> <strong>Clicked on:</strong> <span id="selected-layers"></span></div>
<div> <strong>Hovered on:</strong> <span id="hovered-layers"></span></div>
<div> <strong>Map Layers:</strong> <span id="maplayers"></span></div>
<!--These are no longer needed as the controls/listeners are always active while not affecting the zIndex-->
<!--<div><a href="javascript:highlightCtrl.activate(); outputLayers();">Activate Control</a></div>
<div><a href="javascript:highlightCtrl.deactivate(); outputLayers();">Deactivate Control</a></div>-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment