Native Mobile Maps from Telerik and Mapbox

I’m going to hazard a guess that one of the first things you did with your first smartphone was pull up a map, swipe around, and be more-than-slightly amazed at holding a virtual world in your hand. As mapping has matured in the browser, our mobile mapping apps have matured as well – from Google ruling the roost to a more competitive landscape today with Apple, Google, and Microsoft sharing success.

As mobile app developers, we need to create ever more engaging apps, and adding a map is critical in some cases. Today I’d like to introduce you a fantastic new mapping option for both hybrid and native app developers: Mapbox.

Yesterday’s Hybrid Mapping Options

Hybrid app (meaning Cordova/PhoneGap) developers have been creating apps with mapping features from a variety of sources. For the most part, they have been re-purposing straight web-based solutions – nothing truly native.

While Google Maps, Bing Maps, Leaflet, and Kendo UI’s mapping features all have their merits, none of them provide a truly native experience.

For a slightly dated (but still mostly valid) comparison of hybrid mapping options, take a look at this blog post.

Today’s Hybrid and Native Mapping Solution

I’m pleased to announce a new partnership between Telerik and Mapbox that brings two native mapping plugins for iOS and Android based on Mapbox technology: Mapbox for Cordova and Mapbox for NativeScript.

If you haven’t already heard of NativeScript, it is Telerik’s open source framework for developing truly native mobile apps using JavaScript and CSS. You can learn more at nativescript.org.

mapbox example map

Why Use Mapbox?

But, before we get into “how” we use these plugins, let’s first take a look at the “why”.

Why should you leverage a solution from Mapbox as opposed to industry heavyweights Google or Microsoft? Valid question, to which I propose three responses:

  1. Performance
  2. Open Source Maps (and Code)
  3. Ease of Use

Performance

When you’re talking about hybrid mapping versus native mapping, there is not much of a comparison. Hybrid maps are rendered on a WebView which is notorious for performance issues (warranted or not). Often times, it is best to take the hybrid aspect out of the conversation entirely when possible (and economical).

Mapbox works with on-device vector rendering using OpenGL. Data is delivered to the device and precisely rendered in real-time. Everything is hardware accelerated and fully optimized for mobile, which results in smooth, fast maps.

Vector maps are also roughly 1/4 the size of traditional raster implementations, which means greater performance in low-bandwidth environments.

mapbox nyc

Open Source Maps (and Code)

Mapbox’s solutions are fully open source. Likewise Telerik’s Cordova plugin and NativeScript plugin are both open source as well (MIT licensed).

It’s also important to note that Mapbox leverages OpenStreetMap (OSM) map tiles. Why is this important? OSM is, surprise, open source! Meaning you get far more detailed map tiles, updated more frequently, and available in far more countries than those supported by Apple, Google, or Microsoft.

Ease of Use

It’s one thing to offer up a native mapping solution, but it’s another to make it easy to use. With our Cordova and NativeScript plugins, we have abstracted the difficult parts of leveraging a map into a series of very simple commands.

Getting Started with Mapbox

Your first step is to sign up with Mapbox for free. After registration, navigate to Account > Apps > New token. Copy your “Default Secret Token” as that is what you’ll need during plugin installation.

With that completed, you can set up a free 30 day trial for the Telerik Platform. While you don’t need Telerik Platform to create a mobile app, it does make developing hybrid and native mobile apps much easier by providing:

  • Instantly available development environment (no SDK management)
  • Numerous device simulators and emulation options (with integrated debugging)
  • Use any JavaScript framework you want (from Kendo UI to Ionic, we have you covered)
  • Create an iOS app from Windows (you don’t need a Mac)

With your Mapbox and Telerik Platform accounts created, you can now try out the Cordova plugin or the NativeScript plugin!

Both plugins have full-fledged sample apps (see the either the Cordova or NativeScript sample app implementations). You can then clone these apps inside of the Telerik Platform by logging in and:

  • Click on the “Create app” button:

    telerik platform create app

  • Then choose “Advanced” and “Clone Repository” (make sure you paste in the URL of the sample app you’d like to clone):

    telerik platform clone app

  • Using the Telerik Platform you can then immediately run the app on a connected device to see the plugin in action:

    ios and android sample apps

Cordova Code Samples FTW!

Don’t want to dive head-first into a sample app? That’s ok. If you just want to see how easy it can be to embed a native map into your Cordova app with code, here is how you show a map:

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 here is how you add a marker to your map:

