-1

Following exactly the example of the openlayers site in:

https://openlayers.org/en/latest/examples/box-selection.html?q=feature

Locally I have the following error:

Uncaught SyntaxError: Unexpected token <in JSON at position 0
    at JSON.parse (<anonymous>)
    at getObject (JSONFeature.js: 197)
    at GeoJSON.JSONFeature.readFeatures (JSONFeature.js: 53)
    at VectorSource. <anonymous> (featureloader.js: 94)

I believe the error comes from trying to load a geojson file locally.

var vectorSource = new VectorSource ({
  url: 'data/geojson/countries.geojson',
  format: new GeoJSON ()
});

countries.geojson: https://r68tk.csb.app/data/geojson/countries.geojson

enter image description here

How to solve?

Fabio Sodre
  • 339
  • 3
  • 11
  • 1
    https://r68tk.csb.app/box-selection.html is working correctly for me., However https://r68tk.csb.app/data/box-selection.html also runs the application but doesn't work correctly as it tries to load https://r68tk.csb.app/data/data/geojson/countries.geojson – Mike Nov 11 '19 at 10:41
  • curious to be working for you if you are with this version 6 – Fabio Sodre Nov 15 '19 at 17:17

1 Answers1

0

I found the solution.

In the process of developing an application in OpenLayers, unfortunately there are problems loading files locally (geojson, png etc.) due to CORS.

The problem: enter image description here

An excellent text on the subject here.

To solve the problem, I used the Chrome extension called "moesif CORS extension".

With it enabled, I could easily load the .geojson file.

It was a success! enter image description here

There are even more ways to stop CORS for your development environment at this address: https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow -origin-works-d97d55946d9

I hope to help someone with this information!

Fabio Sodre
  • 339
  • 3
  • 11