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>
