[OpenLayers-Users] Circle Function

Thu Apr 30 12:28:11 EDT 2009

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>&nbsp;
 <a
href="javascript:createCircle(-22.71539,22.280273,176.809,'#00FF00','#00FF00
')">Test 2</a>&nbsp;
 <a
href="javascript:createCircle(-24.039298,23.983398,129.376,'#0000FF','#0000F
F')">Test 3</a>&nbsp;
 <a
href="javascript:createCircle(-30.039298,20.983398,200.376,'#FFFF00','#FFFF0
0')">Test 4</a>
</body>
</html>

Any advice

Kenny