Hi Guys, Thanks for your help so far, I have a function to create the circles, and it seems to be working fine :)
What I can seem to do now is make them have a popup Please se my code so far.... <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Circle Test</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"> p { width: 500px; } </style> <script src="http://www.openlayers.com/api/OpenLayers.js"></script> <script type="text/javascript"> var map, vectorLayer, polygonFeature, selectControl, selectedFeature; 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); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.ScaleLine({ bottomOutUnits: "km"})); map.setCenter(new OpenLayers.LonLat(25.0787,-28.5824),6); vectorLayer = new OpenLayers.Layer.Vector("Circle"); ///////////////Select //////////////////// selectControl = new OpenLayers.Control.SelectFeature(vectorLayer, {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); //select: selectControl; ///////////end ////////////////////// } ///// var EARTH_RADIUS_KM = 6371.0088; var EARTH_RADIUS_METERS = EARTH_RADIUS_KM * 1000.0; /* degrees to radians */ function geoRadians(deg){ return deg * (Math.PI / 180.0); }; /* radians to degrees */ function geoDegrees(rad){ return rad * (180.0 / Math.PI); }; function createCircle(lat,lng,radiusKM,line,fill){ var rLat = geoRadians(lat); // radians var rLon = geoRadians(lng); // radians var d = radiusKM / EARTH_RADIUS_KM; var pointList = []; for (x = 0; x < 360; x += 5) { var xrad = geoRadians(x);// radians var tLat = Math.asin(Math.sin(rLat) * Math.cos(d) + Math.cos(rLat) * Math.sin(d) * Math.cos(xrad)); var tLon = rLon + Math.atan2(Math.sin(xrad) * Math.sin(d) * Math.cos(rLat), Math.cos(d)-Math.sin(rLat) * Math.sin(tLat)); Cx = geoDegrees(tLon); Cy = geoDegrees(tLat); var newPoint = new OpenLayers.Geometry.Point(Cx,Cy); pointList.push(newPoint); } var myStyle = { strokeColor: line, fillColor: fill, fillOpacity: 0.4, strokeWidth: 1, pointRadius: 6, pointerEvents: "visiblePainted" }; pointList.push(pointList[0]); var linearRing = new OpenLayers.Geometry.LinearRing(pointList); polygonFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing]),null,myStyle); map.addLayer(vectorLayer); vectorLayer.addFeatures([polygonFeature]); } //////////////////popup /////////////////////////// function onPopupClose(evt) { selectControl.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);*/ alert("Clicked"); } function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } ////////////////end //////////////////// </script> </head> <body onload="init()"> <div id="map" class="smallmap"></div> <a href="javascript:createCircle(-29.688053,28.168945,121.045,'#FF0000','#FF000 0')">Test 1</a> <a href="javascript:createCircle(-22.71539,22.280273,176.809,'#00FF00','#00FF00 ')">Test 2</a> <a href="javascript:createCircle(-24.039298,23.983398,129.376,'#0000FF','#0000F F')">Test 3</a> <a href="javascript:createCircle(-30.039298,20.983398,200.376,'#FFFF00','#FFFF0 0')">Test 4</a> </body> </html> Any advice Kenny _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users