Ionic and Telerik Verified Plugins for Mapbox

[bamboolix]

Hello and thanks for this plugin. After trying several solutions implementing Mapbox, I must agree with the quality of this plugin in terms of responsiveness and user experience.

I've been trying to use the plugin for the last week. I've finally got it to work on an IOS app developed with Ionic AngularJS. However the behavior of the map seems to be conflicting with Ionic.
I created a service used by several controllers who need to access the instance of Mapbox

MapBoxService

service( "MapBoxService", function()
{
         this.Hide = function()
         {
            console.log( "Hide in" );
             Mapbox.hide({},
                function (result) {
                console.log(JSON.stringify(result));
                },
                function (error) {
                alert(error);
                }
                )
            console.log( "Hide out" );
         }
         this.Show = function ()
         {
             Mapbox.show(
                     {
                     style: 'emerald', // light|dark|emerald|satellite|streets , default 'streets'
                     margins:
                     {
                     left: 0, // default 0
                     right: 0, // default 0
                     top: $(".bar-header").height(), // default 0
                     bottom: $(".tab-nav").height() // default 0
                     },
                     center:
                     { // optional, without a default
                     lat: 52.3702160,
                     lng: 4.8951680
                     },
                     
                     zoomLevel: 12, // 0 (the entire world) to 20, default 10
                     showUserLocation: true, // your app will ask permission to the user, default false
                     hideAttribution: false, // default false, Mapbox requires this default if you're on a free plan
                     hideLogo: false, // default false, Mapbox requires this default if you're on a free plan
                     hideCompass: false, // default false
                     disableRotation: false, // default false
                     disableScroll: false, // default false
                     disableZoom: false, // default false
                     disablePitch: false, // disable the two-finger perspective gesture, default false
                     markers: [
                               {
                               lat: 52.3732160,
                               lng: 4.8941680,
                               title: 'Nice location',
                               subtitle: 'Really really nice location'
                               },
                               {
                               lat: 52.3732160,
                               lng: 4.9141680,
                               title: 'Nice location',
                               subtitle: 'Really really nice location'
                               }
                               ,
                               {
                               lat: 52.3732160,
                               lng: 4.9241680,
                               title: 'Nice location',
                               subtitle: 'Really really nice location'
                               }
                               
                               ]
                     },
                     
                     // optional success callback
                     function(msg)
                     {
                     console.log("Success :) " + JSON.stringify(msg));
                     },
                     
                     // optional error callback
                     function(msg)
                     {
                     alert("Error :( " + JSON.stringify(msg));
                     })
         
         
         Mapbox.animateCamera({
                              // Sets the center of the map to Maracanã
                              target: {
                              lat: 52.3632160,
                              lng: 4.8941680
                              },
                              zoom: 9, // Android, zoomLevel
                              altitude: 6000, // iOS, meters from the ground
                              bearing: 400, // Sets the orientation of the camera to look west
                              tilt: 40, // // Sets the tilt of the camera to 30 degrees
                              duration: 1 // in seconds
                              }
                              );
         }

Account Controller

angular.module('app.controllers').controller('AccountCtrl', ['$scope', '$stateParams', '$ionicModal' , '$interval','MapBoxService', 
                           function ($scope, $stateParams, $ionicModal, $interval, MapBoxService ) {
                                                            
document.addEventListener('deviceready', function ()
{
  // call to MapBoxService                          
   MapBoxService.Show();
})

$scope.HideMapBox = function () 
{
 MapBoxService.Hide();
}

}

Then in a view I have un simple ng-click event which should hide the Map

 <a class="button button-energized  button-block" ng-click="HideMapBox()">
                                 <i class="icon ion-monitor"></i>
                                 <span>{{ MapLabel }}</span>
 </a>

The call enters the function. I get the logs. But it is as if the effective call in the plugin doesn't go thrue. The Map isn't hidden.

However if I stick to what is written in the demo (pasting the scripts in a a script tag write in my Ionic template, the call works.

I noticed something which could be interesting. In Xcode logs, It seems like the plugin gets loaded several times ...

2017-03-02 18:25:08.233 [2494:600516] THREAD WARNING: ['Mapbox'] took '194.308838' ms. Plugin should use a background thread.
2017-03-02 18:25:09.506 [2494:600516] THREAD WARNING: ['Mapbox'] took '194.484863' ms. Plugin should use a background thread.

Another Annoying thing, showing and hiding the map several times crashes the app after several memory warnings .. Its a petty because I wanted to use both methods to cope with the impossibility of overlaying the map.

THREAD WARNING: ['Mapbox'] took '13.800781' ms. Plugin should use a background thread.

Thank you very much for you reply.