why openlayers map not working in vue-cli 3

Question

I have added ol package to my vue-cli project through

npm install ol

but the map doesn't load. there is no error and I just find an empty div in the result source.

here is my code =>

the html part :

<div id="map-container"></div>

the js part :

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 where I found that I have to call init function as :

this.$nextTick(function () {
            initMap();
        })

but it made no difference.

guys, I'm running out of time so pls help me. thanks everybody who wanna help

no one? !!! no idea ?

Mostafa Shakoori
– Mostafa Shakoori

2018-10-14 12:07:46 +00:00
Commented Oct 14, 2018 at 12:07 — Mostafa Shakoori
– Mostafa Shakoori, Commented Oct 14, 2018 at 12:07

MichaelRom · Accepted Answer · 2019-01-31 13:15:39Z

3

It looks like you are missing a TileLayer. Something like this:

new Map({
  target: "map-container",
  layers: [
    new TileLayer({
      source: new XYZ({
        url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

answered Jan 31, 2019 at 13:15

MichaelRom

1671 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

why openlayers map not working in vue-cli 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related