plainheart / echarts-extension-gmap Goto Github PK

🌎 A Google Map (https://www.google.com/maps) extension for Apache ECharts (https://github.com/apache/echarts)

Home Page: https://github.com/plainheart/echarts-extension-gmap

License: MIT License

JavaScript 100.00%

echarts google-maps echarts-google-map data-visualization echarts-extension google echarts-gmap echarts4 echarts-map echarts5

echarts-extension-gmap's Introduction

Google Map extension for Apache ECharts

中文说明

Online example on CodePen

This is a Google Map extension for Apache ECharts which is used to display visualizations such as Scatter, Lines, Heatmap, and Pie.

Examples

Installation

npm install echarts-extension-gmap --save

Import

Import packaged distribution file echarts-extension-gmap.min.js and add Google Map API script and ECharts script.

<!-- import JavaScript API of Google Map, please replace the key with your own key -->
<script src="https://maps.googleapis.com/maps/api/js?key={key}"></script>
<!-- import echarts -->
<script src="/path/to/echarts.min.js"></script>
<!-- import echarts-extension-gmap -->
<script src="dist/echarts-extension-gmap.min.js"></script>

You can also import this extension by require or import if you are using webpack or any other bundler.

// use require
require('echarts');
require('echarts-extension-gmap');

// use import
import * as echarts from 'echarts';
import 'echarts-extension-gmap';

Or use a CDN

jsdelivr

<script src="https://cdn.jsdelivr.net/npm/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>

unpkg

<script src="https://unpkg.com/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>

This extension will register itself as a component of echarts after it is imported.

Usage

This extension can be configured simply like geo.

option = {
  // load gmap component
  gmap: {
    // initial options of Google Map
    // See https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions for details
    // initial map center, accepts an array like [lng, lat] or an object like { lng, lat }
    center: [108.39, 39.9],
    // center: { lng: 108.39, lat: 39.9 },
    // initial map zoom
    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,
    // the zIndex of echarts layer for Google Map. `2000` by default.
    echartsLayerZIndex: 2019,
    // whether to enable gesture handling. `true` by default.
    // since v1.4.0
    roam: true

    // More initial options...
  },
  series: [
    {
      type: 'scatter',
      // use `gmap` as the coordinate system
      coordinateSystem: 'gmap',
      // data items [[lng, lat, value], [lng, lat, value], ...]
      data: [[120, 30, 8], [120.1, 30.2, 20]],
      encode: {
        // encode the third element of data item as the `value` dimension
        value: 2,
        lng: 0,
        lat: 1
      }
    }
  ]
};

// Get the instance of Google Map
var gmap = chart
  .getModel()
  .getComponent('gmap')
  .getGoogleMap();
// Add some markers to map
var marker = new google.maps.Marker({ position: gmap.getCenter() });
marker.setMap(gmap);
// Add TrafficLayer to map
// var trafficLayer = new google.maps.TrafficLayer();
// trafficLayer.setMap(gmap);

echarts-extension-gmap's People

Contributors

Stargazers

Watchers

Forkers

igormalinovic neoayi ralic paulusyeung cofcat456 maeln mantic-data

echarts-extension-gmap's Issues

Is it possible to combine GeoJSON with this extension ?

Hello,
I was wondering if the series in this chart:
https://echarts.apache.org/v4/examples/en/editor.html?c=map-usa

Could be used together with this google maps extension.

Here google maps shows how to include geoJSON there:

https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop

Any ideas on how to combine both ?

Like this:
https://leafletjs.com/examples/choropleth/

The echart/zrender canvas is not resized when Google Map goes fullscreen.

Hi !

I have an issue where the echart/zrender canvas onto which echart draw the points is not resized when Google Map goes fullscreen.
This lead to an issue where part of the points become "hidden" because they are outside the canvas, but they are still whithin the map boundaries where they should be drawn.
Here are some screenshots that might be more understandable:

When not in fullscreen, everything works as expected.

We can clearly see that the canvas cover the whole map.

But when we go fullscreen (using the google map fullscreen button) :

We clearly see that the canvas didn't change size (it gain a few pixel on the width but that's it), and only cover part of the map. This makes it so that the point are only visible on the part of the map that the canvas cover, and everything else is cutoff.

Is there anyway to fix this ?
I use the latest version (1.5.0) with echart-for-react.

TypeError: echarts.init is not a function

can not support graph?

在线示例中,将2处scatter改为graph后，显示不出来。
在本地代码中运行能看到产生错误。

echarts带的百度扩展可以正常使用graph,
请问有没有办法在google map中支持graph?(以及支持graph的force)

Can this extension implement polygons and polylines on Google Map?

if i import or require this package how to set gmap key

Is it workds with dataset? Could you show an example?

Is it support using the dataset?

Angular 2+ support?

Do you have an example using it by angular 2+?

brush selection

great library! can't get the traffic (and other Google layers) anywhere else.

Going deeper however, I found a problem - how to select(brush) series on the map without panning(roam). This has been fixed in ECharts geo maps somehow, see here. My guess is fixing it has to do with event.stopPropagation() and/or event.cancelBubble. When the selection(brush) is active, the mouse down/move event should not propagate further to the map.
Here is a demo

Lines problems

Hi.

Could you please give me a small example on how to use Line type with your extension?
I'm having some problems I think regarding series data format...

I keep getting the error:
"TypeError: Cannot read property 'dataToPoint' of null"

Thank you very much!

Size gmap

In your example heatmap.html you defined the size with this :

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    html, body, #echarts-google-map {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>

I wanted to change the size by changing the width and height values by this :

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    html, body, #echarts-google-map {
      width: 800px;
      height: 1200px;
      overflow: hidden;
    }
  </style>

it didn’t change anything... However if I add tooltip: {}, it works

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #echarts-google-map {
      width: 800px;
      height: 1200px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="echarts-google-map"></div>
  <!-- data is only for example -->
  <script type="text/javascript">
    var heatmapDataURI = 'https://fastly.jsdelivr.net/gh/apache/echarts-examples/public/data/asset/data/hangzhou-tracks.json';
    var option = {
      // google map component
      gmap: {
        // More initial options...
      },
      tooltip : {},
      visualMap: {
        // ...
      },

Do you think this is a bug or I’m not doing the right thing to change the map dimensions ?

Echarts not reflow

When used Gmap in a container, after Gmap is loaded and clicked full screen button ,the Canvas not reflow.
Canvas is not the same size as windows .

How I solved it in project.

<template>
 <div id='gMap'></div>
</template>

// Idle 
this.gmap = this.chart.getModel().getComponent('gmap').getGoogleMap()
this.gmap.addListener('idle', () => {
  const domGmstyle = document.getElementsByClassName('gm-style')[0] as HTMLDivElement
  const domGmwrap = document.getElementById('gMap') as HTMLDivElement
  if(domGmstyle.offsetHeight === window.innerHeight 
    && domGmstyle.offsetWidth === window.innerWidth
  ){ // Fullscreen
    domGmwrap.style.position = 'fixed'
    this.chart.resize()
  }
})