Displaying multiple entries from the same location within single popup

[sekomarek]

Hello Andreas,

I have feature request for your great plugin. It would be great if entries with same location could be displayed in one popup. Currently only one entry is displayed, if multiple entries have same longitude and latitude.

For example, if I have entries in db like:

Server name	Latitude	Longitude	Value
ServerA	13.20	75.50	1
ServerB	13.20	75.50	1
ServerC	13.20	75.50	1

In popup on map, only one entry is displayed:

Instead, I would like to see all entries in popup:

I am using InfluxDB 1.7.4 and Grafana 6.2.5.

Best regards, Marek.

[amotl]

Dear Marek,

thanks for writing in and for transferring this from the issue you created at https://github.com/grafana/worldmap-panel/issues/233 already.

This feels like some kind of aggregation over the data in order to populate the popup contents, right? I am imagining there will be three circles already, but they are being rendered on top of each other. Nevertheless, this won't solve your problem as I recognize you would like to see all of these aggregated within a single marker/circle.

I will be happy to consider getting into the details when working on the next development iteration. However, I currently can't promise about a time frame and will be traveling until the 7th of December or so.

Feel free to get back to me and bump this issue accordingly if you don't hear anything back.

With kind regards, Andreas.

[sekomarek]

Hello Andreas,

Thank you for your response.

Yes you are right, three circles are currently rendered on top of each other, but I want to see all data within single circle.

Sure, I understand, enjoy your travels :)

Best regards, Marek.

[amotl]

Introduction

Another user of Luftdatenpumpe [1] has been hit by the same problem.

Observations

At a specific location where air quality measurement equipment has been installed, there are actually two different sensors which share the same physical location on a 2D projection level.

From their location information

{
  "longitude": "4.432",
  "id": 11009,
  "country": "BE",
  "indoor": 0,
  "altitude": "3.5",
  "exact_location": 0,
  "latitude": "51.21"
}

vs.

{
  "longitude": "4.432",
  "id": 10895,
  "country": "BE",
  "indoor": 0,
  "altitude": "3.1",
  "exact_location": 0,
  "latitude": "51.21"
}

we can see their location already differ within the altitude position - 3.5 meters vs. 3.1 meters.

Thoughts

Would there be a quick fix for this in the Grafana Map Panel? I can see two pathways to proceed:

1. Show only one point on the map, but show both values by aggregating them into a single popup like outlined by @sekomarek already.

2. Let Luftdatenpumpe add some jitter (distortion) by adding - let's say 0.001 - to the lat/lon when there are points with the same geohash. The two stations will likely still be visible/rendered at roughly the same spot but will have two unique coordinates slightly near each other. However, using this approach would still not fix this issue for other applications using Worldmap.

[1] Supporting the Flanders Environment Agency (VMM) by analyzing and visualizing air quality sensor data with InfluxDB and Grafana

[amotl]

Looking at Leaflet.markercluster

Personally, I believe finally introducing Leaflet.markercluster [1] here would solve these issues in a generic way without having to fiddle with either

• the ingesting pipeline as outlined above at 2.
• the mechanics within the Map Panel in order to aggregate measurement values coming from distinct sensors at the same lat/lon positions into a single popup as outlined by @sekomarek.

Andy Maloney also writes about this in more detail [2].

What to you think about it?

While I definitely want to introduce that feature to Grafana Map Panel anyway, I would love to discuss this with @sekomarek, @wetterfrosch and maybe also @opeeters in more detail to hear about their thoughts on it. I am humbly asking you to invest a little bit more of deep thinking together with me. My thoughts are: Will introducing clustering in this spirit just sweep away the issue without further ado or will it go into a totally wrong direction and might introduce other issues, essentially not quite giving us DWIM here?

[1] https://github.com/Leaflet/Leaflet.markercluster [2] https://asmaloney.com/2015/06/code/clustering-markers-on-leaflet-maps/

[amotl]

Hi again,

I've deliberately took the chance to start a discussion about Developing advanced maps with Leaflet, OpenStreetMap and Grafana and will be happy to see people join.

We and others coming here in the future might actually share similar ideas about improving the capabilities when creating maps - interactive or not - with Grafana, so we might well want to look beyond same-position-value-aggregation and marker clustering together while we go.

Cheers, Andreas.

cc @sekomarek, @wetterfrosch, @d-roet, @opeeters, @tobiasdirksen, @ryantxu

[amotl]

Hi there,

I am currently looking into how to implement this. While it's not that easy, grouping values from multiple data points at the same location into a single popup might be doable.

However, I would like to mention that does not solve the issue of the remaining open question when deciding about the circle size and circle color as both attributes also depend on the value of the data point.

While recognizing this is slightly off-topic to the OPs question, it is actually popping up right know when looking at the code. Maybe some of you can also put in some thoughts here.

Edit: I created issue #35 for discussing that detail.

Cheers, Andreas.

cc @d-roet, @wetterfrosch

[amotl]

Dear @sekomarek, @d-roet and @wetterfrosch,

this feature request might have been resolved with version 0.8.0 in an ad hoc manner.

We will want to address more things within #35 in the future.

With kind regards, Andreas.

[sekomarek]

Dear @amotl,

Thank you for implementing this feature! It is exactly how I meant it. I will check #35 also.

Best regards, Marek.

[ianrussel]

Hi @amotl , I have data with a single state with multiple lat lang, how to have multiple circles according to latlang? When I tried, I only see one circle.Example data

`[
{
    "id": 107,
    "physical_address": "Cologix TOR1\r\n151 Front Street West\r\nOntario\r\nToronoto\r\nM5J 2N1\r\nCanada",
    "shipping_address": "Cologix TOR1\r\n151 Front Street West\r\nOntario\r\nToronoto\r\nM5J 2N1\r\nCanada",
    "latitude": "43.644940",
    "longitude": "-79.383770",
    "key": "Toronto"
},
{
    "id": 81,
    "physical_address": "Equinix TR2\r\n45 Parliament Street\r\nToronto\r\nOntario\r\nM5A 2Y5\r\nCanada",
    "latitude": "43.650820",
    "longitude": "-79.361390",
    "key":"Toronto"
},`