Lazy load mapbox/pass mapbox object in

[ferk6a]

So, I have a script to add the mapbox API to my app lazily. That means that it only gets added to the document once a specific view is added. 0.1.x versions of vue-mapbox allowed for a delayed Vue.use loading which made this work, however in 0.2.x, it directly imports mapbox-gl making this impossible.

This is a bit troublesome, but the dependency inversion principle in this case is very important.

[soal]

Well, it would be possible to implement passing mapbox-gl as a prop to MglMap.
Would it be enough?

[ferk6a]

I think so yes.

The thing is this line:

vue-mapbox/src/components/map/GlMap.vue

Line 9 in 0cf07c5

import Mapbox from "mapbox-gl";

It has to be "removed", i.e., converted into a dynamic import():

created () {
  this.mapboxPromise = this.mapboxGl ? Promise.resolve(this.mapboxGl) : import('mapbox-gl')
}

// ...

$_loadMap () {
  return this.mapboxPromise.then(mapbox => {
    this.mapbox = mapbox
    return new Promise(resolve => {
      // ...
    })
  })
}

So that it only happens if the user doesn't pass in anything.

[Erutan409]

@soal What would be a good way to avoid pulling in the entire mapbox-gl package during a webpack/babel compile? This is a lot of boilerplate for something I'm loading from a CDN, already.

With my current configuration, it's extracting out that asset into an obscure zero-based incremented javascript file at the root of my public build folder. I'm curious if you know a straight-forward way of avoiding that all together.

Edit

Hmm, so using the extraction functionality and just targeting mapbox-gl seems to achieve what I'm looking for. So, I'll go that route.

[ViachaslauBohdan]

@soal @fer22f @Erutan409
Guys, can you explain why mapboxGL param is needed. Because anyhow with pure v-if wrapper the map is loaded lazily

[ferk6a]

@soal @fer22f @Erutan409
Guys, can you explain why mapboxGL param is needed. Because anyhow with pure v-if wrapper the map is loaded lazily

I no longer use this package and sorry for the late response, but the problem is that vue-mapbox previously made an import at the top of the file, and we would like to use the CDN instead of bundling the Mapbox API. The prop made this possible.