Add support for ionic-native

[risinghero]

Ionic 2.0 has repo for typescript 2.0 wrappers around cordova plugins. I think it will be nice to write one for our plugin.

[dagatsoin]

Good idea. But I wonder why they write directly in .ts instead of a .dt?

[risinghero]

Well, because .d.ts contains only interface\class descriptions. They allow you to use javascrpt code as is from Typescript. While ionic-native is wrapper. It wrapps functionality and uses angular Promises for plugin interface to look native in ionic apps.

[dagatsoin]

Ho, make senses. Should we plan this for the 2.0 or 2.0.x? This would force to maintain 2 js API. Do you think we are enough or it could be a job for another collaborator?

[risinghero]

I think version 2.1 with ionic example)

Do you think we are enough or it could be a job for another collaborator?

Another collaborator will be nice)

[dagatsoin]

Ok sound like a plan!
Let leave this open for further discussion and ref this issue in the roadmap.

[hamzahppa]

Hello, does this plugin support ionic 1?

[risinghero]

Hi, @hamzahppa , this plugin definitely supports Ionic 1 as well as Ionic 2 or Ionic any))

[hamzahppa]

@Anothar Thank you, but I have a little problem here. I'm really new at using this plugin and also new at Ionic. I got an error when I try to use this plugin and have spent my time looking for the solution at Google but it won't help.

I just learn to use this plugin at Ionic 1, and here are my code:

.controller('mainCtrl', function($scope) {
    Mapbox.show(
    {
      style: 'emerald', // light|dark|emerald|satellite|streets , default 'streets'
      margins: {
        left: 0, // default 0
        right: 0, // default 0
        top: 316, // default 0
        bottom: 50 // 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'
        }
      ]
    },

    // optional success callback
    function(msg) {
      console.log("Success :) " + JSON.stringify(msg));
    },

    // optional error callback
    function(msg) {
      alert("Error :( " + JSON.stringify(msg));
    }
  );
})

And it give me error Mapbox is not defined.

Thank you very much

[risinghero]

It looks like you haven't installed plugin. Look at plugins folder is there folder "cordova-plugin-mapbox"? Also look at config.xml there should be line starting with: '<plugin name="cordova-plugin-mapbox" '.

[EddyVerbruggen]

Indeed, and wait for deviceready to fire before doing anything with plugins.

[hamzahppa]

@Anothar I check ionic plugin list and the plugin have already listed there like this

cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-mapbox 1.2.3 "Mapbox"
cordova-plugin-splashscreen 4.0.1 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

And I also add <plugin name="cordova-plugin-mapbox"/> on config.xml but still no luck

[hamzahppa]

Hello @EddyVerbruggen thank you, I used lots of your plugin, great job. But I have difficult on using this plugin, can you explain how to wait for deviceready? do I need to put this code inside .run on my app.js?

[EddyVerbruggen]

Thx. Say you have a function called renderMap then do document.addEventListener("deviceready", renderMap, false);

[hamzahppa]

@EddyVerbruggen thank you it works, it looks like that I didn't place the code after deviceready. And also, I did not run the code on real mobile device, after I run it on real device, it works.

[pscott-au]

I have been struggling to get this plugin to work in Ionic2 .. seems to be a scoping issue with Mapbox variable. I came to IonicNative (http://ionicframework.com/docs/v2/native/) which advises that
"Ionic Native will work with any Cordova app as long as you have Promise support." .. I also see that 'another' advised that "this plugin definitely supports Ionic 1 as well as Ionic 2 or Ionic any))" - I am not very adept with the frameworks so am mostly hacking away with variations of things .. the core .ts example code (https://forum.ionicframework.com/t/using-mapbox-telerik-plugin-with-ionic-2/72120) I've tried putting inside the constructor of a page. I fear it is slightly out of date as not using ionViewWillEnter() function? In browser I get error 'Cannot find name Mapbox' suggesting I need to import but cannot import using ionic-native. Similar error trying to do a build ios - " Cannot find name 'Mapbox'." .. plugin list shows the install "cordova-plugin-mapbox 1.2.3 "Mapbox""
I am now exploring the window.plugins.* namespace in case Mapbox is in there - any help massively appreciated

resolved I had to simply declare the variable declare var Mapbox; after my imports and realise that it will work on ios device but not in browser.

[redundans]

I don't know if it will interest anyone. But I been reviewing map plugins for different hybrid frameworks for a future project. Just to get Mapbox to work with Ionic 2 I forked the ionic-native library and added a coarse wrapper for cordova-plugin-mapbox.

All you have to do is to build my forked ionic-native and replace your local projects node_modules/ionic-native/dist (or install it directly from github). And then just install the cordova-plugin-mapbox:

ionic plugin add cordova-plugin-mapbox --variable ACCESS_TOKEN=XXX

Where XXX is your Mapbox access token.

All I tested so far is to initiate a map, add a marker, zoom and pan. It all works as expected on my iPhone 6 device and on android in the emulator.

My fork:
https://github.com/redundans/ionic-native

[ansarikhurshid786]

can I use this plugin with ionic 3?

[ansarikhurshid786]

@risinghero I am using ionic 3. I have installed plugin and try to use this plugin but i m getting error cannot find name Mapbox.

Can you help me how to use this plugin with ionic 2 or ionic 3?

[risinghero]

@ansarikhurshid786 Hi. Please, reread this thread from the beginning and try all solutions - one of them will work for you.
This plugin works with ionic any.

[ansarikhurshid786]

Thanks, I read this thread but I can't find solution for ionic 2 or any

[risinghero]

@ansarikhurshid786 Lets start from basics. Cordova is the technology that allows you to write application using js and html. Internally it's webbrowser (chromium) + plugins that allow you to use phone specific functionality which you can't use from normal browser.
Ionic is framework based on Cordova. It has some additional plugins for cordova, but other than this it's web framework like bootstrap.
This plugin works for any cordova application! It has no dependency on Ionic and no relation to it. Your issue is not ionic specific nor it is this plugin specific.
There can be few reasons why you get this error:

1. you dont subscribe to device.ready
2. you test it in browser. This plugin doesn't have implementation for browser-only for device emulators

[ansarikhurshid786]

Thanks a lot for your valuable time.

I am using ionic 2 where I can't use cordova plugin directly. cordova plugin work with ionic native.

That is why i am asking you how to use it with ionic 2 or any.

[ansarikhurshid786]

I am using plugin by declaring variable out side class as below :

declare var Mabbox.

Now I can access it's property and method.

[ansarikhurshid786]

Hi @risinghero It is working like native map but i can't find basic methods of mapbox can you help ?

[risinghero]

Hi @ansarikhurshid786 . Unfortunately, only a little amount of native methods is implemented in this cordova plugin(

[ansarikhurshid786]

ok thanks for your response. so i can't use this plugin for my application

[risinghero]

@ansarikhurshid786 maybe. You haven't told what you want to do with user location.