How to Add Concentric Circles with Markers in OSM

Introduction

Generally, we search for a location having one geocode and put a marker there with that geocode. Let's think of a situation where we need a bunch of markers that need to be shown in different regions. Let's say there are 3 regions isolated by different kilometers range. In this case, we need to define the region with different concentric circles and having different colors to distinguish the regions.

Using the Code

A brief description of how to use the code. Here below I have mentioned the details of the code that is required for creating the concentric circles with the OSM.

function VehicleDetails(lat, lon) {
            var zoom = 10;
            map = new OpenLayers.Map("TaxiMap");
            var mapnik = new OpenLayers.Layer.OSM(map);
            map.addLayer(mapnik);

            var strLat = $('#hdnPLatitude').val();
            var strLong = $('#hdnPLongitude').val();
            var currentPopup;

            map.addLayer(new OpenLayers.Layer.OSM());
            epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
            projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)

            var lonLat = new OpenLayers.LonLat(strLat, strLong).transform(epsg4326, projectTo);

            var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
            var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
            
            //Addition of the poly layer here
            var sunpoly = OpenLayers.Geometry.Polygon.createRegularPolygon(
                point,
                16000,
                36,
                0
            );

            var sunpoly1 = OpenLayers.Geometry.Polygon.createRegularPolygon(
                point,
                9000,
                36,
                0
            );

            var sunpoly2 = OpenLayers.Geometry.Polygon.createRegularPolygon(
                point,
                4000,
                36,
                0
            );

            //Addition of the circles here
            var suncircle = new OpenLayers.Feature.Vector(sunpoly);
            var suncircle1 = new OpenLayers.Feature.Vector(sunpoly1);
            var suncircle2 = new OpenLayers.Feature.Vector(sunpoly2);

            //Drawing the circles here
            vectorLayer.addFeatures([suncircle]);
            vectorLayer.addFeatures([suncircle1]);
            vectorLayer.addFeatures([suncircle2]);

            map.addLayer(vectorLayer);
            map.addControl(new OpenLayers.Control.ScaleLine({ geodesic: true }));
            map.zoomToExtent(vectorLayer.getDataExtent());

            var tags = document.getElementsByTagName('path');

            //Adding the different colors to the different circle layers
            tags[0].style.fill = "red";
            tags[1].style.fill = "yellow";
            tags[2].style.fill = "green";

            //Here number of markers are added here
            for (var i = 0; i < lat.length; i++) {
                
                var position = new OpenLayers.LonLat(lon[i], lat[i]).transform(fromProjection, toProjection);
                var markers = new OpenLayers.Layer.Markers("Markers");

                var size = { width: 26, height: 32 };
                var offset = new OpenLayers.Pixel(-(size.width / 2), -size.height);
                var icon = new OpenLayers.Icon('abc/img/marker.png', size, offset);
                map.addLayer(markers);

                var autoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, {
                    'autoSize': true
                });                
            }
        } 

In the above code, I have used 3 different colors for distinguishing the concentric circles such as red, green, yellow.

Here sunpoly2, sunpoly1, sunpoly are the three layers that are created in 0-4 KM, 4-9 KM, 9-16 KMs. Based upon the requirements, you can add the details.

Conclusion

In the above function, I have described how the concentric circles are created using OSM. This is very useful for the OSM developers. Hope this tip can help rest of the developers for using the technology.