yermo/nativescript-mapbox

:statue_of_liberty: :tokyo_tower: :mount_fuji: Native OpenGL powered Maps, by Mapbox

nativescript-mapbox's Issues

Not working

when i click show the app stops with an error

Implement FitToBounds

It looks like the MapBox SDK supports fitting the map to an array of geolocation points. It would be nice if we could do this by passing an array of markers so the map zooms to fit the markers. I believe the proper API is visibleCoordinateBounds.

https://www.mapbox.com/ios-sdk/api/3.3.1/Classes/MGLMapView.html#/c:objc(cs)MGLMapView(py)visibleCoordinateBounds

Add click event on marker

Is it possible to run a click handler when a specific marker's box is clicked?

10x.

'Zoom' attribute error

platforms\android\build\intermediates\exploded-aar\Common-2015.3.1307-trial-release\res\values\values.xml:2 : Attribute "zoom" has already been defined

Unable to start activity ComponentInfo:Failed to find module 'Crypto'

I have installed a request node package via npm.The dependency have been updated in package.json.But when I injected the package like this

var request=require('request');

I am getting the above error.What I can do?

Remove Markers Function

Hi.

Checking the functionality of the library I see that there is a method that adds markers to the map. It strikes me that there is no method to clear the contents of the markers, or remove any of them.

I think it would be very useful that the library existed a similar method.

Happy coding!

How to get Directions / Routes?

Not show map in demo

I’m testing the demo but home although I copied my accessToken of MapBox, not can see the map in the application, only the action buttons.

I'm using genymotion for testing and galaxy S3 image for run it.

When put in show button the app crashes:

In console shows:

Project successfully built Successfully deployed on device with identifier '192.168.57.101:5555'. E/FusionEngine( 1295): at com.tns.Runtime.callJSMethodNative(Native Method) E/FusionEngine( 1295): at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861) E/FusionEngine( 1295): at com.tns.Runtime.callJSMethodImpl(Runtime.java:726) E/FusionEngine( 1295): at com.tns.Runtime.callJSMethod(Runtime.java:712) E/FusionEngine( 1295): at com.tns.Runtime.callJSMethod(Runtime.java:693) E/FusionEngine( 1295): at com.tns.Runtime.callJSMethod(Runtime.java:683) E/FusionEngine( 1295): at com.tns.Runtime.callJSMethodNative(Native Method) E/FusionEngine( 1295): at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861) E/FusionEngine( 1295): at com.tns.Runtime.callJSMethodImpl(Runtime.java:726) E/FusionEngine( 1295): at com.tns.Runtime.callJSMethod(Runtime.java:712) E/FusionEngine( 1295): at com.tns.Runtime.callJSMethod(Runtime.java:693) E/FusionEngine( 1295): at com.tns.Runtime.callJSMethod(Runtime.java:683) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethodNative(Native Method) E/FusionEngine( 1341): at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethodImpl(Runtime.java:726) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethod(Runtime.java:712) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethod(Runtime.java:693) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethod(Runtime.java:683) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethodNative(Native Method) E/FusionEngine( 1341): at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethodImpl(Runtime.java:726) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethod(Runtime.java:712) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethod(Runtime.java:693) E/FusionEngine( 1341): at com.tns.Runtime.callJSMethod(Runtime.java:683)

I test with a AccessToken of mapbox called "Default public token" and with another token generated in mapbox studio with Mapbox Streets.

I make something wrong?

iOS accessToken in XML not working

Getting this dialog: https://github.com/EddyVerbruggen/nativescript-mapbox/blob/master/mapbox.ios.js#L34

Markup works fine on Android.

<map:Mapbox row="1" col="0" rowSpan="5" colSpan="5" id="map" delay="800" disableRotation="true" mapStyle="streets" mapReady="{{ onMapReady }}" latitude="39.8282" longitude="-98.5795" zoomLevel="3.0" showUserLocation="false" hideLogo="true" hideAttribution="false" accessToken="pk.whatever.GOhome"></map:Mapbox>
       

I'll dig around later and see if I'm missing something obvious

Question: marker tap on iOS simulator

