openlayers circle around the icons

Question

I'm using openlayers and I'm tryng to create a circle around the icons. Now I'm using this example Adding custom markers dynamically to map using OpenLayers , but I can't draw a circle. Could someone help me please! Thanks

This is the code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>MousePosition Control</title>
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
    <script src="../OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
        function init(){
            var map = new OpenLayers.Map('map');
            var proj4326 = new OpenLayers.Projection("EPSG:4326");
            var projmerc = new OpenLayers.Projection("EPSG:900913");
            var layerOSM = new OpenLayers.Layer.OSM("Street Map");
            map.addLayers([layerOSM]);
            if (!map.getCenter()) map.zoomToMaxExtent();
            map.events.register("mousemove", map, function(e) { 
                var position = this.events.getMousePosition(e);
                OpenLayers.Util.getElement("coords").innerHTML = 'MOUSE POSITION '+position;
                var lonlat = map.getLonLatFromPixel( this.events.getMousePosition(e) );
                OpenLayers.Util.getElement("lonlatTG").innerHTML = 'lonlat => '+lonlat;
                var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                OpenLayers.Util.getElement("lonlatTrans").innerHTML = 'lonlatTransf => '+lonlatTransf;
                OpenLayers.Util.getElement("lonlatDouble").innerHTML = 'lonlat => '+lonlat;
            });

            map.events.register("click", map, function(e) {
                var position = this.events.getMousePosition(e);
                var icon = new OpenLayers.Icon('http://maps.google.com/mapfiles/ms/icons/red-pushpin.png');   
                var lonlat = map.getLonLatFromPixel(position);
                var lonlatTransf = lonlat.transform(map.getProjectionObject(), proj4326);
                alert ('lonlatTrans=> lat='+lonlatTransf.lat+' lon='+lonlatTransf.lon+'\nlonlat=>'+lonlat+'\nposition=>'+position);
                var lonlat = lonlatTransf.transform(proj4326, map.getProjectionObject());
                var markerslayer = new OpenLayers.Layer.Markers( "Markers" );
                markerslayer.addMarker(new OpenLayers.Marker(lonlat, icon));
                map.addLayer(markerslayer);
            });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
        }
    </script>
  </head>  

  <body onload="init()">
    <h1 id="title">MousePosition Control</h1>
    <div id="tags">coordinate</div>
    <p>Click on map and create marker</p>
    <div id="map" class="smallmap"></div>
    <div id="coords"></div>
    <div id="lonlatTG"></div>
    <div id="lonlatTrans"></div><br/>
    <p>
    see how, even though we did NOT transform [lonlat],
    <br/>it was nevertheless transformed
    </p>
    <div id="lonlatDouble"></div>

  </body>
</html>

Does this help? http://stackoverflow.com/questions/6564216/getting-problem-while-creating-openlayer-circle — David, Jul 01 '13 at 14:32
Can you post the code where you're having the issue? When you say you "can't draw a circle", that could be something as simple as a syntax error or a misuse of the OpenLayers API. — David, Jul 02 '13 at 11:52
Sorry, I'm not trying to be difficult, but I don't see in your code where you're trying to add a circle to your map. I see where you're placing the icon, but not where you're trying to place the circle. I will post the example from my first comment on the assumption that you're saying you just are not sure how to create the circle. — David, Jul 02 '13 at 14:18
Yes, but now how can I put the code of your example in this? — Ciccio, Jul 02 '13 at 14:25
I'm not sure I understand. If you wrote the code in your question, then you should be able to just integrate the example into your code. If you didn't, then I don't know if I feel comfortable spelling everything out for you. The point of StackOverflow to be a community of help for people who have done research, tried to get their code to work, done more research and have ultimately gotten stuck. At the very least, StackOverflow is a place to get a quick answer to something you almost already know how to do. I want to help you, but I don't want to do your work for you. I have my own job :) — David, Jul 02 '13 at 14:44

score 1 · Answer 1 · answered Jul 02 '13 at 14:22

var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
    new OpenLayers.Geometry.Point(yourLon, yourLat),
    1,
    20 // According to the API you only need 20 sides to approximate a circle.
);
var feature = new OpenLayers.Feature.Vector(circle);

You may need to add the circle to a separate layer,

openlayers circle around the icons

1 Answers1