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

Hi there 👋

Thank you for visiting! Have a nice day~ ✨

echarts-extension-gmap's People

Contributors

Stargazers

Watchers

Forkers

igormalinovic neoayi ralic paulusyeung cofcat456 maeln mantic-data

echarts-extension-gmap's Issues

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 ?

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/

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()
  }
})

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.

Can this extension implement polygons and polylines on Google Map?

Angular 2+ support?

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

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

Is it support using the dataset?

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

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

Thank you very much!