Unfortunately, I don't have an iOS device handy right now. On the simulator should/do the marker taps work? I have the markers rendered for locations and Android everything works fine so just curious if it should be working with the marker opening the callOut so I can get to that event.

Unable to start activity ComponentInfo{org.nativescript.mapboxdemo/com.tns.NativeScriptActivity}

NativeScript: 1.6.2

Today I have checkout your current mapbox demo but I'cant get it running on my system. I get this error (only a part of fully error text, couldn't copy it all).

java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.mapboxdemo/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreate failed

TypeError: Cannot read property 'widgets' of undefined
File: "/data/data/org.nativescript.mapboxdemo/files/app/tns_modules/ui/frame/frame.js, line: 327, column: 39

StackTrace: 
    Frame: function:'NativeActivity.onCreate', file:'/data/data/org.nativescript.mapboxdemo/files/app/tns_modules/ui/frame/frame.js', line: 327, column: 40


    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2416)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476)
    at android.app.ActivityThread.-wrap11(ActivityThread.java)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5417)
    at java.lang.reflect.Method.invoke(Native M[...]

Generally I have amount of experience in software development, but I'm new to nativescript. Maybe is a really simple fault and I don't recognize it ...

Empty black box on iOS

Hey @EddyVerbruggen,

I tried out this plugin today and it works great on Android, but on iOS I’m unfortunately not seeing a map—all I see is a black box.

I’ve tried your demo and my own custom app and I get the same. Any idea what might be up here? The logs tell me that I have permissions and mapbox.show doesn’t log any errors, so I’m not sure what’s up.

Thanks.

NullPointerException when running on Android

Hey @EddyVerbruggen,

Just tried out the plugin and it works great on iOS, but I’m getting the following error on Android:

JS: Error in mapbox.show: Error: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.res.Resources android.content.Context.getResources()' on a null object reference
JS:     android.view.ViewConfiguration.get(ViewConfiguration.java:359)
JS:     android.view.View.<init>(View.java:3587)
JS:     android.view.View.<init>(View.java:3682)
JS:     android.view.ViewGroup.<init>(ViewGroup.java:497)
JS:     android.view.ViewGroup.<init>(ViewGroup.java:493)
JS:     android.view.ViewGroup.<init>(ViewGroup.java:489)
JS:     android.view.ViewGroup.<init>(ViewGroup.java:485)
JS:     android.widget.FrameLayout.<init>(FrameLayout.java:103)
JS:     com.mapbox.mapboxsdk.views.MapView.<init>(MapView.java:685)

Any idea what’s up? I’m testing on an Android 5.x emulator and I have showUserLocation turned off. Here’s the code I’m using:

mapbox.show({
    accessToken: "---MY TOKEN---",
    style: mapbox.MapStyle.EMERALD,
    margins: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 300
    },
    showUserLocation: false,
    hideAttribution: true,
    hideLogo: true,
    hideCompass: true
});

Thanks.

Cannot Place UI elements over viewport

I can't figure out how to draw some Ui elements over the map.
I was using google maps and cordova previously and I could "draw" over a map since it was drawn within a div container.

In this case I don't know which element, if any I can apply some css to in order to draw over the map. Is it even possible to do so?

Map not showing on Android 5.0.1 device

I'm getting exception:

mapbox show error: Error: java.lang.UnsatisfiedLinkError: com.mapbox.mapboxsdk.views.NativeMapView
com.mapbox.mapboxsdk.views.MapView.initialize(MapView.java:787)
com.mapbox.mapboxsdk.views.MapView.(MapView.java:690)
com.tns.Runtime.callJSMethodNative(Native Method)
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861)
com.tns.Runtime.callJSMethodImpl(Runtime.java:726)
com.tns.Runtime.callJSMethod(Runtime.java:712)
com.tns.Runtime.callJSMethod(Runtime.java:693)
com.tns.Runtime.callJSMethod(Runtime.java:683)
com.tns.gen.java.lang.Runnable_ftns_modules_timer_timer_l15_c20__.run(Runnable_ftns_modules_timer_timer_l15_c20__.java:10)
android.os.Handler.handleCallback(Handler.java:739)
android.os.Handler.dispatchMessage(Handler.java:95)
android.os.Looper.loop(Looper.java:135)
android.app.ActivityThread.main(ActivityThread.java:5538)
java.lang.reflect.Method.invoke(Native Method)
java.lang.reflect.Method.invoke(Method.java:372)
com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:958)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:753)

