[OpenLayers-Users] Circle Function

Fri May 1 08:43:36 EDT 2009

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-bounces at openlayers.org [mailto:users-bounces at openlayers.org]
On Behalf Of Kenny
Sent: Thursday, April 30, 2009 6:28 PM
To: users at 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>&nbsp;
 <a
href="javascript:createCircle(-22.71539,22.280273,176.809,'#00FF00','#00
FF00
')">Test 2</a>&nbsp;
 <a
href="javascript:createCircle(-24.039298,23.983398,129.376,'#0000FF','#0
000F
F')">Test 3</a>&nbsp;
 <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 at openlayers.org
http://openlayers.org/mailman/listinfo/users