Wrong circle color when multiple points have the same latitude/longitude

[Paul Notebaart]

Hi,

First of all I want to thank you for all the hard work to create this map. I like the click link functionality and extra features a lot.
I'm using Grafana 7.2.1 and InfluxDB 2.0 cloud as datasource.

I've got an issue when multiple measurements have the same longitude and latitude.
In my case, each measurement value stands for an error level (0 or 1 =no error, 2 = warning, 3 = alert) to which I set threshold colors.

When hovering the location, I see all separate measurements grouped in a dialog, but the shown dot color is not the highest or total of all measurements.

It doesn't matter if I set aggregation to total, max, current, etc.

If I set my Metric field (ErrorLevel) to value 0, the item is not shown on the map (it was in the original Worldmap panel).

As a workaround I shifted devices with the same location but different values 0.0001 degrees in longitude with a calculated column in my dataset.

A nice to have when multiple items share the same location: Clickable links in the popup dialog, so each separate item is clickable.

Best regards,
Paul

[Andreas Motl]

Dear Paul,

thanks for reporting your issue and also thanks for letting us know this plugin works with Grafana 7 already.

Regarding your specific question, can I humbly ask you to review #27 and #35, where we discussed similar things already? Both issues might reflect your feature request already. I see that we might have resolved some aspects of #27 through bde9969 already while we discussed other aspects within #35.

Apologies that I currently can't promise on any timeframe as I am busy with other obligations.

With kind regards,
Andreas.

cc @sekomarek, @d-roet, @wetterfrosch

[Andreas Motl]

Dear @paulfirstimpression,

@matschaffer is working on #77 to improve this plugin when using an ES data source with multiple metric aggregates per geo point, where it currently has some shortcomings. I wonder if this is the very thing you have mentioned here?

With kind regards,
Andreas.

[Paul Notebaart]

Dear Andreas,

I think that will partially solve the issue, concerning the popup and links.

If multiple metrics (different devices) will have the same longitude/latitude, but different values, only one circle is shown with only one color of one metric.

To explain it a bit further:

• A location has 10 separate devices
• Possible device status values: 0 = ok (green circle), 1 = warning (yellow circle), 2 = error (red circle).
• The higher the value, the bigger the circle
• 7 devices with value 0 - (green circle), 1 device with value 1 (yellow circle), 2 devices with value 2 (red circle)

What I see is only one green circle, no yellow and red.
If I click it it only takes the link to one device (probably #77 will solve that)

I played with the aggregate functions (to alway show max (2, red circle)), but that didn't work.

I made a workaround where value 1 shifts 0.0001 degrees in longitude and value 2 shifts -0.0001 degrees in longitude, to show all circles.

[Andreas Motl]

Dear Paul,

If multiple metrics (different devices) will have the same longitude/latitude, but different values, only one circle is shown with only one color of one metric.

So true. Because the circles will be drawn at the very same location, they overlap and just one circle will be both visible and accessible.

I made a workaround where value 1 shifts 0.0001 degrees in longitude and value 2 shifts -0.0001 degrees in longitude, to show all circles.

Ah! The idea to apply an artificial Y-offset in order to make the circles reappear was also suggested by @d-roet the other day. This workaround will have to be applied to the data source already, right? However, I see that we might also add it as an additional optional feature to the Grafana Plugin itself.

Coming from there, we added #35 to the discussion and identified marker stacking through Leaflet.Marker.Stack by @IvanSanchez as a viable solution without having to apply any such workarounds.

With kind regards,
Andreas.

[Andreas Motl]

@d-roet said at #35 (comment):

In https://carto.com/blog/stacking-chips-a-map-hack/ they show at the bottom that when you have a very high zoom level the stacks get an (artificial) Y-offset. Would that be a possibility?

---

Here’s a little javascript function that that returns a y-offset for a given zoom level.

   function getYOffset(zoom) {
     var yOffset = 655360; //offset in webmercator units at zoom level 0
     for(var i=0;i<zoom;i++) {
       yOffset = yOffset/2;
     }
     return yOffset;
   }  

For each zoom level above zero, the y-offset is cut in half. The offset is then used with a SQL template in CARTO.js to re-render the map whenever the user zooms, and the “stacks” appear the same no matter what zoom level you’re on.

Next time you find yourself facing the overlapping points problem, give this method a try and stack your chips!