In /tns_modules/nativescript-mapbox/mapbox.js (.android) when trying to create mapView = new com.mapbox.mapboxsdk.views.MapView(application.android.context, settings.accessToken);

I'm with {N} CLI 2.0.1 and modules 2.0.0 version. The funny thing is that the same application works on Nexus 4 (5.0.1), Nexus 5 (6.0.1) , Samsung G. S4 (5.0.1) but it crashes on 3 different Huawei P8 devices with (5.0.1). Can you point me to something?
Thanks

[question] is it possible to deliver a downloaded map within my app ?

for instance , i want to download a map of a certain region in advance , and ship it with app package , save user's time and data connection ! if possible , how should i achieve such goal ?
thank you

Mapbox not working

TNS Version: 2.1.1

When I run "tns livesync ios --emulator --watch" I get the following error messages:

Aug 5 14:51:44 Shivas-Air cngMobileApp[70894]: 1 0x45b82c -[TNSRuntime executeModule:]
Aug 5 14:51:44 Shivas-Air cngMobileApp[70894]: 2 0x8c60b main
Aug 5 14:51:44 Shivas-Air cngMobileApp[70894]: 3 0x3cc5a25 start
Aug 5 14:51:44 Shivas-Air cngMobileApp[70894]: file:///app/tns_modules/nativescript-mapbox/mapbox.js:7:20: JS ERROR ReferenceError: Can't find variable: MGLOfflineStorage
Aug 5 14:51:44 Shivas-Air com.apple.CoreSimulator.SimDevice.20124C04-21CD-486F-9DFE-439512DD31BD.launchd_sim65148: Service exited due to signal: Segmentation fault: 11

I installed nativescript-mapbox using "tns plugin add nativescript-mapbox". Can you assist me as to what could be causing the issue? Thanks.

Request: change Position of Markers without removing them first

We have an issue where the first draw of marker icons shows them without custom marker image and on the second attempt it works. So if I successfully have drawn a marker I want to just move it. Do you plan this function for future releases?

Adding Polylines

Hi.
I tried to add some polylines to the map but this resulted in an error.

Location keeps working when hiding map

Hi :). I've noticed that the device still uses the location service even when I hide the map / exit the app.

I'm using Android API 23.

10x

Cannot find variable MGLMapViewDelegate

When I attempt to compile this plugin in my nativescript app, the compiler reports Cannot find variable MGLMapViewDelegate. Any ideas how I can get past this?

iOS crash - this._mapLoadedCallback is not a function

version 2.3

Exception:

file:///app/tns_modules/nativescript-mapbox/mapbox.js:794:28: JS ERROR TypeError: this._mapLoadedCallback is not a function. (In 'this._mapLoadedCallback()', 'this._mapLoadedCallback' is undefined)

I haven't pinned down when/why this throws but saw it once when I navigated to the page with the map and then the map worked fine the next time (I think) sorry I don't have much more right now.

Not working with Angular2/Typescript?

I'm trying to use this plugin in an angular 2 typescript project.

I added the plugin via the tns plugin add command and imported it with var mapbox = require('nativescript-mapbox'); in my component.ts file.
In the angular 2 ngOnInit event i call mapbox.show({ accessToken: '...' }); but i'm getting the following error:
Uncaught (in promise): TypeError: Cannot read property 'mapboxsdk' of undefined

Any idea how to solve this?

Plugin size impact

The plugin significantly the output .apk , with about +10mb...Is this actually expected?

Enhancement/Request: timeout when loading XML map

The mapbox loading into a view can cause an app to hang for half a second or so. When you declare the map in XML and navigate to the page you have no way to delay that execution so it doesn't cause an interruption to the navigation transition.

A simple solution would be to add a property on the XML view, such as delayMapInit and then accept a value in milliseconds, so then we can make sure the navigation transition has completed before the map constructor is started which isn't the smoothest process. Let me know your thoughts @EddyVerbruggen, you might have a better idea since you know the SDKs better than I for mapbox.

iOS Marker added using addMarkers is jumpy when zoomin in/out

