Documentationbreadcrumb arrow Pluginsbreadcrumb arrow Business Chartsbreadcrumb arrow Mapsbreadcrumb arrow Baidu
Grafana Cloud Enterprise Open source

Baidu maps

Baidu Maps is loaded via API v3 and require an access key.

Access key

You can get the access key at https://lbsyun.baidu.com/apiconsole/key#/home.

Demo

Try the panel with Baidu Maps in the edit mode.

Features

  • The loading of Baidu Maps takes around 2-3 seconds.
  • The bmapReady callback function is executed during the loading. You can update the name in the panel options.
  • During the loading, you can show an animation using the code below.

Baidu Maps is supported from Business Charts panel 3.6.0.

Example

js 
/**
 * Baidu Maps
 */
const bmap = {
  tooltip: {
    trigger: "item",
  },
  bmap: {
    zoom: 5,
    roam: true,
  },
};

/**
 * Loading
 */
const loading = {
  graphic: {
    elements: [
      {
        type: "group",
        left: "center",
        top: "center",
        children: new Array(7).fill(0).map((val, i) => ({
          type: "rect",
          x: i * 20,
          shape: {
            x: 0,
            y: -40,
            width: 10,
            height: 80,
          },
          style: {
            fill: "#5470c6",
          },
          keyframeAnimation: {
            duration: 1000,
            delay: i * 200,
            loop: true,
            keyframes: [
              {
                percent: 0.5,
                scaleY: 0.3,
                easing: "cubicIn",
              },
              {
                percent: 1,
                scaleY: 1,
                easing: "cubicOut",
              },
            ],
          },
        })),
      },
    ],
  },
};

/**
 * Maps are Ready
 */
window.bmapReady = () => {
  context.grafana.notifySuccess(["Baidu Maps", "Loaded..."]);
  context.panel.chart.setOption(bmap, (notmerge = true));
};

return window.BMap ? bmap : loading;