Is it possible to add OpenLayers library to vue-cli 3

Question

I'm trying to implement Openlayers with vue-cli-3 but it seems that somehow I can't do it right, I'm missing something.

First, I installed vue cli

npm install @vue/cli -g

Then I added additional dependencies or to be more precise OpenLayers library.

npm install ol.

But I'm somehow failing in adding/registering dependencies in registering ol globally (in main.js file)

In my App.vue file when I import files like this it doesn't work. I'm getting this two errors

[Vue warn]: Error in nextTick: "ReferenceError: ol is not defined"

ReferenceError: ol is not defined

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

export default {

  data() {
    return {
      testing: 'SomeTests',
    }
  },
  mounted() {
    this.$nextTick(function () {
      initMap();
    })
  }
}
function initMap() {
  var myMap = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2,
    })
  })
};

But when I include script and link tag in my index.html then code above works normally.

<head>
  <link rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
  <title>ol-basic</title>
</head>

My question is this. Is it possible to just import elements as it is recommended on ol page with using modules and is it possible to somehow register ol package globally in my main.js file

Svinjica · Accepted Answer · 2018-09-12 19:23:25Z

1

Ok, after additional consultation I've finally figure it out. Here it is working example, hope it helps someone.

// Import everything from ol
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

function initMap() {
  new Map({
    target: 'map',
    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 Sep 12, 2018 at 19:23

Svinjica

2,5593 gold badges44 silver badges73 bronze badges

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

Comments

Abid Hasan · Accepted Answer · 2018-09-11 21:46:23Z

0

You're never importing ol, which is it is undefined, thereby giving you those errors. Try the following:

// Import everything from ol
import * as ol from 'ol';

// The OSM and TileLayer API is taken from the OpenLayers API.
function initMap() {
  var myMap = new ol.Map({
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2,
    })
  })
}

I tried it in a quick Vue project, and the function runs without any reference errors

answered Sep 11, 2018 at 21:46

Abid Hasan

6684 silver badges10 bronze badges

3 Comments

Svinjica Over a year ago

Hmm, I ll try this at home. But if I understood correctly you could only import modules that you need as it is recommended on official site openlayers.org/en/latest/doc/tutorials/bundle.html

Svinjica Over a year ago

And of course, thank you for your effort and time :)

Abid Hasan Over a year ago

If you want to do it that way, you can import the modules you need too! import { Map, TileLayer, OSM, View } from 'ol'

Collectives™ on Stack Overflow

Is it possible to add OpenLayers library to vue-cli 3

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related