2

I'm trying to build an app using the PhoneGap tool set and want to show a map using mapbox. I'm developing it in html, js & css and testing it on an android device using the PhoneGap desktop server tool.

I have successfully integrated the plugin via the config.xml file

<plugin name="cordova-plugin-mapbox" spec="1.2.3"> <variable name="ACCESS_TOKEN" value="[secret access token here]" /> </plugin>

And I have tried to reference the documents for the plugin here, however I can't see how to actually generate a mapbox map in a div using this plugin?

Currently I've tried copying their demo code like inside a device ready call:

`

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    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));
      }
    )};

`

But usually (in a browser / web app) I'd expect to see a new map box object created and associated with a div into which the map is drawn, but I don't see how to do that with this plug in.

Gideon
  • 1,878
  • 4
  • 40
  • 71

0 Answers0