Size gmap - Githubissues

nico-robert commented 1 year ago

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 ?

plainheart commented 1 year ago

It should have nothing to do with the tooltip. Just change the style css to

* {
  margin: 0;
  padding: 0;
}
#echarts-google-map {
  width: 800px;
  height: 1200px;
}

nico-robert commented 1 year ago

It should have nothing to do with the tooltip

I was as surprised as you.

Just change the style css to

I applied your style and I have the same result, the size is not respected.

Can you reproduce this behavior ?

plainheart commented 1 year ago

No. I can't. I tried with the demo I provided in the README file.

nico-robert commented 1 year ago

Below the demo in the README file :

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="cleartype" content="on">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>scatter - echarts-extension-gmap</title>
    <!-- please replace {key} with your own API key -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={key}"></script>
    <!-- echarts CDN -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <!-- echarts gmap extension -->
    <!-- <script type="text/javascript" src="../dist/echarts-extension-gmap.min.js"></script> -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-extension-gmap@1.5.0/dist/echarts-extension-gmap.min.js"></script>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      #echarts-google-map,
      body,
      html {
        width: 800px;
        height: 1200px;
      }
    </style>
  </head>

  <body>
    <div id="echarts-google-map"></div>
    <!-- data is only for example -->
    <script type="text/javascript">
      var option = {
        // google map 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...
        },
        // tooltip: {},
        animation: true,
        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
              ]
            ],
            symbolSize: 20,
            encode: {
              // encode the third element of data item as the `value` dimension
              value: 2,
              lng: 0,
              lat: 1
            },
            itemStyle: {
              color: '#00c1de'
            }
          }
        ]
      };
      // initialize chart
      var chart = echarts.init(document.getElementById("echarts-google-map"));
      chart.setOption(option);
      // get google map instance
      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);
    </script>
  </body>

</html>

With tooltip :

        },
        tooltip: {},
        animation: true,
        series: [
          ...
        },

plainheart commented 1 year ago

It might be a compatibility issue with Safari. Could you try another browser, for example, Chrome or Firefox? And please change the following code

#echarts-google-map,
body,
html {
   width: 800px;
   height: 1200px;
}

to

#echarts-google-map {
   width: 800px;
   height: 1200px;
}

nico-robert commented 1 year ago

And please change the following code

Done

Could you try another browser, for example, Chrome or Firefox?

Tested with Chrome + Firefox same effect, if tooltip is not present the size is not respected

plainheart commented 1 year ago

@nico-robert I got it. Please add position: relative into the #echarts-google-map block.

nico-robert commented 1 year ago

yes it works , thank you @plainheart

plainheart / echarts-extension-gmap

Size gmap #11