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/pie-echart@4.html

Pie Chart for echarts >= 5.4.0 examples/pie-echart@5.html

Scatter Chart examples/scatter.html

More Links

• echarts-extension-bingmaps
• echarts-extension-amap
• echarts-extension-gmap
• echarts-extension-bmap

Contributing

Pull requests are welcomed. For major changes, please open an issue first to discuss what you would like to change.

Creators ✨

andybuibui

License

MIT