Eddy -firstly I love this plugin.

This is less of an issue than a question:
Are there any examples of using this in conjunction with kendo mobile... i'm trying to get the map to appear as though its inline with the kendo header and footer... e.g. not a popup. Since the header/footer size in kendo would adjust based on platform and device I can't hardcode a value into the size of the mapbox in javascript.

In short I need to dynamically size the map to make it appear inline.

Any recommendations?

I've verified this issue with the sample app as well. I've realized that if you call Mapbox.show before closing an existing map multiple maps get opened and you lose the ability to close the prior map. So you're left with a map that can't be removed.

I've also tried to chain a hide call with an show call in the callback but it seems the callback in hide doesn't get called.

I'd recommend at least some kinda of function or property that lets you check if the originally map is already open.

I have some animations on my app, for example a sliding menu. my current map (pure js, with leaflet) moves nicely right and left as the menu opens and closes because it is bound to a html element.

is it possible to bind the map produced by this plugin to a html element?

Hey,

I've been following the development of this plugin (really looking forward to seeing #29 and #22 landing).

Right now, the docs doesn't say anything about supporting custom map styles. It is currently only referencing the mapbox-hosted styles.

@EddyVerbruggen is custom styles supported and undocumented, or something that needs work? Preferably, custom styles should be setable as inline JSON on map init. A good second option would be via http:// or file:/// protocols.

Hello, How I can change the current location icon?

I am writing vehicle tracking app, and need to move a marker on a map based on coordinates from a Web service call. You documentation does not include the Marker class, or it's methods. Do you have plans to implement this?

Project Collaborators:
@EddyVerbruggen @cusspvz @Anothar @dagatsoin

Refactoring:

