<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
var pointLayer = new OpenLayers.Layer.Vector("point");
var polygonLayer = new OpenLayers.Layer.Vector("polygon");
// create point features
var point1 = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature1 = new OpenLayers.Feature.Vector(point1);
var point2 = new OpenLayers.Geometry.Point(-105.04, 49.68);
var pointFeature2 = new OpenLayers.Feature.Vector(point2);
var point3 = new OpenLayers.Geometry.Point(-105.04, 49.68);
var pointFeature3 = new OpenLayers.Feature.Vector(point3);
pointLayer.addFeatures([pointFeature1, pointFeature2, pointFeature3]);
// create a polygon feature from a linear ring of points
var pointList = [];
for(var p=0; p<6; ++p) {
var a = p * (2 * Math.PI) / 7;
var r = Math.random(1) + 1;
var newPoint = new OpenLayers.Geometry.Point(-116 + (r * Math.cos(a)),
45 + (r * Math.sin(a)));
pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]));
polygonLayer.addFeatures([polygonFeature]);
pointLayer.events.register("mouseover", pointLayer, function(e) {
this.div.style.cursor = "pointer";
var feature = this.getFeatureFromEvent(e);
if(feature) {
console.log("point");
}
});
polygonLayer.events.register("mouseover", polygonLayer, function(e) {
this.div.style.cursor = "pointer";
var feature = this.getFeatureFromEvent(e);
if(feature) {
console.log("polygon");
}
});
map.addLayers([polygonLayer, pointLayer]);
map.setCenter(new OpenLayers.LonLat(point1.x, point1.y), 5);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Test</h1>
<div id="tags">
</div>
<p id="shortdesc">
Test
</p>
<div style="text-align: right">
<div id="map" class="smallmap"></div>
</div>
<div id="docs">
<p>Test</p>
</div>
</body>
</html>