{"id":13531302,"url":"https://github.com/plainheart/echarts-extension-gmap","last_synced_at":"2025-06-19T10:35:05.216Z","repository":{"id":39997815,"uuid":"270286682","full_name":"plainheart/echarts-extension-gmap","owner":"plainheart","description":"🌎 A Google Map (https://www.google.com/maps) extension for Apache ECharts (https://github.com/apache/echarts)","archived":false,"fork":false,"pushed_at":"2024-09-24T05:05:57.000Z","size":652,"stargazers_count":56,"open_issues_count":1,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T03:05:22.428Z","etag":null,"topics":["data-visualization","echarts","echarts-extension","echarts-gmap","echarts-google-map","echarts-map","echarts4","echarts5","google","google-maps"],"latest_commit_sha":null,"homepage":"https://github.com/plainheart/echarts-extension-gmap","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plainheart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-07T11:36:18.000Z","updated_at":"2025-03-25T12:38:33.000Z","dependencies_parsed_at":"2024-06-19T00:19:18.623Z","dependency_job_id":"6a717149-ab34-4427-97ad-0d49989b3795","html_url":"https://github.com/plainheart/echarts-extension-gmap","commit_stats":{"total_commits":147,"total_committers":3,"mean_commits":49.0,"dds":"0.027210884353741527","last_synced_commit":"b2755c6ee9e9cc50b1119fe210356e20ac72979a"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plainheart%2Fecharts-extension-gmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plainheart%2Fecharts-extension-gmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plainheart%2Fecharts-extension-gmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plainheart%2Fecharts-extension-gmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plainheart","download_url":"https://codeload.github.com/plainheart/echarts-extension-gmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249173061,"owners_count":21224481,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-visualization","echarts","echarts-extension","echarts-gmap","echarts-google-map","echarts-map","echarts4","echarts5","google","google-maps"],"created_at":"2024-08-01T07:01:01.854Z","updated_at":"2025-04-15T23:54:08.028Z","avatar_url":"https://github.com/plainheart.png","language":"JavaScript","funding_links":[],"categories":["Extensions"],"sub_categories":["Videos"],"readme":"[![NPM version](https://img.shields.io/npm/v/echarts-extension-gmap.svg?style=flat)](https://www.npmjs.org/package/echarts-extension-gmap)\n[![Build Status](https://github.com/plainheart/echarts-extension-gmap/actions/workflows/build.yml/badge.svg)](https://github.com/plainheart/echarts-extension-gmap/actions/workflows/build.yml)\n[![NPM Downloads](https://img.shields.io/npm/dm/echarts-extension-gmap.svg)](https://npmcharts.com/compare/echarts-extension-gmap?minimal=true)\n[![jsDelivr Downloads](https://data.jsdelivr.com/v1/package/npm/echarts-extension-gmap/badge?style=rounded)](https://www.jsdelivr.com/package/npm/echarts-extension-gmap)\n[![License](https://img.shields.io/npm/l/echarts-extension-gmap.svg)](https://github.com/plainheart/echarts-extension-gmap/blob/master/LICENSE)\n\n## Google Map extension for Apache ECharts\n\n[中文说明](https://github.com/plainheart/echarts-extension-gmap/blob/master/README.zh-CN.md)\n\n[Online example on CodePen](https://codepen.io/plainheart/pen/VweLGbR)\n\nThis is a Google Map extension for [Apache ECharts](https://echarts.apache.org/en/index.html) which is used to display visualizations such as [Scatter](https://echarts.apache.org/en/option.html#series-scatter), [Lines](https://echarts.apache.org/en/option.html#series-lines), [Heatmap](https://echarts.apache.org/en/option.html#series-heatmap), and [Pie](https://echarts.apache.org/en/option.html#series-pie).\n\n### Examples\n\n[Scatter](https://github.com/plainheart/echarts-extension-gmap/tree/master/examples/scatter.html)\n\n[Lines](https://github.com/plainheart/echarts-extension-gmap/tree/master/examples/lines.html)\n\n[Heatmap](https://github.com/plainheart/echarts-extension-gmap/tree/master/examples/heatmap.html)\n\n[Pie](https://github.com/plainheart/echarts-extension-gmap/tree/master/examples/pie.html)\n\n![Preview](https://user-images.githubusercontent.com/26999792/202892350-5a7df14e-18ea-4f98-9a62-f55d29ad9a49.png)\n\n### Installation\n\n```shell\nnpm install echarts-extension-gmap --save\n```\n\n### Import\n\nImport packaged distribution file `echarts-extension-gmap.min.js` and add Google Map API script and ECharts script.\n\n```html\n\u003c!-- import JavaScript API of Google Map, please replace the key with your own key --\u003e\n\u003cscript src=\"https://maps.googleapis.com/maps/api/js?key={key}\"\u003e\u003c/script\u003e\n\u003c!-- import echarts --\u003e\n\u003cscript src=\"/path/to/echarts.min.js\"\u003e\u003c/script\u003e\n\u003c!-- import echarts-extension-gmap --\u003e\n\u003cscript src=\"dist/echarts-extension-gmap.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can also import this extension by `require` or `import` if you are using webpack or any other bundler.\n\n\n```js\n// use require\nrequire('echarts');\nrequire('echarts-extension-gmap');\n\n// use import\nimport * as echarts from 'echarts';\nimport 'echarts-extension-gmap';\n```\n\nOr use a CDN\n\n[jsdelivr](https://www.jsdelivr.com/)\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/echarts-extension-gmap/dist/echarts-extension-gmap.min.js\"\u003e\u003c/script\u003e\n```\n\n[unpkg](https://unpkg.com/)\n\n```html\n\u003cscript src=\"https://unpkg.com/echarts-extension-gmap/dist/echarts-extension-gmap.min.js\"\u003e\u003c/script\u003e\n```\n\nThis extension will register itself as a component of `echarts` after it is imported.\n\n### Usage\n\nThis extension can be configured simply like [geo](https://echarts.apache.org/en/option.html#geo).\n\n```js\noption = {\n  // load gmap component\n  gmap: {\n    // initial options of Google Map\n    // See https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions for details\n    // initial map center, accepts an array like [lng, lat] or an object like { lng, lat }\n    center: [108.39, 39.9],\n    // center: { lng: 108.39, lat: 39.9 },\n    // initial map zoom\n    zoom: 4,\n\n    // whether echarts layer should be rendered when the map is moving. `true` by default.\n    // if false, it will only be re-rendered after the map `moveend`.\n    // It's better to set this option to false if data is large.\n    renderOnMoving: true,\n    // the zIndex of echarts layer for Google Map. `2000` by default.\n    echartsLayerZIndex: 2019,\n    // whether to enable gesture handling. `true` by default.\n    // since v1.4.0\n    roam: true\n\n    // More initial options...\n  },\n  series: [\n    {\n      type: 'scatter',\n      // use `gmap` as the coordinate system\n      coordinateSystem: 'gmap',\n      // data items [[lng, lat, value], [lng, lat, value], ...]\n      data: [[120, 30, 8], [120.1, 30.2, 20]],\n      encode: {\n        // encode the third element of data item as the `value` dimension\n        value: 2,\n        lng: 0,\n        lat: 1\n      }\n    }\n  ]\n};\n\n// Get the instance of Google Map\nvar gmap = chart\n  .getModel()\n  .getComponent('gmap')\n  .getGoogleMap();\n// Add some markers to map\nvar marker = new google.maps.Marker({ position: gmap.getCenter() });\nmarker.setMap(gmap);\n// Add TrafficLayer to map\n// var trafficLayer = new google.maps.TrafficLayer();\n// trafficLayer.setMap(gmap);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplainheart%2Fecharts-extension-gmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplainheart%2Fecharts-extension-gmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplainheart%2Fecharts-extension-gmap/lists"}