Reputation: 1815
I'm trying to show a number of circles on top of an OpenStreetMap using OpenLayers 3. The map displays correctly, however I do not see any circles and I get no JavaScript errors. I am using the following code:
<div id="map" class="map"></div>
<script type="text/javascript">
var circle = new ol.geom.Circle({
center: [-2.59394, 51.45271],
radius: 10
})
circle.transform('EPSG:4326', 'EPSG:3857');
var congestionLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: circle
})]
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: "#000000"
})
}),
visible: true
})
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
congestionLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([-2.59394, 51.45271]),
zoom: 10
})
});
</script>
What am I doing wrong?
Upvotes: 1
Views: 1017
Reputation: 1060
the problem is within the way you create the circle, I tried it and the ol.geom.Circle isn't created, you should declare it like this instead :
var circle = new ol.geom.Circle([-2.59394, 51.45271], 0.01).transform('EPSG:4326', 'EPSG:3857');
//circle.transform('EPSG:4326', 'EPSG:3857');
var feature=new ol.Feature({
geometry: circle
});
var congestionLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#737373',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
visible: true
})
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
congestionLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([-2.59394, 51.45271]),
projection: 'EPSG:3857',
zoom: 10
})
});
see that I changed the radius to 0.001 that's because when the projection is transformed a value of 10 to the radius is huge and takes nearly all england
Upvotes: 1