I have validated the JSON and I'm certain it is clean. I'm loading it from a web server (using Node.js). The Firefox error is "Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data". Chrome reports the unexpected character to be "<".
It appears that the payload from the call to JSON.parse is the application's index.html file rather than the data file, but I may be interpreting this wrong.
Am I missing something obvious?
I've stripped the code back to as simple as I can for now:
index.js
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import GeoJSON from 'ol/format/GeoJSON';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {fromLonLat} from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
//CONFIG
const initmapcenter = [-124.01901771596816, 54.018354087405754 ];
const dataurl = './data/SABoundarygeo.json';
// Polygons style
function polygonStyleFunction(feature, resolution) {
return new Style({
stroke: new Stroke({
color: 'blue',
width: 1,
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)',
}),
});
}
// Vector layer from a GeoJson file url
var vectorPolygons = new VectorLayer({
source: new VectorSource({
format: new GeoJSON(),
url: dataurl
})
// , style: polygonStyleFunction
});
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
}),
vectorPolygons
],
view: new View({
center: fromLonLat(initmapcenter),
zoom: 5
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 80%;
max-width: 1200px;
height: 800px;
margin:auto;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>
-
2Have a look in the browsers debugger network section and see what is the result of json file request.TomazicM– TomazicM2021年03月26日 09:04:38 +00:00Commented Mar 26, 2021 at 9:04
-
make sure the json is accessible at the URL you have specified.JGH– JGH2021年03月26日 12:11:06 +00:00Commented Mar 26, 2021 at 12:11
-
@TomazicM - The JSON file seems to be acquired successfully (code 200) but under XHR the payload for the JSON looks like the index.html instead of the json contents. This would make the google error makes sense when it says it is seeing a "<" as the first character.G McLeod– G McLeod2021年03月26日 18:20:52 +00:00Commented Mar 26, 2021 at 18:20
-
@JGH - yes it is. It is local to the site under a data directory. No cross-domain or permissions issues.G McLeod– G McLeod2021年03月26日 18:20:55 +00:00Commented Mar 26, 2021 at 18:20
-
1Again: have a look in the browsers debugger network section and see what is the result of json file request. If it's not your GeoJSON but something else, then this is server side/node.js problem.TomazicM– TomazicM2021年03月27日 11:04:20 +00:00Commented Mar 27, 2021 at 11:04
1 Answer 1
Having packaged the code and copied it to a production server it worked without issue. I have to conclude that there is something about the Node environment that is preventing the loading of the JSON file. I'll need to find an alternative configuration.
Thank you for your help.