Looks like the marker is fixed position relative to the Map. This doesn't happen when I set the markers in show method. Happens only for the markers added after showing the map. I need to do this to dynamically add markers. Any one else have this problem and how did you sort this out ?

Note: After adding the markers I am calling setCenter method too..

Marker Code:

mapbox.addMarkers({
    lat: latitude, // mandatory
    lng: longitude, // mandatory
    title: 'One-line title here', // no popup unless set
    subtitle: 'Infamous subtitle!' // can't span multiple lines, so keep it short and sweet
}).then(
    (result) => {
        console.log("Mapbox Marker done: " + latitude + ', ' + longitude);
        // this.animateCamera(latitude, longitude);
    },
    (error) => {console.log("Mapbox Marker error: " + error)}
);

Set Center Code:

mapbox.setCenter({
    lat: latitude,
    lng: longitude,
    animated: true
}).then(
    (result) => {
        console.log("Mapbox setCenter done: " + latitude + ', ' + longitude);
        // this.animateCamera(latitude, longitude);
    },
    (error) => {console.log("mapbox setCenter error: " + error)}
);

Angular 2 registerElement XML not setting property

I guess that the xml with angular2 is not setting the accessToken property:

<GridLayout rows="auto, *">
     <Map #map
          row="1"
          accessToken="bla"
          latitude="52.3702160"
          longitude="4.8951680"
          zoomLevel="3"
          showUserLocation="true"
          hideAttribution="false",
          hideLogo="false",
          hideCompass="false"
          (mapReady)="onMapReady($event)">
      </Map>
</GridLayout>

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

The map load in black with the message: Please set the 'accessToken' property because now the map will be entirely black :)

Support for Marker Image URLs

Currently, the plugin only loads local resources as marker images. It would be nice if we could also specify a URL to use for the marker.

showUserLocation="true" is not working in Android

Hi,

It seems like the showUserLocation="true" is not working in Android. Works great in IOS.
I have tested the demo at: https://github.com/EddyVerbruggen/nativescript-mapbox-demo
Same problem on XML an by code. Have also created a separate project where i test that mapbox.hasFineLocationPermission() returns true before i call mapbox.show(). But still same problem.

@EddyVerbruggen is showUserLocation="true" working for you in Android?

Provide a way to hide and show the map, without redrawing it

Currently when you hide() the map its current viewport is reset when show() is called again. This is nasty in case you quickly want to navigate back and forth between an map and a (say) listview.

Nativescript Angular 2 issue while using MapBox inside the HTML

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.

Question: remove the polyline

I didn't find anything in the native android sdk, curious if you've seen support to remove a previously drawn line or have any suggestion on a good approach for that?

I've drawn a line and plotted the markers, successfully removed the markers but now need to remove the line so it's not there for a new line (route) with the new markers plotted, hope that makes sense. I'll dig around later and see but just curious. Thanks.

Does Mapbox measure this plugin's usage as a native app?

Hi

Great plugin, I just have a quick question.

Mapbox plans place limits based on either "map views" or "mobile users".
The starter plan being: 50,000 map views / mo, or 50,000 mobile users / mo

The Mapbox documentation specifically refers to native apps when it talks about measuring mobile users. Does this plugin interact with Mapbox like a native app? (i.e measuring mobile users) or does this affect map views instead?

Thanks :)

Add support for Polyline in IOS

Thanks for a great plugin.

Is it possible to implement the addPolyline for IOS also.
Need this core feature :-)

Offline and Element overlay capability question

Hello there, i'm starting a new project for which I need to use maps on both ios and android. However I need to show images overtop of the map sometimes, is it possible to show ui elements overtop of the map? (this is difficult for some hybrid frameworks)

Also, MapBox native libraries have support for offline usage and I was wondering if this is supported yet.

Kind regards.

Enhancement: expose other methods to XML map

Several much needed methods on the XML declared maps:

• removeMarkers
• setCenter
• setZoomLevel
• addPolyline

All of them would be great of course but these would seem to cover a lot of use cases for having dynamic capabilites of the map once its rendered for navigational purposes.

Create map as XML element?

For ease of positioning, curious if it could be possible to instantiate the map as an XML element instead of calling the javascript and explicitly marking coordinates?

