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"); projectTo = map.getProjectionObject();
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);
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);
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');
tags[0].style.fill = "red";
tags[1].style.fill = "yellow";
tags[2].style.fill = "green";
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.