So ive been struggling to get this feature working. Through hard research (reading 5 lines of code) i managed to implement the function without the hassel all the internet smack is talkin bout. So feel free to use this in your project and if you got here by looking into google, leave a comment or a beer coupon or whatever :) because im releasing this under the beerware license.
<code><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HoverFeature for Highlight - SelectFeature for Popup</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">
#controlToggle li {
list-style: none;
}
</style>
<script src="../lib/Firebug/firebug.js"></script>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var selectCtrl;
function onPopupClose(evt) {
selectCtrl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
"<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
var map, controls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){
map = new OpenLayers.Map('map');
var vectors = new OpenLayers.Layer.Vector("vector", {isBaseLayer: true});
map.addLayers([vectors]);
var feature = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"
)
);
vectors.addFeatures([feature]);
var feature2 = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((-120.828125 -50.3515625, -80.1875 -80.0078125, -40.40625 -20.4140625, -120.828125 -50.3515625))"
)
);
vectors.addFeatures([feature2]);
var report = function(e) {
OpenLayers.Console.log(e.type, e.feature.id);
};
var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {
hover: true,
highlightOnly: true,
renderIntent: "temporary",
eventListeners: {
beforefeaturehighlighted: report,
featurehighlighted: report,
featureunhighlighted: report
}
});
selectCtrl = new OpenLayers.Control.SelectFeature(vectors,
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
);
map.addControl(highlightCtrl);
map.addControl(selectCtrl);
highlightCtrl.activate();
selectCtrl.activate();
map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers HoverFeature for Highlight - SelectFeature for Popup Example</h1>
<p id="shortdesc">
Activate popup on click, highlight features on hover.
</p>
<div id="map" class="smallmap"></div>
<p>Select features by clicking on them. Just highlight features by hovering over
them.</p>
</body>
</html>
</code>
Keine Kommentare:
Kommentar veröffentlichen