Nativescript Angular 2 issue while using MapBox inside the HTML

[tsonevn]

The case is the following.
I have registered new Element inside the main.ts file using registerElement method.

main.ts file

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

Then I have try to use this element inside my HTML file as follow.
app.component.html

<GridLayout>
<Map
    accessToken="ACCESS_TOKEN"
    width="250" 
    height="150"  
    latitude="52.3702160"
    longitude="4.8951680"
    zoomLevel="3"
    mapStyle="light"
    hideAttribution="false"
   showUserLocation="true"
   hideCompass="false"></Map>
</GridLayout>

However on the screen will be show black box even, when the accessToken has been insert. The only way to use this component inside the NS Angular 2 project is to do from code behind, but the Component will be displayed above the other components.

[EddyVerbruggen]

Can you try without the width and height params?

[tsonevn]

After removing the width and height the problem still exists and on the screen will be shown black box. Regarding to that in case you do not set height to the component in iOS the height will be zero by default.

[EddyVerbruggen]

You can wrap it in a ContentView and set the width and height params there, see the demo for possible usage.

Note that at the moment on iOS you can only use the XML properties listed in the readme.

[tsonevn]

Hi @EddyVerbruggen,
I reviewed once again this scenario and use ContentView for main container for MapBox, but still have the same problem. I made sample project where the problem could be reproduced on iOS. Could you verify, whether I have missed something or it is real problem for NativeScritp Angular 2 project.

[EddyVerbruggen]

Thanks for that demo project! Testing and debugging it now. Seems like the timing in an Angular context is a bit different and the plugin needs to be adapted for that. Will report back..

[tsonevn]

Hi @EddyVerbruggen,

I have just tested the plugin on Android and the same behavior has been reproduced. I upgrade the sample project and add following line <service android:name="com.mapbox.mapboxsdk.telemetry.TelemetryService" /> in AndroidManiest.xml file. sample project.

Regards,
@tsonevn

[EddyVerbruggen]

Hmm, I assumed this issue was about iOS which was fixed in 2.2.4, have you tried that as well?

I can imagine Android still has the same issue indeed.

[tsonevn]

I tried it with the new version 2.2.4 in Android and the same problem appears

[EddyVerbruggen]

Please see my previous comment.

[tsonevn]

Now on iOS it works as expected, however on Android it always give me the warning that I should add accessToken, which has been already included - > https://github.com/tsonevn/NGMapBoxTest/blob/master/app/app.component.html#L4

[EddyVerbruggen]

Thanks for testing iOS, that's what has been fixed so far. Like I said: I didn't test nor fix Android yet.

[EddyVerbruggen]

I've now applied a similar fix for Android - can you try the latest version from GitHub? Seems to work great with your demo app.

[tsonevn]

Thanks, I will try it and will write you back.

[tsonevn]

I tested the plugin latest version from GitHub and now it seems to work as expected for both Android and iOS.

[EddyVerbruggen]

That's great news, thanks for confirming it so quickly! I'll push 2.3.0 to npm later today so everyone can easily get this fix.