CODEWITHSUNDEEP
javascriptopenlayersopenstreetmap
Lessfoe
Lessfoe

Reputation: 73

Openlayers circle Polygon on OpenStreetMaps layer

I'm trying to create a circle with a defined center and put an icon marker on it. The code is working if I use images instead of OpenLayers.Geometry.Polygon.createRegularPolygon. I wasn't able to solve it.

here you find my code:

<html>
<head>
<title>OpenLayers Example</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
</head>
<body>

<div id="mapdiv"></div>
<script>

map = new OpenLayers.Map("mapdiv");
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( -0.1279688 ,51.5077286 ).transform(epsg4326,     projectTo);

var zoom=6;
map.setCenter (lonLat, zoom);

var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(
               new OpenLayers.Geometry.Point( lonLat ),
               1,
               30
           );

var featurecircle = new OpenLayers.Feature.Vector(mycircle);


var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

// Define markers as "features" of the vector layer:
vectorLayer.addFeatures(featurecircle);

var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( -0.1244324, 51.5006728  ).transform(epsg4326, projectTo),
        {description:'info'} ,
        {externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21,      graphicXOffset:-12, graphicYOffset:-25  }
    );    
vectorLayer.addFeatures(feature);


map.addLayer(vectorLayer);


</script>
</body>
</html>

Thanks in advance for any tips.

Upvotes: 6

Views: 16133

Answers (2)

Rescommunes
Rescommunes

Reputation: 805

If you want to have your circle and your point combined together into one object then use OpenLayers.Geometry.Collection. Using this method you can apply some controls like DragFeature which will operate on elements in the collection at once. 

var defaultStyle = new OpenLayers.Style({
    externalGraphic:'${icon}',
    graphicHeight: 25, 
    graphicWidth:  21,      
    graphicXOffset:-12, 
    graphicYOffset:-25
});
var styleMap = new OpenLayers.StyleMap({'default': defaultStyle });
var vectorLayer = new OpenLayers.Layer.Vector("Overlay",{styleMap: styleMap });

var aPoint  = new OpenLayers.Geometry.Point( lonLat.lon, lonLat.lat );
var aCircle = OpenLayers.Geometry.Polygon.createRegularPolygon( aPoint, 50000, 40, 0 );

var aCirclePoint = new OpenLayers.Geometry.Collection( [ aCircle, aPoint ] );
var aCirclePoint_feature = new OpenLayers.Feature.Vector( aCirclePoint );
aCirclePoint_feature.attributes = { icon:'/img/marker.png' }

vectorLayer.addFeatures( [ aCirclePoint_feature ] );

Upvotes: 5

capdragon
capdragon

Reputation: 14899

OpenLayers.Geometry.Point constructor takes in x,y not lonlat obj. When you're creating the circle new OpenLayers.Geometry.Point( lonLat ) should be new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);

enter image description here

This should work better:

map = new OpenLayers.Map("mapdiv");
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(-0.1279688, 51.5077286).transform(epsg4326, projectTo);

var zoom = 6;
map.setCenter(lonLat, zoom);

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);


var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon
(
    point,
    50000,
    40,
    0
);

var featurecircle = new OpenLayers.Feature.Vector(mycircle);

var featurePoint = new OpenLayers.Feature.Vector(
    point,
    { description: 'info' },
    { externalGraphic: 'img/marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset: -12, graphicYOffset: -25 }
);
vectorLayer.addFeatures([featurePoint, featurecircle]);

map.addLayer(vectorLayer);

Upvotes: 18

Related Questions