Mapbox-4.0.0 : Can't add a marker : markerOptions.title is not a function

Hi, I've got an issue with your mapbox-4.0.0 branch. I know it's under development, but I needed a mapbox 4 version to make it run on 64bits devices so I gave it a shot.

I succeeded to make the map show up by adding :
<service android:name="com.mapbox.mapboxsdk.telemetry.TelemetryService" />
in the android manifest. I don't know why the one in the plugin doesn't work.

Then I tried to put a marker on the map but I go this error :

JS: Error in mapbox.addMarkers: TypeError: markerOptions.title is not a function
JS: EXCEPTION: Error: Uncaught (in promise): TypeError: markerOptions.title is not a function
JS: STACKTRACE:
JS: Error: Uncaught (in promise): TypeError: markerOptions.title is not a function
JS: at resolvePromise (/data/data/org.nativescript.gpadri/files/app/tns_modules/zone.js/dist/zone-node.js:496:32)
JS: at /data/data/org.nativescript.gpadri/files/app/tns_modules/zone.js/dist/zone-node.js:473:14
JS: at /data/data/org.nativescript.gpadri/files/app/tns_modules/nativescript-mapbox/mapbox.js:189:7
JS: at new ZoneAwarePromise (/data/data/org.nativescript.gpadri/files/app/tns_modules/zone.js/dist/zone-node.js:542:30)
JS: at Object.mapbox.addMarkers (/data/data/org.nativescript.gpadri/files/app/tns_modules/nativescript-mapbox/mapbox.js:175:10)
JS: at GeotrackPage.addMarkers (/data/data/org.nativescript.gpadri/files/app/geotrack/geotrack.components.js:66:16)
JS: at DebugAppView._View_GeotrackPage0._handle_tap_12_0 (GeotrackPage.template.js:92:28)
JS: at /data/data/org.nativescript.gpadri/files/app/tns_modules/@angular/core/src/linker/view.js:316:24
JS: at ZoneDelegate.invoke (/data/data/org.nativescript.gpadri/files/app/tns_modules/zone.js/dist/zone-node.js:281:29)
JS: at Object.NgZoneImpl.inner.inner.fork.onInvoke (/data/data/org.nativescript.gpadri/files/app/tns_modules/@angular/core/src/zone/ng_zone_impl.js:45:41)
JS: Unhandled Promise rejection: markerOptions.title is not a function ; Zone: angular ; Task: ; Value: TypeError: markerOptions.title is not a function
JS: Error: Uncaught (in promise): TypeError: markerOptions.title is not a function

By checking the mapbox documentation, your implementation looks good. I can't figure out why it doesn't want to find the title function.
I saw some Todo around so maybe it's something that you already know.

Change map style method

I've not looked into the source of the SDKs to see if it's possible, but being able to change the map style dynamically would be a nice feature 😄 .

Specifcally looking to do against the XML rendered map after the fact.

Scenario: user loads the app doesn't like the default style or is hard on their eyes so they can try out 'dark'.

[Question] add Marker on tap

Hello, I am creating the map programmatically. I'd like to add a marker on tapped location on the map. I know how to add markers to the map programmatically, but don't understand how to register a tap handler and get tapped coordinates. Can you point me to the solution please?

ShowUserLocation not working

Hi.

I cannot get the user location shown on the map properly. Is there anything that I am missing right now?

import {Component, OnInit} from "@angular/core";
import {Page} from "ui/page";

var mapbox = require("nativescript-mapbox");
var geolocation = require("nativescript-geolocation");