Mapbox.addMarkers(
  [
    {
      lat: 52.3602160, // mandatory
      lng: 4.8891680, // mandatory
      title: 'One-line title here', // no popup unless set
      subtitle: 'Infamous subtitle!' // can't span multiple lines, so keep it short and sweet
    },
    {
      ..
    }
  ]
);

There are plenty more code samples where these came from in the Cordova plugin documentation.

NativeScript Code Samples FTW!

These days we can’t talk about Cordova at Telerik without also talking about the JavaScript native equivalent, NativeScript. Here is how you show a Mapbox map with NativeScript (look familiar? It should, because it’s still just JavaScript!):

mapbox.show({
  accessToken: 'YOUR_API_ACCESS_TOKEN', // see 'Prerequisites' above
  style: 'emerald', // light|dark|emerald|satellite|streets , default 'streets'
  margins: {
    left: 40, // default 0
    right: 40, // default 0
    top: 450, // default 0
    bottom: 40 // default 0
  },
  center: { // optional without a default
    lat: 52.3702160,
    lng: 4.8951680
  },
  zoomLevel: 9.25, // 0-20, default 0
  showUserLocation: true, // default false - requires location permissions on Android which you can remove from AndroidManifest.xml if you don't need them
  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
  markers: [ // optional without a default
    {
      'lat': 52.3732160, // mandatory
      'lng': 4.8941680, // mandatory
      'title': 'Nice location', // recommended to pass in
      'subtitle': 'Really really nice location' // one line is available on iOS, multiple on Android
    }
  ]
}).then(
    function(result) {
      console.log("Mapbox show done");
    },
    function(error) {
      console.log("mapbox show error: " + error);
    }
)

Again, for more code samples and to access the plugin itself, take a look at our NativeScript plugin documentation.

Summary

With this new partnership between Telerik and Mapbox, we are aiming to provide both hybrid and native mobile app developers the ability to embed even more engaging native mapping experiences in their apps. Enjoy and let us know what you’d like to see next from the Verified Plugins Marketplace!

Comments

  • Don Price

    Thank you, Rob, this is precisely what the doctor ordered for one our projects. I love the fact that it is open source, native, and vector based. We use vector graphics for anything that *may* run atop a mobile device–including traditional websites, because people *may* want to view the website on a mobile device. Please keep up the great work!

  • Pingback: Dew Drop – January 25, 2016 (#2173) | Morning Dew()

  • kritsot

    Thanks Rob for all the info!!
    Since the application I try to build is supposed to be fully operable when offline,
    I want to ask if there is also support for offline maps for the cordova mapbox plugin?
    Of course I understand this must be supported mapbox-side first.

  • David Breitenbach

    From our senior Dev… can you help us figure out how to put web components on top of the native map: “It doesn’t bring the web components on top of native map UI out of the box”

    • Hi David – You have to leverage the native commands (exposed via the Cordova plugin – http://plugins.telerik.com/cordova/plugin/mapbox) in order to add things like polygons and markers. Otherwise it’s not possible to try and overlay web ui on top of a native control.

  • mtsunstrum

    Thanks Rob,

    Now that Mapbox supports offline maps, do you see any issues using Mapbox for NativeScript plugin and being able to exploit Mapbox’s recent offline map support ?

    • There is currently an issue we have with the new Mapbox SDK on Android and NativeScript – once that is resolved though we should be able to take advantage of the new goodies. Stay tuned: https://github.com/mapbox/mapbox-gl-native/issues/4761

      • mtsunstrum

        Thanks Rob … great news.

        iOS otherwise is good to go ?

        • It’s in progress, but I doubt if we will release anything until we have the same support on both platforms.

  • Daniel Neumayer

    Hi Rob,
    i would love to use this plugin but offline maps are crucial to my project. I was wondering if the Cordova plugin supports offline maps from mapbox by now?
    Thank you so much!
    Best, Daniel

  • Anuj Kumar

    I used the plugin for phonegap. I have problem with this when i installed the plugin and run the app it gives me error i.e proxy not found for mapbox

  • I’d love to try this in an ionic2 application .. but can’t seem to get Mapbox in scope – any hints?

  • Arthur Dolmajian

    For the life of me, I can’t figure out how to bind the map to a container (dom element, div). I’m working with Cordova and Framework7. Can anyone help?

  • Tony Loa

    Hi Rob. You say that maps and code are opensource, does it mean that I can do infinite number of requests for free ?