I am new in Openlayer2 . I want to make a circle on click but my code making a marker and a random generated circle.

You can check on code here https://fiddle.jshell.net/sm1g1hxz/

<!DOCTYPE html> 
<html lang='en'> 
    <meta charset='utf-8' /> 
    <script type='text/javascript' src='OpenLayers.js'></script>
    <script type='text/javascript'>

    var map;
    var vector_layer;

    function init() {
        //Create a map with an empty array of controls
        map = new OpenLayers.Map('map_element');

        //Create a base layer
        var wms_layer = new OpenLayers.Layer.WMS(
            'OpenLayers WMS',
            {layers: 'basic'},

        //Add vector layer
        vector_layer = new OpenLayers.Layer.Vector('Settlement Vector Layer');

        var settlement_values = {

            4: 'circle'

        //Create some points
        for(var i=0; i<1; i++){
            vector_layer.addFeatures([new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Point(
                    (Math.floor(Math.random() * 360) - 180),
                    (Math.floor(Math.random() * 180) - 90)
                    'settlement_type': settlement_values[(Math.floor(Math.random() * 5))]

        //Create a style map object
        var vector_style_map = new OpenLayers.StyleMap({});

        //ADD RULES            
        //We need to create a 'lookup table' that contains the desired values 
        //  and corresponding symbolizer
        var symbolizers_lookup = {

            'circle': {
                'fillColor': '#336699','fillOpacity':.8,  'pointRadius':50, 'strokeColor': '#003366', 'strokeWidth':2

        //Now, call addUniqueValueRules and pass in the symbolizer lookups
        vector_style_map.addUniqueValueRules('default', 'settlement_type', symbolizers_lookup);

        //Add the style map to the vector layer
        vector_layer.styleMap = vector_style_map;


  var zoom=116;
    var markers = new OpenLayers.Layer.Markers( "circle" );

    map.events.register("click", map , function(e){
   var opx = map.getLonLatFromPixel(e.xy) ;
   var marker = new OpenLayers.Marker(opx);
   marker.events.register("click", marker, function(e){
   popup = new OpenLayers.Popup.FramedCloud("chicken",
                         new OpenLayers.Size(200, 200),
                         "example popup",
                         null, true);




<body onload='init();'>
    <div id='map_element' style='width: 600px; height: 600px;'></div>

If it is openlayer 2 then kindly check this.


We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • Yes It is in openlayer2 . And let me check – F128115 Feb 28 '17 at 9:47
  • Yes. You can use it in OL3 aswell.By some minor modifications – tousif Noor Feb 28 '17 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.