Menu
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.
561
Select a geometry type from the dropdown above to start drawing. To finish drawing, click the last point. To activate freehand drawing for lines, polygons, and circles, hold the Shift key. To remove the last point of a line or polygon, press "Undo".
Overview. OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds.
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);
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);
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 ] );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
