How to load GeoJSON data in OpenLayers?Why won't GeoJSON load?Openlayers 3 GeoJson save and loadMarkerCluster...
What are these objects near the Cosmonaut's faces?
How to get to Antarctica without using a travel company
Can Microsoft employees see my data in Azure?
How to load GeoJSON data in OpenLayers?
Should I respond to a sabotage accusation e-mail at work?
出かけることにしました - What is the meaning of this?
Is using a photo reference for pose fair use?
How can a stock trade for a fraction of a cent?
Did Bobby Fischer actually write "Bobby Fischer Teaches Chess"
What does "he was equally game to slip into bit parts" mean?
How can I seal 8 inch round holes in my siding?
Are Changelings immune to the Polymorph spell?
Is Uralic Possibly a Branch of the Indo-European Branch?
If equal temperament divides octave into 12 equal parts, why hertz differences are not the same but element 12th of two?
Visualize a large int
Do any languages mark social distinctions other than gender and status?
What plausible reasons why people forget they didn't originally live on this new planet?
Grade changes with auto grader
For piano scales, should I let go of the previous key before I hit the next one?
Protecting yourself against OSINT?
LTSpice Zener diode bug?
Repair drywall and protect wires on back of electrical panel
Why are there never-ending wars in the Middle East?
Does using an img title attribute in addition to the alt attribute help image SEO?
How to load GeoJSON data in OpenLayers?
Why won't GeoJSON load?Openlayers 3 GeoJson save and loadMarkerCluster don't work with geojson layer in leafletDisplaying geographic information from Geoserver in Drupal through openlayers moduleError loading geoJSON into map using OpenLayers v4.2.0Reprojecting features in vector layerBounding box coordinates and strange WMS behavior
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{
margin-bottom:0;
}
I'm using GeoServer for serving map in the GeoJSON format. I din't find any working example. Here is my code snippet.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/css/ol.css"
type="text/css">
<style>
.map {
height: 85vh;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<!-- <h2>My Map</h2> -->
<div id="map" class="map"></div>
<script type="text/javascript">
var views = new ol.View({
center: ol.proj.fromLonLat([84.1240, 28.3949]),
// projection: 'EPSG:4326',
zoom: 7,
// rotation: -Math.PI / 8,
})
var base_layer = new ol.layer.Tile({
source: new ol.source.OSM()
})
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function (extent) {
return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%3Aprovince_boundary&maxFeatures=50&outputFormat=application%2Fjson&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326';
},
strategy: new ol.loadingstrategy.bbox()
});
var province_boundary = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 3
})
})
})
var map = new ol.Map({
layers: [base_layer, province_boundary],
target: 'map',
view: views
})
</script>
</body>
</html>
URL is working perfectly in the postman but not in the OpenLayers. Did I miss anything?
openlayers geojson
edited 6 hours ago
TomazicM
3,9234 gold badges12 silver badges23 bronze badges
asked 9 hours ago
Sandeep Prasad KushwahaSandeep Prasad Kushwaha
184 bronze badges
New contributor
Sandeep Prasad Kushwaha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment
|
I'm using GeoServer for serving map in the GeoJSON format. I din't find any working example. Here is my code snippet.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/css/ol.css"
type="text/css">
<style>
.map {
height: 85vh;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<!-- <h2>My Map</h2> -->
<div id="map" class="map"></div>
<script type="text/javascript">
var views = new ol.View({
center: ol.proj.fromLonLat([84.1240, 28.3949]),
// projection: 'EPSG:4326',
zoom: 7,
// rotation: -Math.PI / 8,
})
var base_layer = new ol.layer.Tile({
source: new ol.source.OSM()
})
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function (extent) {
return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%3Aprovince_boundary&maxFeatures=50&outputFormat=application%2Fjson&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326';
},
strategy: new ol.loadingstrategy.bbox()
});
var province_boundary = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 3
})
})
})
var map = new ol.Map({
layers: [base_layer, province_boundary],
target: 'map',
view: views
})
</script>
</body>
</html>
URL is working perfectly in the postman but not in the OpenLayers. Did I miss anything?
openlayers geojson
edited 6 hours ago
TomazicM
3,9234 gold badges12 silver badges23 bronze badges
asked 9 hours ago
Sandeep Prasad KushwahaSandeep Prasad Kushwaha
184 bronze badges
New contributor
Sandeep Prasad Kushwaha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment
|
I'm using GeoServer for serving map in the GeoJSON format. I din't find any working example. Here is my code snippet.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/css/ol.css"
type="text/css">
<style>
.map {
height: 85vh;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<!-- <h2>My Map</h2> -->
<div id="map" class="map"></div>
<script type="text/javascript">
var views = new ol.View({
center: ol.proj.fromLonLat([84.1240, 28.3949]),
// projection: 'EPSG:4326',
zoom: 7,
// rotation: -Math.PI / 8,
})
var base_layer = new ol.layer.Tile({
source: new ol.source.OSM()
})
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function (extent) {
return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%3Aprovince_boundary&maxFeatures=50&outputFormat=application%2Fjson&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326';
},
strategy: new ol.loadingstrategy.bbox()
});
var province_boundary = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 3
})
})
})
var map = new ol.Map({
layers: [base_layer, province_boundary],
target: 'map',
view: views
})
</script>
</body>
</html>
URL is working perfectly in the postman but not in the OpenLayers. Did I miss anything?
openlayers geojson
edited 6 hours ago
TomazicM
3,9234 gold badges12 silver badges23 bronze badges
asked 9 hours ago
Sandeep Prasad KushwahaSandeep Prasad Kushwaha
184 bronze badges
New contributor
Sandeep Prasad Kushwaha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I'm using GeoServer for serving map in the GeoJSON format. I din't find any working example. Here is my code snippet.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/css/ol.css"
type="text/css">
<style>
.map {
height: 85vh;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<!-- <h2>My Map</h2> -->
<div id="map" class="map"></div>
<script type="text/javascript">
var views = new ol.View({
center: ol.proj.fromLonLat([84.1240, 28.3949]),
// projection: 'EPSG:4326',
zoom: 7,
// rotation: -Math.PI / 8,
})
var base_layer = new ol.layer.Tile({
source: new ol.source.OSM()
})
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function (extent) {
return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%3Aprovince_boundary&maxFeatures=50&outputFormat=application%2Fjson&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326';
},
strategy: new ol.loadingstrategy.bbox()
});
var province_boundary = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 3
})
})
})
var map = new ol.Map({
layers: [base_layer, province_boundary],
target: 'map',
view: views
})
</script>
</body>
</html>
URL is working perfectly in the postman but not in the OpenLayers. Did I miss anything?
openlayers geojson
openlayers geojson
edited 6 hours ago
TomazicM
3,9234 gold badges12 silver badges23 bronze badges
asked 9 hours ago
Sandeep Prasad KushwahaSandeep Prasad Kushwaha
184 bronze badges
New contributor
Sandeep Prasad Kushwaha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 6 hours ago
TomazicM
3,9234 gold badges12 silver badges23 bronze badges
asked 9 hours ago
Sandeep Prasad KushwahaSandeep Prasad Kushwaha
184 bronze badges
New contributor
Sandeep Prasad Kushwaha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 6 hours ago
TomazicM
3,9234 gold badges12 silver badges23 bronze badges
edited 6 hours ago
TomazicM
3,9234 gold badges12 silver badges23 bronze badges
edited 6 hours ago
TomazicM
3,9234 gold badges12 silver badges23 bronze badges
3,9234 gold badges12 silver badges23 bronze badges
asked 9 hours ago
Sandeep Prasad KushwahaSandeep Prasad Kushwaha
184 bronze badges
New contributor
Sandeep Prasad Kushwaha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 9 hours ago
Sandeep Prasad KushwahaSandeep Prasad Kushwaha
184 bronze badges
asked 9 hours ago
Sandeep Prasad KushwahaSandeep Prasad Kushwaha
184 bronze badges
184 bronze badges
New contributor
Sandeep Prasad Kushwaha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Sandeep Prasad Kushwaha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment
|
add a comment
|
1 Answer
1
active
oldest
votes
OpenLayers passes the extent in view projection units so you should use that if your server supports it (otherwise you would need to transform the extent to EPSG:4326)
url: function (extent, resolution, projection) {
return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%3Aprovince_boundary&maxFeatures=50&outputFormat=application%2Fjson&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',' + projection.getCode();
answered 9 hours ago
MikeMike
4,3481 gold badge4 silver badges11 bronze badges
add a comment
|
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "79"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sandeep Prasad Kushwaha is a new contributor. Be nice, and check out our Code of Conduct.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f338595%2fhow-to-load-geojson-data-in-openlayers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
OpenLayers passes the extent in view projection units so you should use that if your server supports it (otherwise you would need to transform the extent to EPSG:4326)
url: function (extent, resolution, projection) {
return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%3Aprovince_boundary&maxFeatures=50&outputFormat=application%2Fjson&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',' + projection.getCode();
answered 9 hours ago
MikeMike
4,3481 gold badge4 silver badges11 bronze badges
add a comment
|
OpenLayers passes the extent in view projection units so you should use that if your server supports it (otherwise you would need to transform the extent to EPSG:4326)
url: function (extent, resolution, projection) {
return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%3Aprovince_boundary&maxFeatures=50&outputFormat=application%2Fjson&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',' + projection.getCode();
answered 9 hours ago
MikeMike
4,3481 gold badge4 silver badges11 bronze badges
add a comment
|
OpenLayers passes the extent in view projection units so you should use that if your server supports it (otherwise you would need to transform the extent to EPSG:4326)
url: function (extent, resolution, projection) {
return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%3Aprovince_boundary&maxFeatures=50&outputFormat=application%2Fjson&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',' + projection.getCode();
answered 9 hours ago
MikeMike
4,3481 gold badge4 silver badges11 bronze badges
OpenLayers passes the extent in view projection units so you should use that if your server supports it (otherwise you would need to transform the extent to EPSG:4326)
url: function (extent, resolution, projection) {
return 'http://localhost:8080/geoserver/misproject/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=misproject%3Aprovince_boundary&maxFeatures=50&outputFormat=application%2Fjson&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',' + projection.getCode();
answered 9 hours ago
MikeMike
4,3481 gold badge4 silver badges11 bronze badges
answered 9 hours ago
MikeMike
4,3481 gold badge4 silver badges11 bronze badges
answered 9 hours ago
MikeMike
4,3481 gold badge4 silver badges11 bronze badges
answered 9 hours ago
MikeMike
4,3481 gold badge4 silver badges11 bronze badges
4,3481 gold badge4 silver badges11 bronze badges
add a comment
|
add a comment
|
Sandeep Prasad Kushwaha is a new contributor. Be nice, and check out our Code of Conduct.
Sandeep Prasad Kushwaha is a new contributor. Be nice, and check out our Code of Conduct.
Sandeep Prasad Kushwaha is a new contributor. Be nice, and check out our Code of Conduct.
Sandeep Prasad Kushwaha is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Geographic Information Systems Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f338595%2fhow-to-load-geojson-data-in-openlayers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
