circlegeojsonopenlayers
I am loading my layers from external files – I am using geojson format for it, but it's not necessary – I can use any available format.
Is there a way, how to store a circle (ol.geom.Circle) in the geojson file?
Or is there any other file format, which can be directly used in OpenLayers 3 as layer source and which can include a circle definition?
Thanks for posting the demo! After checking it, I found two problems in the "Trains" section, I solved your problem, so please find it here:
Below I will keep my previous answer, but I consider that the JSFIDDLE link above will solve your problem.
--
Since the error points to the "*.geojson" file and says "Not Found", try making it executable with (for linux):
chmod a+x gares.geojson trains.geojson
since you use windows, the similar concept is known as "full control" access:
- Use Windows Explorer to navigate to the file or directory.
- Right click on it, and select Properties.
- Select the Security tab.
- Click the Add button.
- Use the dialogue to grant Full Control to "Everyone".
and then add "./" to the URL in the protocol like:
protocol: new OpenLayers.Protocol.HTTP({
url: "./gares.geojson",
format: new OpenLayers.Format.GeoJSON()
})
and
protocol: new OpenLayers.Protocol.HTTP({
url: "./trains.geojson",
format: new OpenLayers.Format.GeoJSON()
})
I tested the extract of your gares.geojson in http://geojsonlint.com/ and works well:
In case you need to follow a working example using geojson, here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 90,
lat = 60,
zoom = 3,
epsg4326 = new OpenLayers.Projection('EPSG:4326'),
epsg900913 = new OpenLayers.Projection('EPSG:900913');
function init(){
var map = new OpenLayers.Map('map', {
units: 'm',
numZoomLevels: 19,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.LayerSwitcher()
],
projection: epsg900913,
displayProjection: epsg4326 //Is used for displaying coordinates in appropriate CRS by MousePosition control
});
var lay_goo = new OpenLayers.Layer.Google('Google', {
type: google.maps.MapTypeId.SATELLITE,
sphericalMercator: true
});
var lay_osm = new OpenLayers.Layer.Google('OSM');
geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
projection: epsg4326,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "./data/l1.geojson",
format: new OpenLayers.Format.GeoJSON()
})
});
map.addLayers([lay_osm, lay_goo, geojson_layer]);
map.setCenter(new OpenLayers.LonLat(lon, lat).transform(epsg4326, epsg900913), zoom);
}
</script>
</head>
<body onload="init()">
<div id="map" style="position: absolute; right: 0px; top: 0px; width: 100%; height: 100%"></div>
</body>
</html>
After looking in the API docs at http://openlayers.org/en/v3.0.0/apidoc/ol.source.GeoJSON.html and unchecking the checkbox Stable Only on the top right of the banner, I see a projection option for the source.
It's here you have to set the projection to say to OpenLayers 3 to transform the data coordinates.
Trying changing your fiddle with below part, it works
var montanaSource = new ol.source.GeoJSON({
object: ......................................,
projection: 'EPSG:3857'
});
Best Answer
After a lot of more googling and trial - error approach I found I there are now other ways than:
1) Generate a circle myself as Polygon using sin/cos functions
2) Use Point geometry with appropriate radius attribute