grafana-toolbox / panodata-map-panel

Map Panel for Grafana with improved convenience, robustness and features. Friendly fork of the original Grafana Worldmap Panel. Currently not maintained, but verified to work up to Grafana 9.

Home Page:https://community.panodata.org/t/grafana-map-panel/121

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Upgrade to most recent version of Leaflet

amotl opened this issue · comments

Hi there,

currently, this repository includes Leaflet 1.3.1 on behalf of the src/libs/leaflet.js file. However, it should be better included by adding it as a runtime dependency into package.json.

Within #78, we are looking at integrating Leaflet-Geoman and I believe it will be a good idea to also bump to the most recent version of Leaflet when/before doing that.

With kind regards,
Andreas.

When doing this transition, we will have to take care not to lose any changes made to this file on the way [1]. Specifically,
04bcb59 added an autoWidth setting to the Popup options.

// @option autoWidth: Boolean = true
// Set it to `false` if you don't want to compute
// and set the width of a opened popup automatically.
autoWidth: true,

This option, when disabled, will mask the whole section for computing the width for the popup automatically within the _updateLayout method.

if (this.options.autoWidth) {
  style.width = '';
  style.whiteSpace = 'nowrap';

  var width = container.offsetWidth;
  width = Math.min(width, this.options.maxWidth);
  width = Math.max(width, this.options.minWidth);

  style.width = (width + 1) + 'px';
  style.whiteSpace = '';
}

The rationale of this improvement has been outlined at [2] and [3].

Disable automatic width-calculation of popup labels

Toggling the new autoWidthLabels option to false will disable automatic width-calculation of popup labels. This helps controlling the popup rendering not to clip when displayed within narrow-sized maps.

Before/After

image image


[1] https://github.com/panodata/grafana-map-panel/commits/develop/src/libs/leaflet.js
[2] https://community.panodata.org/t/grafana-map-panel/121
[3] https://community.hiveeyes.org/t/developing-grafana-worldmap-ng/1824/5

34febf7f extracts the autoWidth feature from the core leaflet.js again. If we are lucky, we can now upgrade to a more recent version of Leaflet. Nevertheless, we should ask upstream to add this feature to its code base.