Hi, I have found a much easier way to create a circle. There is a function in OpenLayers to do that. Works ike this:
var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(feature.geometry, 10000, 50) layer.addFeatures(new OpenLayers.Feature.Vector(circle)); the function expects 4 parameters of which I supply 3: - 1. The point where circlecenter must be at - 2. The radius in unit's of the map (in my case meters) - 3. The number of sides (50 makes a nice circle) The 4th parameter is the angle to start drawing but that doesn't make sense for a circle Hope this is of use. Cheers Kris -----Original Message----- From: users-boun...@openlayers.org [mailto:users-boun...@openlayers.org] On Behalf Of Kenny Sent: Thursday, April 30, 2009 6:28 PM To: users@openlayers.org Subject: Re: [OpenLayers-Users] Circle Function 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','#F F000 0')">Test 1</a> <a href="javascript:createCircle(-22.71539,22.280273,176.809,'#00FF00','#00 FF00 ')">Test 2</a> <a href="javascript:createCircle(-24.039298,23.983398,129.376,'#0000FF','#0 000F F')">Test 3</a> <a href="javascript:createCircle(-30.039298,20.983398,200.376,'#FFFF00','#F FFF0 0')">Test 4</a> </body> </html> Any advice Kenny _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users
