By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hi all. I love Thingsboard. It really is very cool software.

Can I make my own custom maps widget? I need to draw a line and only one line. I am tracking the location of a Water Pivot. Here is a sample of what I am doing.

http://demo.thingsboard.io/dashboards/76f7adb0-fafe-11e7-abe9-1d8d2edf4f93?publicId=62079880-f6e8-11e7-abe9-1d8d2edf4f93

What I am doing now is to send 2 lat longs every time I send the data. So that the widget will draw the line from the center point every time. But obviously that is not the correct way. As it draws 2 lines and will vanish if left for too long

So what I need is to have one static point that I configure and the the GPS module will send its location. Then the widget should draw the line from the center point to the position.

I hope somebody can help or point me in the correct direction.

Hello @JacoFourie I will do the same as you on a few days, as I have a pivot with GPS module connected to my supervisory system (SCADA).
On the next days I will connect and try visualization with thingsboard and maybe can help.

Hi. I assume that you have to use a Polyline like in this sample.

https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

But how to you modify the widget in Thingsboard to add the custom code ?

Hi! I developed with success a custom widget for a time series chart, but I'm not able to access the Google map object to modify the existing Google Map widget.
Starting from the fact that self.ctx.map is a TbMapWidgetV2 object, self.ctx.map.map should be a TbGoogleMap object and self.ctx.map.map.map should be a Google map object.
But, when I try to execute a Google method on this, I obtain the followin error:
undefined is not an object (evaluating 'gmap.getBounds')

What is wrong in the following code?

self.onInit = function() {
self.ctx.map = new TbMapWidgetV2('google-map',
false, self.ctx);
gmap = self.ctx.map.map.map;
gmap.getBounds();

Thanks in advance to anyone who can help me.

is there any documentation available to create a custom map widget?
Because I'm not able to add a custom google map in thingsboard widget
when I add my javaScript code fetch output from google map API but the request gets blocked.
I'm using the community edition of thingsboard.