0

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>
7
  • 1
    Have a look in the browsers debugger network section and see what is the result of json file request.
    – TomazicM
    Commented Mar 26, 2021 at 9:04
  • make sure the json is accessible at the URL you have specified.
    – JGH
    Commented 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
    Commented 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
    Commented Mar 26, 2021 at 18:20
  • The two comments you wrote seems contradictory... (ex: return the default page if a resource / route / parameter is not found, return the default page for "exotic" extensions etc)
    – JGH
    Commented Mar 26, 2021 at 18:29

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.