My intention is to load GeoJSON data and display it on the map. Coordinates of the features specified in GeoJSON are normal lon/lat. For some reason openlayers is rendering them using the projection used by the map and without converting them.
// Underlying sat layer.
var world = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
// GeoJSON data.
var geojsonObject = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'coordinates': [ 50.07539747, 19.76809501 ],
'type': 'Point'
},
}
]
};
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
// Map.
map = new ol.Map({
target: 'map',
layers: [world, vectorLayer],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 2
})
});
The point is being rendered in the middle of the map. By placing multiple points I determined that they are in fact moved relative to each other but by a small amount which leads me to believe the for some reason the map uses a different coordinate system for them.
What I tried:
Setting crs
in GeoJSON, providing defaultDataProjection
option to format. I use openlayers v3.8.2 and all solutions I found online are very outdated (and as far as I can see the API used to be way better, maybe I should just switch to an old version).
Just use a featureProjection
to read features like:
var vectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(geojsonObject,{
featureProjection: 'EPSG:3857'
})
});
UPDATE: When reading features from url is even easier, OL makes the conversion internally for you:
var geojson_layer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'file.geojson',
format: new ol.format.GeoJSON()
})
});
Demo - http://plnkr.co/edit/GvdVNE?p=preview
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