Polycolor Map Lines

[mattw01]

Summary

Teslamate currently uses the Grafana TrackMap plugin to display map data. As you've probably found, TrackMap only allows a single line color to be set. I've been looking for a way to get this to be a color gradient so an additional data source can be mapped to it (such as speed).

Technical Details:

The TrackMap plugin uses Leaflet mapping library. I found the leaflet-polycolor plugin that draws multiple colors along a polyline instead of a single solid color. In the case of teslamate, this can be mapped to speed, power, temperature, etc. Also hoping to get a query working for the Visited dashboard to display how frequently paths are traveled.

Obstacle 1: Setting up a dev environment

It took me longer than it should have to setup a dev instance of Grafana and get a datasource running with a few mock points. Eventually after a bit of trial and error I got a setup working with a basic MySQL table.

Issue 1: leaflet-polycolor Out-of-Date

Leaflet-polycolor was developed based on leaflet 1.2.0. TrackMap currently uses leaflet 1.5.1. There were breaking changes in 1.4.0 with the removal of _drawnLayers. It was simple enough to remove the line referencing the _drawnLayers object and get it working again.

Issue 2: leaflet-polycolor Build

Leaflet-polycolor uses brunch as it's build tool. Using these built files in TrackMap and Grafana causes some errors with globals which I wasn't able to figure out. Building using TrackMap's grunt script worked though. They both seem to use babel to compile but again this is my first time working this deep with javascript. So I still need to figure out why brunch's output isn't working.
Built with brunch script
Built with grunt script

Issue 3: Deployment Plan

Once the build issue is figured out, I'm not sure the best course of action for deployment. Both leaflet-polycolor and TrackMap require changes. Publish new packages? PR leaflet-polycolor, then PR TrackMap?

The logic for normalizing the data and calculating the color gradient seem to be working well. I still need to do more testing on potential data source errors.
Current version can be found here

I'll continue looking into the leaflet-polycolor build issue and researching best practices for deployment of these modified packages. If anyone has any feedback or help, it would be greatly appreciated.

[adriankumpf]

This is pretty damn cool! Visualizing speed, power, temperature etc. with a color gradient would be awesome.

Regarding deployment, I think a PR leaflet-polycolor wouldn't even be required as it does not seem to be actively maintained anymore. Since the whole thing has only 140 lines, would it perhaps be easiest to include it in the source code of grafana-trackmap-panel?

When everything's working TeslaMate could use your fork until it gets merged into the main TrackMap repo.

[tomS3210]

Hello,
Polycolor MapLines to follow battery level could be interesting for long trips. Hope it will be integrated.
Thanks :-)