Loading a geojson file with OL3

I am using OL3 to load a geojson layer with points on a map. Although the layer is loaded and it can be seen, when I zoom out the position of the points change on the map. I thought this would related to the projections of the map and the points but I can not figure out how to fix it.
This is the script:

var format = new ol.format.GeoJSON();
var url = 'https://gist.githubusercontent.com/cmiles74/ef62e43595deabb68f5a/raw/ef85f8e7ed34ccbf5768ade25e4d3485ded16938/gistfile1.json';

var vectorSource = new ol.source.Vector(
strategy: ol.loadingstrategy.bbox,
loader: function(extent, resolution, projection)
$.ajax(url).then(function(response)
var features = format.readFeatures(response,
featureProjection: 'EPSG:3857');
vectorSource.addFeatures(features);
);

);

var map = new ol.Map(
layers: [
new ol.layer.Tile(
source: new ol.source.XYZ(
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/z/y/x'
)
),
new ol.layer.Vector(
source: vectorSource
)
],
renderer: 'canvas',
target: 'map',
view: new ol.View(
center: [-9343811.351360613, 5424617.381580625],
zoom: 14
)
);


The geojson looks like this:

And in the below images you can see how the position of the points change in different zoom levels:

2 Answers
2

Define the projection of your GeoJSON data:

change

var features = format.readFeatures(response,
featureProjection: 'EPSG:3857');


to

var features = format.readFeatures(response,
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857');


, projection: 'EPSG:3857'

zoom: 14

Your code and theses scripts work to me.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js" type="text/javascript"></script>


Thanks for contributing an answer to Geographic Information Systems Stack Exchange!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.