ShowUserLocation not working

[jiwonyune]

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

[Stavanger75]

+1

Same problem on Android 2.3. Works on IOS.

[EddyVerbruggen]

This seems to be subject to refactoring quite a bit in the Android Mapbox SDK. I'll have to do a bit of research..

[EddyVerbruggen]

Tried a few thing that should work but didn't. I'm contemplating drawing the user location via a custom marker myself for now.

[Stavanger75]

Thanks for following up on this one. Just let me know if you would like me to test anything.

You have probably allready taken a look at the sample application from mapbox. But here is the information just in case. It contains user location and userlocation button. I downloaded test app from google play and it 's showing location as expected.

Google Play
https://play.google.com/store/apps/details?id=com.mapbox.mapboxandroiddemo&hl=en

Github project
https://github.com/mapbox/mapbox-android-demo

[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!

[Stavanger75]

Great i will test it :-)

EDIT: if you would like to go for one marker/image solution : https://github.com/mapbox/mapbox-android-demo/blob/master/MapboxAndroidDemo/src/main/res/drawable-xxhdpi/ic_circle.png

[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.

[Stavanger75]

Can confirm version 2.2.0 of plugin on Android 2.3.0 is showing location as expected. Thank's a lot @EddyVerbruggen.

Is it possible to add the accuracy marker/image also ?
https://github.com/mapbox/mapbox-android-demo/blob/master/MapboxAndroidDemo/src/main/res/drawable-xxhdpi/circle_icon.png