Nativescript-vue declaring a map in code.

Currently is there any way to declare the nativescript-mapbox map via code using the nativescript-vue framework?

I have followed this tutorial https://www.nativescript.org/blog/include-feature-rich-maps-in-a-nativescript-vue-app-with-mapbox to get my project up and running but this only explains the xml implementation.

I know you have the available options/methods of the xml map written below the table but perhaps something near the top of the documentation about how the XML implementation is incomplete would have saved me a lot of time.

When trying to implement a map via code I have tried any of the following to import nativescript-mapbox in order to declare a map programmatically, all of which have failed.

At the top of the script section of the component I have tried using

import mapbox from 'nativescript-mapbox'
import * as mapbox from 'nativescript-mapbox'
import {Mapbox} from 'nativescript-mapbox

I have also tried including these names in the data section

mapbox: require('nativescript-mapbox'),
mapbox: require('nativescript-mapbox').Mapbox

please note each line is a seperate attempt at importing this. all of which result in NativeScript encountered a fatal error: TypeError: nativescript_mapbox__WEBPACK_IMPORTED_MODULE_2__["listOfflineRegions"] is not a function when trying to use any of the methods listed in the documentation (listOfflineRegions shown, but does the same with any of the functions). however the object is present so something is indeed being imported it just seems incomplete or not aligned with the documentation…

[lochstar]

I’ve just tested this out in my own project.

Firstly, you can put the listOfflineRegions call in your loadMap function, so you don’t run in to the timing issue.

Secondly, you can call listOfflineRegions and downloadOfflineRegion using args.map.mapbox.listOfflineRegions and args.map.mapbox.downloadOfflineRegion.

To test this, I downloaded the current viewport, unloaded the mapview, turned on aeroplane mode and reloaded the mapview. The map correctly shows until I zoom in/out of the downloaded viewport.

[lochstar]

I’ve got this working with NativeScripe-Vue.

// import
import { Mapbox } from 'nativescript-mapbox'

// use in component
const map = new Mapbox()
map.show({...options})

Although, I use the XML implementation, it allows for more control over the position and placement of the map. You should be able to do everything you need once you have the map reference that you get via @mapReady.