https://github.com/andybuibui/echarts-extension-azure-map
🌎 An Azure Map (https://azure.microsoft.com/en-us/products/azure-maps/) extension for Apache ECharts (https://github.com/apache/echarts)
https://github.com/andybuibui/echarts-extension-azure-map
azure azure-maps azuremaps data-visualization echarts echarts-azure-map echarts-azuremap echarts-extension echarts-for-react echarts5
Last synced: about 1 year ago
JSON representation
🌎 An Azure Map (https://azure.microsoft.com/en-us/products/azure-maps/) extension for Apache ECharts (https://github.com/apache/echarts)
- Host: GitHub
- URL: https://github.com/andybuibui/echarts-extension-azure-map
- Owner: andybuibui
- License: mit
- Created: 2024-06-06T15:07:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-12T05:25:52.000Z (almost 2 years ago)
- Last Synced: 2025-04-13T12:07:41.526Z (about 1 year ago)
- Topics: azure, azure-maps, azuremaps, data-visualization, echarts, echarts-azure-map, echarts-azuremap, echarts-extension, echarts-for-react, echarts5
- Language: JavaScript
- Homepage: https://github.com/andybuibui/echarts-extension-azure-map
- Size: 3.19 MB
- Stars: 18
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Echarts-Extension-Azure-Map
[](https://www.npmjs.org/package/echarts-extension-azure-map) [](https://npmcharts.com/compare/echarts-extension-azure-map?minimal=true) [](https://www.jsdelivr.com/package/npm/echarts-extension-azure-map)
## Azure Map Extension for Apache ECharts
`Echarts Extension Azure Maps` is an Extension for [Apache ECharts](https://echarts.apache.org/en/index.html).
## Installation
Use the package manager `npm` or `yarn`
```bash
npm install echarts-extension-azure-map
```
or
```bash
yarn add echarts-extension-azure-map
```
## Styling
Embed the following css to your application. The stylesheet is required for the marker, popup and control components in `react-azure-maps` to work properly.
```javascript
import 'azure-maps-control/dist/atlas.min.css'
```
## Authentication
The subscription key is intended for development environments only and must not be utilized in a production application. Azure Maps provides various authentication options for applications to use. See [here](https://learn.microsoft.com/en-us/azure/azure-maps/how-to-manage-authentication) for more details.
```javascript
// AAD
authOptions: {
authType: AuthenticationType.aad,
clientId: '...',
aadAppId: '...',
aadTenant: '...'
}
```
```javascript
// Anonymous
authOptions: {
authType: AuthenticationType.anonymous,
clientId: '...',
getToken: (resolve, reject) => {
// URL to your authentication service that retrieves an Azure Active Directory Token.
var tokenServiceUrl = "https://example.com/api/GetAzureMapsToken";
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
}
```
```javascript
// SAS Token
authOptions: {
authType: AuthenticationType.sas,
getToken: (resolve, reject) => {
// URL to your authentication service that retrieves a SAS Token.
var tokenServiceUrl = "https://example.com/api/GetSASToken";
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
}
```
## Import
Import packaged distribution file `echarts-extension-azure-map` and add Azure Map API script and ECharts script.
```html
```
You can also import this extension by `require` or `import` if you are using `webpack` or any other bundler.
```javascript
// use require
require('echarts');
require('echarts-extension-azure-map');
require('azure-maps-control/dist/atlas.min.css');
require('azure-maps-control');
// use import
import * as echarts from 'echarts';
import 'echarts-extension-azure-map';
import "azure-maps-control/dist/atlas.min.css";
import * as atlas from 'azure-maps-control';
```
## eg: use subscriptionKey
```javascript
// app.ts or index.js
import "azure-maps-control/dist/atlas.min.css";
// page.tsx
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import { AuthenticationType } from 'azure-maps-control';
export default function App() {
const ref = useRef(null);
const loadMap = () => {
const option = {
azuremap: {
center: [104.1064453125, 37.54457732085582],
zoom: 5,
view: 'Auto',
language: 'en-US',
authOptions: {
authType: AuthenticationType.subscriptionKey,
subscriptionKey: 'your subscriptionKey',
},
},
series: [],
}
const chart = echarts.init(ref.current);
chart.setOption(option);
}
useEffect(() => {
loadMap();
}, []);
return
;
}
```
## eg: use anonymous and clientId
```javascript
// app.ts or index.js
import "azure-maps-control/dist/atlas.min.css";
// page.tsx
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import { AuthenticationType } from 'azure-maps-control';
export default function App() {
const ref = useRef(null);
const loadMap = () => {
const option = {
azuremap: {
center: [104.1064453125, 37.54457732085582],
zoom: 5,
view: 'Auto',
language: 'en-US',
authOptions: {
authType: AuthenticationType.anonymous,
clientId: 'your client id',
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
const tokenServiceUrl = 'https://your-backend-server/api/GetAzureMapsToken';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
},
},
},
series: [],
}
const chart = echarts.init(ref.current);
chart.setOption(option);
}
useEffect(() => {
loadMap();
}, []);
return
;
}
```
## Examples
#### FlyChart [examples/fly.html](https://github.com/andybuibui/echarts-extension-azure-map/blob/main/examples/fly.html)
### Heart Chart [examples/heatmap.html](https://github.com/andybuibui/echarts-extension-azure-map/blob/main/examples/heatmap.html)
#### Line Chart [examples/line.html](https://github.com/andybuibui/echarts-extension-azure-map/blob/main/examples/line.html)
#### Pie Chart for echarts < 5.4.0 [examples/pie-echart@4.html](https://github.com/andybuibui/echarts-extension-azure-map/blob/main/examples/pie-echart%404.html)
#### Pie Chart for echarts >= 5.4.0 [examples/pie-echart@5.html](https://github.com/andybuibui/echarts-extension-azure-map/blob/main/examples/pie-echart%405.html)
#### Scatter Chart [examples/scatter.html](https://github.com/andybuibui/echarts-extension-azure-map/blob/main/examples/scatter.html)
## More Links
- [echarts-extension-bingmaps](https://github.com/andybuibui/echarts-extension-bingmaps)
- [echarts-extension-amap](https://github.com/plainheart/echarts-extension-amap)
- [echarts-extension-gmap](https://github.com/plainheart/echarts-extension-gmap)
- [echarts-extension-bmap](https://github.com/apache/echarts/blob/master/extension-src/bmap/bmap.ts)
## Contributing
Pull requests are welcomed. For major changes, please open an issue first to discuss what you would like to change.
## Creators ✨
## License
[MIT](https://choosealicense.com/licenses/mit/)
