Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
echarts-extension-gmap
Advanced tools
Readme
This is a Google Map extension for ECharts which is used to display visualizations such as Scatter, Line, Heatmap.
Refer to examples/index.html
npm install echarts-extension-gmap --save
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
if you are using webpack
.
require("echarts");
require("echarts-extension-gmap");
Or use a CDN
<script src="https://cdn.jsdelivr.net/npm/echarts-extension-gmap@latest/dist/echarts-extension-gmap.min.js"></script>
This extension will register itself as a component of echarts
after it is imported.
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],
// initial map zoom
zoom: 4,
// whether echarts layer should be rendered when the map is moving. Default is true.
// 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, default value is 2000.
echartsLayerZIndex: 2019
// 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);
FAQs
A Google Map(https://www.google.com/maps) extension for Apache ECharts (https://github.com/apache/echarts)
The npm package echarts-extension-gmap receives a total of 696 weekly downloads. As such, echarts-extension-gmap popularity was classified as not popular.
We found that echarts-extension-gmap demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.