• [Issue #] Base native events trough an initial event listener callback for each map instance
• [Issue #] Use latest ES methods on JS file

Features:

• [WIP #29] overlay DOM html elements
• [Issue #] Map / Marker class API exposure

Maintenance:

• [Issue #] Move iOS code to Swift

Currently custom image for marker is not supported. I'll provide advanced support for it.

Here is the exact error:
[2015-10-13 15:50:37.070] Exception: Server exception: Project "PT977462.tmp.proj" (default targets):
android Build Tooling revision 2015.09.30.2r
Warning: Note: Some input files use or override a deprecated API.
Warning: Note: Recompile with -Xlint:deprecation for details.
Warning: Note: Some input files use or override a deprecated API.
Warning: Note: Recompile with -Xlint:deprecation for details.
Warning: FAILURE:
Warning: Build failed with an exception.
Warning: * What went wrong:
Execution failed for task ':mergeArmv7DebugResources'.

/tmp/builds/BQbFw7rXD8QhmYkFEa/app/res/values/mapboxstrings.xml: Error: Found item String/mapbox_accesstoken more than one time

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
  Warning: /tmp/builds/BQbFw7rXD8QhmYkFEa/app/cordova/node_modules/q/q.js:126
  throw e;
  ^
  Error code 1 for command: /tmp/builds/BQbFw7rXD8QhmYkFEa/app/gradlew with args: cdvBuildDebug,-b,/tmp/builds/BQbFw7rXD8QhmYkFEa/app/build.gradle,-Dorg.gradle.daemon=true,-PcdvBuildArch=armv7,-PcdvBuildMultipleApks=true
  Error: /tmp/builds/BQbFw7rXD8QhmYkFEa/app/res/values/mapboxstrings.xml: Error: Found item String/mapbox_accesstoken more than one time
  Error: Build failed during execution
  Error: 'Build failed with error code 8'
  Done building project "PT977462.tmp.proj" -- FAILED.

You can directly reproduce it with the sample app from https://plugins.telerik.com/cordova/plugin/mapbox. Most likely it is due to the plugin variable setup.

I've been able to place a mostly transparent webview with HTML UI components over the native view mapbox map however, doing so disables touching the map since touch events over transparent areas go instead to the webview. The Google Maps Plugin managed to pull off what I'm looking for but I don't quite understand how: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Map

I'm an Ionic 2 / Cordova dev but don't understand much of the Objective C code plus I want to accomplish them same in Android. I just want to have webview on top that receives touches EXCEPT when the area being touched is transparent and if so, then the touch events should go to the native view which has the map on it below so that the user can interact with moving and zooming the map, etc. Any advice? Any chance of adding code into this plugin itself to support such a feature?

I'd like to access custom marker properties from the addMarkerCallback, for example theid of an item:

function(items){
      var group = [];
      items.forEach(function(loc){
        var marker = {
          lat:loc.latitude,
          lng:loc.longitude,
          title:loc.title,
          subtitle: loc.distance,
          id: loc.id, // How can I get my hands on this?
        };
        group.push(marker);
      });
      Mapbox.addMarkers(group);
    }

Is this possible? Or is there an alternative method for achieving the same?

Thanks!

Any plans to support offline features? Coming march the 15 on ios/android

mapbox/mapbox-gl-native#4178

In some scenarios, using the MapBox plugin in an Android app results in a crash when the app is paused. The exception message is:

java.lang.RuntimeException: Unable to pause activity {com.sth.sth/com.sth.sth.TelerikCallbackActivity}: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.mapbox.mapboxsdk.views.MapView.onPause()' on a null object reference
E/AndroidRuntime(20864): at android.app.ActivityThread.performPauseActivity(ActivityThread.java:3366)
E/AndroidRuntime(20864): at android.app.ActivityThread.performPauseActivity(ActivityThread.java:3325)
E/AndroidRuntime(20864): at android.app.ActivityThread.handlePauseActivity(ActivityThread.java:3300)
E/AndroidRuntime(20864): at android.app.ActivityThread.access$1000(ActivityThread.java:156)
E/AndroidRuntime(20864): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1362)
E/AndroidRuntime(20864): at android.os.Handler.dispatchMessage(Handler.java:102)
E/AndroidRuntime(20864): at android.os.Looper.loop(Looper.java:211)
E/AndroidRuntime(20864): at android.app.ActivityThread.main(ActivityThread.java:5389)
E/AndroidRuntime(20864): at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime(20864): at java.lang.reflect.Method.invoke(Method.java:372)
E/AndroidRuntime(20864): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1020)
E/AndroidRuntime(20864): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:815)
E/AndroidRuntime(20864): Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.mapbox.mapboxsdk.views.MapView.onPause()' on a null object reference
E/AndroidRuntime(20864): at com.telerik.plugins.mapbox.Mapbox.onPause(Mapbox.java:488)
E/AndroidRuntime(20864): at org.apache.cordova.PluginManager.onPause(PluginManager.java:209)
E/AndroidRuntime(20864): at org.apache.cordova.CordovaWebViewImpl.handlePause(CordovaWebViewImpl.java:430)
E/AndroidRuntime(20864): at org.apache.cordova.CordovaActivity.onPause(CordovaActivity.java:241)
E/AndroidRuntime(20864): at android.app.Activity.performPause(Activity.java:6101)
E/AndroidRuntime(20864): at android.app.Instrumentation.callActivityOnPause(Instrumentation.java:1310)
E/AndroidRuntime(20864): at android.app.ActivityThread.performPauseActivity(ActivityThread.java:3352)
E/AndroidRuntime(20864): ... 11 more

where com.sth.sth is the App Id of the app running on the device.

I've been trying to get this to build for android, but not having much luck. I keep having these errors:

..../platforms/android/build/intermediates/res/debug/values-v23/values.xml:5: error: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Inverse'.

..../platforms/android/build/intermediates/res/debug/values-v23/values.xml:20: error: Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.Button.Colored'.

:processDebugResources FAILED

From what I can see that is because the Support Library is at version 23 and the sdk is at version 22 ? But cordova requires the sdk to be at 22 does it not? How do I change this?

(Note: I'm using the CLI not android studio, because that thing just does my head in)

Hi,

I am working on a mobile app (with Ionic) where we used to display a map using the JS library, but we are trying to move to this native plugin for better performance.

I manage to make it work pretty well (displaying the map, showing some markers - that I need to customize, I haven't looked at that yet -, etc.).

But right now I'm trying to display a route, which was display via a featureLayer before, more precisely a LineString. But the plugin doesn't seem to handle this kind of elements yet.

Is that on the roadmap? Is there any way I could replicate that functionality with just a polygon in the meantime?

Thanks in advance!

Is it possible to change build a heatmap with the plugin? Thanks!

I notice an unexpected issue where if the subtitle field is not present in the marker the app crashes. Tested it in the sample app as well and seemed to be the case.

Hi there,

As per my other issue, I couldn't get this to build for Android, but I did manage to get this to work for iOS. I had a few quick questions:

• I noticed from the Mapbox.js there are only a handful of APIs available. Do you plan to add support for any of the following: setPitch, flyTo, easeTo, and being able to listen for long-press ?
• When I include this in my app, the map overlays on top of my html. Is there a way for me to float some html on top of the map? I'd like to have some floating fab buttons on top for example.

This cool plugin is not available via NPM (http://cordova.apache.org/plugins/) which makes it hard to find and harder to use (for example with PhoneGap Build).

@EddyVerbruggen Any plans to add it?

Technical details:
http://cordova.apache.org/plugins/authors.html

Does MapBox+plugin have the ability to display a popup over the pin that contains HTML code (including an image)

I want to move from a pin on the map to a detail page about that item. Ideally the flow would be user taps on the pin and sees the title/subtitle combination. then taps it the title/subtitle element to go to the detail page. I don't see any event handler that is available for the doubletap and/or the title/subtitle element.

Does this plugin supports the windows cordova platform?

Can we aspect some love to the windows platform?

thank you

Hello there, i'm starting a new project for which I need to use maps on both ios and android and this plugin looks amazing. However I need to show images overtop of the map sometimes, is this possible?. I've seen some talk about putting the webview on top of the map view but not sure if that has been done yet.

Also, MapBox native libraries have support for offline usage and I was wondering if this is supported yet.

Thanks for a great plugin!

Is it possible to remove a marker once it has been placed?

Hi, thanks for your excellent work on this! I have a couple questions about customization.

The demo screenshots show customized marker icons (Maki?), as well as the default MapboxJS info window. I'm not seeing a documented way to customize these elements.

Any help would be much appreciated!

How to show number of buildings on the map?

@EddyVerbruggen what's the difficulty of implementing bindings against the getBounds method?

Example can be found here: https://www.mapbox.com/mapbox.js/example/v1.0.0/markercluster-with-mapbox-data/

No index.css in the file and map not appear.

Hi,

Is Mapbox support marker clustering?

There should be some way to at least change the RGB values of the marker colors to not be default.

watch the memory usage in Xcode when you do show/hide. It increases 30-50mb each time.

I want to attached additional meta data to a marker so that I can capture the ID of the element that was tapped on. I've tried simply overloading the marker data with the additional ID field but that doesn't seem to get returned in the click hander so the approach doesn't work.

Can we expect clustering support (which is available in the javascript version of MapBox)?

Do you get a performance boost in using the plugin vs the javascript version? We've noticed that map rendering can be slow in the javascript version when you start moving around the map and zooming in and out.

Hi All,
In a separate pull request listed by @dagatsoin here he says:

"The Mapbox SDK is now iOS 3.2.0 and also fixes a memory leak which add 30-50mo each time the user show/hide the map"

I am having this exact issue! Can someone explain how to update the IOS SDK sitting behind the Telerik plugin to 3.20?

Please note: I am using @Anothar's fork here

I was trying to use this plugin in a typescript project. I installed the plugin and tried to call the Mapbox.show method, but got an error:

Cannot find name "Mapbox"

The app does not compile. I searched for the definitions file, but found none.

Is there any other way to make this run on a typescript project?

Note to self: current version has issues on Android 6.

Is there a way to get all markers that are actually in the view?
leftletjs provides such functionality.

Hi,
I found the document very helpful. There is a little problem that I have encountered, I am unable to show the map inside a specific div like we do in the Mapbox.js in actual web apps:

<div id="map"></div>
var map = L.mapbox.map('map', 'mapbox.streets');

In the cordova plugin, there is just option to show the map generally not in a specific div. I am using tabs view and one of the tab contains the map container. here is the js:

$scope.onTabSelected = function () {

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'
                    }
                ]
            },

            function(msg) {
                console.log("Success :) " + JSON.stringify(msg));
            },
            function(err) {
                alert("Error :( " + JSON.stringify(err));
            }
        );

}

Any help will be appreciated!!

Hi,

I'm coming from leaflet and my app uses the dragstart callback for some functionality, specially for getting data from the server once the user moves the map. I also use a zoom callback for the same purpose.

Does this plugin provides such functionality? I haven't seen it in the documentation.

thanks of any advice

Is it possible to change the colour/style of the markers or change the colour/stroke etc for polygon shapes? Thanks!

It appears that getTilt and setTitle are not working when I'm building this into an Ionic project. I've tried loading the demo code and everything works except getTitle and setTilt in that as well. Any ideas?

Is it possible for you to add geojson support in android ?
The only thing that is holding us from using your awesome plugin is the Capability to add geojson. Thanks BTW

Hello
I am developing an application in Ionic 2 with Typescript.
I installed your plugin but it says cannot find find plugin.
Is there a way to use the plugin with Typescript?

Hey,

this repo is very interesting – and I'm going to follow it closely as it and mapbox-gl-native matures. Looks very promising so far. However, I'm wondering – what are your thoughts on map GUI elements, and if they should reside in the native or javascript context?

The reason for asking is that mapbox-gl-native has an opinionated way of handling GUI elements, in particular marker callout bubbles. They follow closely the Apple Maps pattern, and this puts quite heavy limitations on design downstream.

I really wish this repo would follow the strategy to potentially let all GUI be run in the javascript context and remove/hide all GUI-elements from the native context as an option. I'm not sure if it would require an underlying fork of mapbox-gl-native, but I'll take a look when I have time.

In most cases, replacing the mapbox-native GUI elements could be done by simply emitting javascript events on events that would normally trigger a GUI state change, and cancel the underlying GUI change. It should require much work, for now – i think it would only require two events:

1. on-map-rotation: Must contain map bearing to show/hide compass
2. on-marker-tap: Must contain: [lng, lat], title, id, subtitle

I can show the users location by setting showUserLocation to true but is there also a way to get the lat/lng values of the user via the plugin?

First of all thanks for this great plugin.
Is this possible?