Click here to Skip to main content
13,194,231 members (49,314 online)
Click here to Skip to main content
Add your own
alternative version


2 bookmarked
Posted 13 May 2014

How to Add Concentric Circles with Markers in OSM

, 13 May 2014
Rate this:
Please Sign up or sign in to vote.
Adding concentric circles based upon different KM radius


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);

            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,;
            //Addition of the poly layer here
            var sunpoly = OpenLayers.Geometry.Polygon.createRegularPolygon(

            var sunpoly1 = OpenLayers.Geometry.Polygon.createRegularPolygon(

            var sunpoly2 = OpenLayers.Geometry.Polygon.createRegularPolygon(

            //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

            map.addControl(new OpenLayers.Control.ScaleLine({ geodesic: true }));

            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);

                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.


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sisir Patro
Software Developer
India India
Learn the base not only the requirement related things for quick fixing and make others learn the exact thing always...

You may also be interested in...

Comments and Discussions

GeneralMy vote of 2 Pin
John D. Sanders13-May-14 8:34
memberJohn D. Sanders13-May-14 8:34 
GeneralRe: My vote of 2 Pin
sisir patro13-May-14 19:56
professionalsisir patro13-May-14 19:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171018.2 | Last Updated 13 May 2014
Article Copyright 2014 by Sisir Patro
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid