[OpenLayers-Users] Circle around clicked point

Thu May 10 09:09:16 PDT 2012

Hello

I need to draw a circle around a click selected point on the map. Looking at
samples in this forum, some web search as well as the OpenLayers page, I
have put the  following code together, but the circle is not drawn. The map
is in EPSG 4326 so units are decimal degrees.

I added a vector layer where the circle shall be drawn:

   var vector_layer = new OpenLayers.Layer.Vector("Zona Influencia")
    //Add layers to the map
    map.addLayers([layer1, layer2, vector_layer]);

//Register the click event to get the clicked point coordinates

    map.events.register('click', map, Circulo);    

   var map_center = new OpenLayers.LonLat(-99.24801,19.49775); 
	 if(!map.getCenter()){
			map.setCenter(map_center);
		}
  	}

// Function to draw the circle around the clicked point

function Circulo(evt)
    {
       var lonlat = map.getLonLatFromViewPortPx(evt.xy);
       // use lonlat
	var circleout = new
OpenLayers.Geometry.Polygon.createRegularPolygon(lonlat, 0.0096, 50); 
	vector_layer.addFeatures(new OpenLayers.Feature.Vector(circleout)); 
    } 

What am I missing?

Full page code is as follows:

<!DOCTYPE html>
<html lang='en'>
<head> 
    <meta charset='utf-8' /> 
	<title>Open Layers Test</title>	
    <script type='text/javascript'
src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script type='text/javascript'>

    var map;

	function init() {
        // Setup our map object
        map = new OpenLayers.Map('map_element', {
        	controls: [
        	new OpenLayers.Control.Navigation(),
        	new OpenLayers.Control.PanZoomBar(),
        	new OpenLayers.Control.LayerSwitcher(),
        	new OpenLayers.Control.ScaleLine()
        	],
        	maxExtent: new OpenLayers.Bounds (-99.269569,19.479910,
-99.224060, 19.524080),
        	maxScale: 15000,
        	minScale: 2500
        	});

       // Setup our layer objects

   var layer1 = new OpenLayers.Layer.WMS(
		"Parques",
		"http://myhost/cgi-bin/mapserv?", 
		{map: '/home/bicimapas/mapdata/BiciMapasMS.map', 
	layers:'parque'});	 

   var layer2 = new OpenLayers.Layer.WMS(
		"Caminos",
		"http://myhost/cgi-bin/mapserv?", 
		{map: '/home/bicimapas/mapdata/BiciMapasMS.map', 
		layers:'caminos', transparent: true}, {isBaseLayer:false});

// Vector layer to draw the circle

   var vector_layer = new OpenLayers.Layer.Vector("Zona Influencia")

    //Add layers to the map
    map.addLayers([layer1, layer2, vector_layer]);

//Register the click event to get the clicked point coordinates

    map.events.register('click', map, Circulo);    

   var map_center = new OpenLayers.LonLat(-99.24801,19.49775); 
	 if(!map.getCenter()){
			map.setCenter(map_center);
		}
  	}

// Function to draw the circle around the clicked point

function Circulo(evt)
    {
       var lonlat = map.getLonLatFromViewPortPx(evt.xy);
       // use lonlat
	var circleout = new
OpenLayers.Geometry.Polygon.createRegularPolygon(lonlat, 0.0096, 50); 
	vector_layer.addFeatures(new OpenLayers.Feature.Vector(circleout)); 
    } 

    </script>
</head>

<body	onload='init();'> mapa de prueba
    <div id='map_element' style='width: 700px; height: 500px; border: 1px
solid black'>
	</div>
</body>
</html>

Thanks in advance for your help

Alberto Najera