Cannot read property 'getLocationServices' of undefined

[xeaon]

Hi,

i'm trying to add a mapbox to my view (android). My view uses the RadSideDrawer from Telerik UI (actually I'm using nativescriptng2drawerseed) and implements OnInit.

I've used @nraboy's demo app nativescript-photos-near-me to get into everything. Seemed to be pretty easy, however I'm experiencing some issues.

What i did:

app.module.ts

var map = require("nativescript-mapbox");
registerElement("Mapbox", () => map.Mapbox);

home.page.xml

<ContentView height="240" width="240">
            <Mapbox
            accessToken="MY_API_KEY"
            height="240"
            latitude="52.3702"
            longitude="4.8951"
            zoomLevel="3"
            mapStyle="light"
            showUserLocation="true"
            hideCompass="false"
            (mapReady)="onMapReady($event)">
            </Mapbox>
        </ContentView>

home.page.ts

...
public onMapReady(args) {
    this.mapbox = args.map;
}
...

AndroidManifest.xml
First issue: my app doesn't start, if I add

<service android:name="com.mapbox.mapboxsdk.telemetry.TelemetryService" />

in AndroidManifest.xml. Instead, i have to use

<service android:name="com.mapbox.services.android.telemetry.service.TelemetryService" />

After adding the "right" service, the map shows on my view (without location marker) but as soon as the location permissions are granted, I'm getting following TypeError:

JS: Unhandled Promise rejection: Cannot read property 'getLocationServices' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'getLocationServices' of undefined TypeError: Cannot read property 'getLocationServices' of undefined
JS:     at Object.mapbox._showLocation (file:///data/data/org.nativescript.nativescriptng2drawerseed/files/app/tns_modules/nativescript-mapbox/mapbox.js:189:75)
JS:     at file:///data/data/org.nativescript.nativescriptng2drawerseed/files/app/tns_modules/nativescript-mapbox/mapbox.js:57:28
JS:     at ZoneDelegate.invoke (file:///data/data/org.nativescript.nativescriptng2drawerseed/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:190:28)
JS:     at Zone.run (file:///data/data/org.nativescript.nativescriptng2drawerseed/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:83:43)
JS:     at file:///data/data/org.nativescript.nativescriptng2drawerseed/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:449:57
JS:     at ZoneDelegate.invokeTask (file:///data/data/org.nativescript.nativescriptng2drawerseed/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:223:37)
JS:     at Zone.runTask (file:///data/data/org.nativescript.nativescriptng2drawerseed/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:123:47)
JS:     at drainMicroTaskQueue (file:///data/data/org.nativescript.nativescriptng2drawerseed/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:355:35)
JS: Error: Uncaught (in promise): TypeError: Cannot read property 'getLocationServices' of undefined

Did i miss something?

Thank you in advance!

[GrEg00z]

I get exactly the same problem, with nativescript angular.

But the thing very strange is : when I have installed the mapBox plugin, few weeks ago, everything worked good !
And few days ago, I made a tns run android (as I use to do, when I need it),
And Bam ! My app doesnt want to start again !! Because telemetry mapbox Error !?!?
So I had to add <service android:name="com.mapbox.services.android.telemetry.service.TelemetryService" /> in my Android Manifest to make the app works (but before this tns build, "mapbox and location" worked perfectly)

The worst is I didn't upgrade or changed version of plugin of my app before the bug appear !!! (I use 2.5.1 version)

And since this moment, location was unavailable when showUserLocation="true", and get the same error as above.

[simonettoa]

Same error here...

[GrEg00z]

Anybody help us !! Still not possible to show our location marker (in real time)

[xeaon]

@GrEg00z you can still use nativescript-geolocation to get the location in "realtime" and and update the map, if the location changes.

[nraboy]

Hey @EddyVerbruggen,

It seems that when I wrote the example in question everything worked fine, but in recent updates, whether that be to NativeScript or the Mapbox plugin, things started to break with the errors listed in this thread.

I've tested this in Android and can validate the accuracy.

Best,

[EddyVerbruggen]

One really annoying thing about the Mapbox SDK (especially on Android) they tend to move classes around (package-wise) a lot.

That's the case for TelemetryService which is fixed in 2.5.2 and perhaps for LocationServices as well. Taking a look..

[EddyVerbruggen]

Yep, LocationServices was removed, that's what causes "Cannot read property 'getLocationServices' of undefined".

Usually I pin to a specific version but I needed the 5.x SDK in the last update but it was still a snapshot release at the time. They've actually released a stable beta of 5.x so I'll pin to that and see if all works correctly.

[nraboy]

Thanks @EddyVerbruggen !

[EddyVerbruggen]

You're welcome @nraboy - I've now updated the locationservices stuff as well. I must say this is a much better implementation than it ever was on Android; the Mapbox SDK needed you to draw your own location marker on Android, whereas on iOS it was all managed internally by Mapbox. Android is on par with iOS now.

Please update the plugin from GitHub as this fix is not on npm yet. If one of you guys can confirm all is well after the update then I'll push it to npm. Note that you should remove and readd the Android platform folder to avoid lingering Mapbox SDK files.

One issue I found (and will fix tomorrow) is that adding markers seems broken.

[shyandsy]

is this mean I must use nativescript angular ?

I am using typescript, but there is no registerElement available

[EddyVerbruggen]

@shyandsy no, there's no need for Angular at all. Just follow these instructions.

[EddyVerbruggen]

Found why the markers no longer worked: a method was removed from the Mapbox SDK, so I'm now using a different one.

[nraboy]

Hey @EddyVerbruggen,

I can confirm the errors went away on Android. There was an application crash without error, but I think my simulator might be botched. I'll open a new ticket if it continues. It only happened once.

Please push the fix to NPM.

Thanks,

[EddyVerbruggen]

It's on npm.

[GrEg00z]

Works great !

Thanks @EddyVerbruggen