13,194,231 members (49,314 online)
Tip/Trick
alternative version

Stats

6.2K views
2 bookmarked
Posted 13 May 2014

How to Add Concentric Circles with Markers in OSM

, 13 May 2014
 Rate this:

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

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

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

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

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.

Share

 Software Developer 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...

 First Prev Next
 My vote of 2 John D. Sanders13-May-14 8:34 John D. Sanders 13-May-14 8:34
 Re: My vote of 2 sisir patro13-May-14 19:56 sisir patro 13-May-14 19:56
 Last Visit: 31-Dec-99 18:00     Last Update: 19-Oct-17 1:58 Refresh 1