Currently, I am facing an issue with displaying a vector layer on an openlayers map using the source of local geojson and gpx files in my Vuejs project. Unfortunately, even when testing outside of Vue.js, the vector layer is not being displayed.
Here is the code snippet:
// Necessary classes for map display
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 GPX data
import GPX from 'ol/format/GPX'
// Feature format for GeoJSON data
import GeoJSON from 'ol/format/GeoJSON'
// Source of features for vector layers
import VectorSource from 'ol/source/Vector'
// Client-side rendering of vector data
import VectorLayer from 'ol/layer/Vector'
// Standard Openstreet Map layer
const openStreetMapLayer = new TileLayer({
source: new OSM(),
})
// GeoJSON vector data source
const vectorGeoJSON = new VectorLayer({
source: new VectorSource({
url: 'data/pays.geojson',
format: new GeoJSON()
})
})
// GPX vector data source
const vectorGPX = new VectorLayer({
source: new VectorSource({
url: 'data/capitales.gpx',
format: new GPX()
})
})
// Initialize the map
new Map({
layers: [openStreetMapLayer, vectorGPX, vectorGeoJSON],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
})
When attempting to load the geojson file, this error occurs:
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)
For the gpx file, there are no errors but nothing is being displayed on the map.
I have tried adding a style, but the result remains unchanged.
I have created a simple example using parcel + openlayers to replicate the issuehere
After reviewing the documentation and openlayers examples, I am unable to determine what is causing the problem in my code.
Yes, I have already attempted specifying the full path.
I also renamed the file to .json but it did not resolve the issue.
The code appears to be correct as I tested with the following code that works fine.
I am unsure why it does not work with the local files. Could it be a configuration issue with parcel, webpack, or vuejs?
The following code works:
// GeoJSON vector data source
const vectorGeoJSON = new VectorLayer({
source: new VectorSource({
url: 'https://raw.githubusercontent.com/sandix34/Openlayers-test-workshop/master/data/pays.geojson',
format: new GeoJSON()
})
})
// GPX vector data source
const vectorGPX = new VectorLayer({
source: new VectorSource({
url: 'https://raw.githubusercontent.com/sandix34/Openlayers-test-workshop/master/data/capitales.gpx',
format: new GPX()
})
})