Google Maps

info

Supported since Apache ECharts visualization panel 3.8.0.

Google Maps are loaded using Maps API and require Access Key. You can get it from https://console.cloud.google.com/apis/credentials.

• Loading Google Maps takes ~1-2 seconds.
• The callback function gmapReady will be executed on load. The name can be changed in the Panel options.
• While loading, animation can be displayed using the following code.

Google Maps.

Function

const gmap = {
  gmap: {
    /**
     * Center and Zoom
     */
    center: { lng: -81.76, lat: 27.99 },
    zoom: 4,

    // whether echarts layer should be rendered when the map is moving. `true` by default.
    // if false, it will only be re-rendered after the map `moveend`.
    // It's better to set this option to false if data is large.
    renderOnMoving: true,
  },
  series: [
    {
      type: "scatter",
      coordinateSystem: "gmap",
      // data items [[lng, lat, value], [lng, lat, value], ...]
      data: [[-81.76, 27.99, 100]],
      encode: {
        // encode the third element of data item as the `value` dimension
        value: 2,
        lng: 0,
        lat: 1,
      },
    },
  ],
};

/**
 * 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.gmapReady = () => {
  notifySuccess(["Google Maps", "Loaded..."]);
  echartsInstance.setOption(gmap, (notmerge = true));
};

return typeof google === "object" && typeof google.maps === "object"
  ? gmap
  : loading;