[SOLVED] Mapbox HTML Canvas

Data management
1

Hello,

I am trying to create Mapbox HTML Canvas by referring example mentioned in following url:

http://help.ubidots.com/developer-guides/html-canvas-widget-examples

var TOKEN = 'Your token'; //added default token of my account
var VARIABLE = 'Your variable'; //added variable which I wanted to display over map

var key = 'Mapbox access toaken' //added access token of my mapbox account;

function getDataFromVariable(variable, token, callback) {
  var url = 'https://industrial.api.ubidots.com/api/v1.6/variables/' + variable + '/values';
  var headers = {
    'X-Auth-Token': token,
    'Content-Type': 'application/json'
  };
  var params = {

page_size: 1 
  }; // replaced educational url with industrial url

added following 3rd party library:

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js

After saving html canvas,I am not able to see any map. Please let me know if I missing something.

Best Regards,
Amit Golhani

2

Dear user,

As I can noted you are missing one of the libraries required, please make sure of included all of the libraries:

All the best,
Maria C.

3

Thanks! It worked.

Would it be possible for you to share an example of placing a device on Mapbox?

Best Regards,
Amit Golhani

4

To place a device on the Mapbox you should create the HTML canvas widget for a variable which have the coordinates of your device using the variable id. To send the coordinates you have to include them as context in a variable called “position”, “gps” or “location”. For more information reference the Ubidots REST API Reference. Also, the following article will serve you as guide.

All the best,
Maria C.

5

Having some trouble displaying the map here…