I recently incorporated the ol package into my vue-cli project by running
npm install ol
Unfortunately, despite adding the package, the map is not loading. No errors are displayed and all I see is an empty div in the source result.
Here is a snippet of my code:
The HTML section :
<div id="map-container"></div>
The JavaScript portion :
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
export default {
name: "page",
data() {
return {
...
}
},
methods: {
initMap: function () {
new Map({
target: 'map-container',
view: new View({
center: [0, 0],
zoom: 2
})
});
},
mounted: function () {
this.initMap();
},
}
NOTE => Some sources suggested calling the initialize function like this:
this.$nextTick(function () {
initMap();
})
However, this adjustment did not yield any changes.
I am pressed for time and would greatly appreciate any assistance. Thank you to everyone willing to help.