Ubidots Community

[SOLVED] Mapbox HTML Canvas

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

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.

Thanks! It worked.

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

Best Regards,
Amit Golhani

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.

Having some trouble displaying the map here…