Mixing
![Is it OK to do work related projects involving site ripping while at home? (Contains technical jargon) [closed]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbpfN9tAutmK93bJRC3ZoROZzi2TJDms5n8_qJuhgE0a9b52OOHayv3NGT8igAdFL7byXNst-_1DZK5SjrIJ28_6RQPUpBROqMs5s6jo-ZsjX8kjDwfxJufIitH3TaQRXWaGSQKRQib-f/s72-c/1.jpg)
Loading a geojson file with OL3
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
1
down vote
favorite
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:
openlayers geojson
asked yesterday
user1919
1,12811031
add a comment |Â
up vote
1
down vote
favorite
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:
openlayers geojson
asked yesterday
user1919
1,12811031
you sample works fine here... what exact version of OL are you using?
– JGH
yesterday
Loading the ol3 js from here: openlayers.org/en/master/build/ol.js
– user1919
yesterday
@JGH I have changed my js with the one below and together with the suggested changes by Mesa things work cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js
– user1919
yesterday
add a comment |Â
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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:
openlayers geojson
asked yesterday
user1919
1,12811031
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:
openlayers geojson
openlayers geojson
asked yesterday
user1919
1,12811031
asked yesterday
user1919
1,12811031
asked yesterday
user1919
1,12811031
asked yesterday
user1919
1,12811031
asked yesterday
user1919
1,12811031
1,12811031
you sample works fine here... what exact version of OL are you using?
– JGH
yesterday
Loading the ol3 js from here: openlayers.org/en/master/build/ol.js
– user1919
yesterday
@JGH I have changed my js with the one below and together with the suggested changes by Mesa things work cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js
– user1919
yesterday
add a comment |Â
you sample works fine here... what exact version of OL are you using?
– JGH
yesterday
Loading the ol3 js from here: openlayers.org/en/master/build/ol.js
– user1919
yesterday
@JGH I have changed my js with the one below and together with the suggested changes by Mesa things work cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js
– user1919
yesterday
you sample works fine here... what exact version of OL are you using?
– JGH
yesterday
you sample works fine here... what exact version of OL are you using?
– JGH
yesterday
Loading the ol3 js from here: openlayers.org/en/master/build/ol.js
– user1919
yesterday
Loading the ol3 js from here: openlayers.org/en/master/build/ol.js
– user1919
yesterday
@JGH I have changed my js with the one below and together with the suggested changes by Mesa things work cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js
– user1919
yesterday
@JGH I have changed my js with the one below and together with the suggested changes by Mesa things work cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js
– user1919
yesterday
add a comment |Â
2 Answers
2
active
oldest
votes
up vote
3
down vote
accepted
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');
answered yesterday
Mesa
769412
This doesnt work. The behavior is the same
– user1919
yesterday
and also define your map projection, add, projection: 'EPSG:3857'afterzoom: 14
– Mesa
yesterday
Still doesnt work.
– user1919
yesterday
add a comment |Â
up vote
0
down vote
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>
answered yesterday
Reyes Antequera
113
add a comment |Â
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
accepted
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');
answered yesterday
Mesa
769412
This doesnt work. The behavior is the same
– user1919
yesterday
and also define your map projection, add, projection: 'EPSG:3857'afterzoom: 14
– Mesa
yesterday
Still doesnt work.
– user1919
yesterday
add a comment |Â
up vote
3
down vote
accepted
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');
answered yesterday
Mesa
769412
This doesnt work. The behavior is the same
– user1919
yesterday
and also define your map projection, add, projection: 'EPSG:3857'afterzoom: 14
– Mesa
yesterday
Still doesnt work.
– user1919
yesterday
add a comment |Â
up vote
3
down vote
accepted
up vote
3
down vote
accepted
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');
answered yesterday
Mesa
769412
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');
answered yesterday
Mesa
769412
answered yesterday
Mesa
769412
answered yesterday
Mesa
769412
answered yesterday
Mesa
769412
769412
This doesnt work. The behavior is the same
– user1919
yesterday
and also define your map projection, add, projection: 'EPSG:3857'afterzoom: 14
– Mesa
yesterday
Still doesnt work.
– user1919
yesterday
add a comment |Â
This doesnt work. The behavior is the same
– user1919
yesterday
and also define your map projection, add, projection: 'EPSG:3857'afterzoom: 14
– Mesa
yesterday
Still doesnt work.
– user1919
yesterday
This doesnt work. The behavior is the same
– user1919
yesterday
This doesnt work. The behavior is the same
– user1919
yesterday
and also define your map projection, add
, projection: 'EPSG:3857' after zoom: 14– Mesa
yesterday
and also define your map projection, add
, projection: 'EPSG:3857' after zoom: 14– Mesa
yesterday
Still doesnt work.
– user1919
yesterday
Still doesnt work.
– user1919
yesterday
add a comment |Â
up vote
0
down vote
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>
answered yesterday
Reyes Antequera
113
add a comment |Â
up vote
0
down vote
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>
answered yesterday
Reyes Antequera
113
add a comment |Â
up vote
0
down vote
up vote
0
down vote
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>
answered yesterday
Reyes Antequera
113
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>
answered yesterday
Reyes Antequera
113
answered yesterday
Reyes Antequera
113
answered yesterday
Reyes Antequera
113
answered yesterday
Reyes Antequera
113
113
add a comment |Â
add a comment |Â
Â
draft saved
draft discarded
Â
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f295562%2floading-a-geojson-file-with-ol3%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
you sample works fine here... what exact version of OL are you using?
– JGH
yesterday
Loading the ol3 js from here: openlayers.org/en/master/build/ol.js
– user1919
yesterday
@JGH I have changed my js with the one below and together with the suggested changes by Mesa things work cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js
– user1919
yesterday