Using Mapbox Telerik plugin with Ionic

Ionic Framework ionic-v3
1

Hello,

I’m struggling on integrating the Mapbox Telerik plugin into my ionic 2 app. The plugin is available here :
http://plugins.telerik.com/cordova/plugin/mapbox

I was able to add the plugin to the app.

Then I declare in my html :
<div id="map"></div>

But I don’t know how to handle it with typescript. I don’t understand how in their documentation the Javascript handles the html.

Does anyone already integrated it in an ionic app ?

Thank you

2

Hi, you don’t have to specify the div in the .html file. After successful installation to the plugin you can put this code directly into .ts file:

ionViewDidEnter() {
    this.showMap();
}

ionViewWillLeave() {
    this.hideMap();
}

showMap() {
    Mapbox.show(
        {
            style: 'emerald', // light|dark|emerald|satellite|streets , default 'streets'
            margins: {
                left: 0, // default 0
                right: 0, // default 0
                top: 20, // 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));
        }
    )
}

hideMap() {
    Mapbox.hide(
        {},
        function(msg) {
            console.log("Mapbox successfully hidden");
        }
    );
}
3

I am trying to ramp up on ionic2 and also would like to use the telerik mapbox plugin - I assume that you need to import Mapbox into the component … have tried variations of import { Mapbox } from ‘cordova-plugin-mapbox’; but can’t seem to get it to work - is there a basic ionic2 example somewhere? … Ultimately I got this working by simply adding in a locally scoped variable

declare var Mapbox;

before the @component and after the import headers.
There is no need to import this … also worth noting that this doesn’t work in browser but only on device ( I am testing only iOS ). I am now aiming to work out how to render a polyline. It looks like the plugin doesn’t provide line support yet though it does support polygon so may be able to transform my line into a polygon. There is mention of GeoJSON but the source suggests this isn’t implemented yet - may be a few versions behind the underlaying mapbox native ios SDK.

4

@olivier_p Did you solve this? I have the same problem now. I want to import the map only at ion-content part of the html