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);
            }
        );
    }
}

[EddyVerbruggen]

Oh wow, that icon may come in handy if the version I just pushed is flaky. The advantage of the current version is though that the plugin uses icons bundled with the Mapbox SDK.

Available in 2.2.0 which is now on GitHub and very soon on npm as well.

[EddyVerbruggen]

Ha, lol, I’ve just replicated that UI by manually adding 2 markers one the same spot (my location) using those blue and white drawables. So I guess I can release a good v1 based on that approach tomorrow. Thx!