echarts-extension-gmap
echarts-extension-gmap copied to clipboard
plainheart
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 ?
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;
}
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 ?
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/[email protected]/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: [
...
},
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;
}
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
@nico-robert I got it. Please add position: relative into the #echarts-google-map block.