<html>
<head>
<title>OpenLayers Click Event Example</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
</head>
<body onload="init()">
<div id="mapdiv"></div>
<script>
var projMercator = new OpenLayers.Projection("EPSG:900913");
var map = new OpenLayers.Map("mapdiv");
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.trigger
}, this.handlerOptions
);
},
trigger: function(e) {
var lonlat = map.getLonLatFromViewPortPx(e.xy);
alert("You clicked near " + lonlat.lat + " N, " +
+ lonlat.lon + " E");
}
});
function init(){
map.addControl(new OpenLayers.Control.LayerSwitcher());
// click handler
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
// 1st layer
map.addLayer(new OpenLayers.Layer.OSM());
// 2nd layer
var pois = new OpenLayers.Layer.Text( "My Points",
{
location:"./textfile.txt",
projection: map.displayProjection
});
map.addLayer(pois);
// 3rd layer (vector layer)
var layerGeometry = new OpenLayers.Layer.Vector(
"Gebiete",
{
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "geom.json",
format: new OpenLayers.Format.GeoJSON()
}),
projection: projMercator
}
);
map.addLayer(layerGeometry);
var lonLat = new OpenLayers.LonLat( 9.5788, 48.9773 )
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
var zoom=11;
map.setCenter (lonLat, zoom);
}
</script>
</body>
</html>