0

I am working on an openlayers map to add a vector layer with the source of the local geojson and gpx file in a Vuejs project, but the vector layer cannot be displayed. I tested outside of Vue.js and I have the same problem.

Voici le code : 

// classes required to display the map
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'

// Feature format for reading and writing data in the GPX format.
import GPX from 'ol/format/GPX'

// Feature format for reading and writing data in the GeoJSON format.
import GeoJSON from 'ol/format/GeoJSON'

// Provides a source of features for vector layers.
import VectorSource from 'ol/source/Vector'

// Vector data that is rendered client-side.
import VectorLayer from 'ol/layer/Vector'

// Openstreet Map Standard
const openStreetMapLayer = new TileLayer({
  source: new OSM(),
})

// Vector data source in GeoJSON format
const vectorGeoJSON = new VectorLayer({
  source: new VectorSource({
    url: 'data/pays.geojson',
    format: new GeoJSON()
  })
})

// Vector data source in GPX format
const vectorGPX = new VectorLayer({
  source: new VectorSource({
    url: 'data/capitales.gpx',
    format: new GPX()
  })
})

// declare the map 
new Map({
  layers: [openStreetMapLayer, vectorGPX, vectorGeoJSON],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
})

for the geojson file receive this 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)

and for the gpx file no error but nothing is displayed.

I tried to add a style but the result remains the same.

I created a simple example with parcel + openlayers reproducing the problemici

I looked at the doc + the openlayers examples and I don't see what is causing the problem in my code?

yes i already tried to specify the full path. I also renamed in .json and it doesn't work. The code seems correct because I tried with the following code and it works. I do not understand why it does not work with the local file. Maybe you need to add a configuration in parcel or even webpack or vuejs?

this works :

// Vector data source in GeoJSON format
const vectorGeoJSON = new VectorLayer({
  source: new VectorSource({
    url: 'https://raw.githubusercontent.com/sandix34/Openlayers-test-workshop/master/data/pays.geojson',
    format: new GeoJSON()
  })
})

// Vector data source in GPX format
const vectorGPX = new VectorLayer({
  source: new VectorSource({
    url: 'https://raw.githubusercontent.com/sandix34/Openlayers-test-workshop/master/data/capitales.gpx',
    format: new GPX()
  })
})
sandrine
  • 43
  • 7
  • Either the relative path to `pays.geojson` is incorrect or the server's MIME type for `.geojson` needs to be set up. Try specifying the full path, and/or renaming to `.json` – Mike Dec 18 '19 at 16:41

2 Answers2

1

Just copy the data folder and inside files into dist folder.

This problem happens because your application can't find the data folder. npm run start serve your application build (dist folder) on localhost:1234. The question is "Is there any data folder in localhost:1234 ?" or "Can I access my data via localhost:1234/data ?".

To solve this problem as mention above you need to copy the whole data folder into the dist folder.

Mahdi Mahmoodian
  • 473
  • 2
  • 13
0

In vue.js I moved the data folder to the public folder and the correct relative path is url: '../data/pays.geojson'.I deployed the application with netlify and it works. Thank you for your answers which helped me to find the solution.

sandrine
  • 43
  • 7