const accessToken: string = "...";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {
    constructor(private page: Page) {
        this.page.actionBarHidden = true;
    }

    ngOnInit() {
        var that = this;

        // get geolocation permitted
        if (!geolocation.isEnabled()) {
            geolocation.enableLocationRequest();
        }

        mapbox.hasFineLocationPermission().then(
            function(granted) {
                // if this is 'false' you probably want to call 'requestFineLocationPermission' now
                console.log("Has Location Permission? " + granted);
        });

        // if no permission was granted previously this will open a user consent screen
        mapbox.requestFineLocationPermission().then(
            function() {
                console.log("Location permission requested");
            }
        );


        // get current location
        var lat_value = 0; var lng_value = 0;
        var location = geolocation.getCurrentLocation({desiredAccuracy: 3, updateDistance: 10, maximumAge: 20000, timeout: 20000}).
        then(function(loc) {
            if (loc) {
                console.log("Current location is: " + loc.latitude + ", " + loc.longitude);
                lat_value = loc.latitude;
                lng_value = loc.longitude;
            }
        }, function(e){
            console.log("Error: " + e.message);
        }).
        then(function() {
            // display the map for curr
            setTimeout(() => {
                that.show_map(lat_value, lng_value);
            }, 100);
        }
        );
    }

    show_map(latitude, longitude) {
        mapbox.show({
            accessToken: accessToken,
            style: mapbox.MapStyle.OUTDOORS,
            margins: {
                left: 30,
                right: 30,
                top: 30,
                bottom: 30
            },
            showUserLocation: true, // default false
            center: {
                lat: latitude,
                lng: longitude
            }, 
            zoomLevel: 14, // 0 (most of the world) to 20, default 0
            hideAttribution: true, // default false
            hideLogo: true, // default false
            hideCompass: false, // default false
            disableRotation: false, // default false
            disableScroll: false, // default false
            disableZoom: false, // default false
            disableTilt: false, // default false
        }).then(
            function(result) {
                console.log("Mapbox show done");
            },
            function(error) {
                console.log("mapbox show error: " + error);
            }
        );
    }
}

Marker Clustering

Any plans on implementing the cluster functionality in mapbox

Possible to get street/intersection data?

Hey!

Is it possible to retrieve street data from the API, for example to provide snapping on intersections or similar?

Custom maps

Hi, First of all, thanks.
Could you show me a little sample about how can I load a custom map using nativescript-mapbox please?
Thanks.
Best.

Dalmiro

Custom Styles In Maps

Hi.

MapBox SDK allows you to set styles for maps. In your excellent implementation, for iOs and Android, styles are established through an enum with default styles.

The SDK also allows you to define your own styles, created with MapBox Studio, setting the style to map through the styleUrl function.

It would be quite useful this capability in the library.

Thank you!

Will the Mapbox Directions api work with Nativescript?

Is it possible to provide directions with a Mapbox map in a Nativescript app? Thanks very much for the info.

Can't find variable: MGLOfflineStorage

Thanks for building this awesome plugin!

I followed the steps what they do during NativeScript 2.3 webinar by using Angular 2 typescript with NativeScript to build an ios app.

https://youtu.be/WQktviwAGb0?t=25m3s

I have defined the "mapbox", "token" variable and loadMap function in the imagesList.component.ts.

Once I run the app in the IOS simulator, I got this error:

JS: Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ReferenceError: Can't find variable: MGLOfflineStorage

I have generated a token with everything ticked on mapbox.com after I registered an account.

Allow to use icon path from resource

Cannot find a way to use iconPath from a resource (as res://) to use native methods for selecting the best image for the current device screen density.

Additional style for Markers

Hi,

Is there an additional style for Markers? I want to include two types of Markers on a Mapbox map to signify two different types of locations on a map. Thanks.

onTap/onCalloutTap not working from XML declared map

 <!-- MapBox -->
<map:Mapbox row="1" col="0" rowSpan="5" colSpan="5" id="map" disableRotation="true" mapStyle="streets" mapReady="{{ onMapReady }}" latitude="39.8282" longitude="-98.5795" zoomLevel="2.42" showUserLocation="true" hideLogo="true" hideAttribution="true" accessToken="myKey"></map:Mapbox>

 /**
     * onMapReady
     */
    public onMapReady(args) {

        this._map = args.map;

        let opts: Array<MapBox.AddMarkersOption> = [{
            lat: 36.3884,
            lng: -86.4467,
            title: 'Gallatin, TN',
            subtitle: 'Hello World!',
            onTap: function (marker) {
                console.log('MARKER: ' + marker);
                console.log('TAP 1');
            },
            onCalloutTap: function () { console.log("'Nice location' marker callout tapped"); }
        }];
        args.map.addMarkers(opts);

    }

Marker is present on the map but tapping the marker and the callout do not log anything.