echarts-extension-azure-map
v2.0.0
Published
Azure Map for Apache ECharts (https://github.com/apache/echarts)
Downloads
20
Maintainers
Readme
Echarts-Extension-Azure-Map
Azure Map Extension for Apache ECharts
Echarts Extension Azure Maps
is an Extension for Apache ECharts.
Installation
Use the package manager npm
or yarn
npm install echarts-extension-azure-map
or
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.
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 for more details.
// AAD
authOptions: {
authType: AuthenticationType.aad,
clientId: '...',
aadAppId: '...',
aadTenant: '...'
}
// 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));
}
}
// 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.
<link
href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css"
rel="stylesheet"
/>
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<!-- import ECharts -->
<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- import echarts-extension-azure-map -->
<script src="https://fastly.jsdelivr.net/npm/echarts-extension-azure-map/dist/echarts-extension-azure-map.min.js"></script>
You can also import this extension by require
or import
if you are using webpack
or any other bundler.
// 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
// 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<HTMLDivElement>(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 <div ref={ref} style={{ width: '100%', height: '80vh' }}></div>;
}
eg: use anonymous and clientId
// 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<HTMLDivElement>(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 <div ref={ref} style={{ width: '100%', height: '80vh' }}></div>;
}
Examples
FlyChart examples/fly.html
Heart Chart examples/heatmap.html
Line Chart examples/line.html
Pie Chart for echarts < 5.4.0 examples/[email protected]
Pie Chart for echarts >= 5.4.0 examples/[email protected]
Scatter Chart examples/scatter.html
More Links
Contributing
Pull requests are welcomed. For major changes, please open an issue first to discuss what you would like to change.