Novices Performing Miracles

    map-map-map

    1.4.4 • Public • Published

    NPM version Build Status NPM Downloads jsDelivr Downloads License

    Google Map extension for Apache ECharts

    中文说明

    Online example on CodePen

    This is a Google Map extension for ECharts which is used to display visualizations such as Scatter, Lines, Heatmap.

    Examples

    Refer to examples/index.html

    Preview

    Installation

    npm install echarts-extension-gmap --save

    Import

    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 or import if you are using webpack.

    require('echarts');
    require('echarts-extension-gmap');

    Or use a CDN

    jsdelivr

    <script src="https://cdn.jsdelivr.net/npm/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>

    unpkg

    <script src="https://unpkg.com/echarts-extension-gmap/dist/echarts-extension-gmap.min.js"></script>

    This extension will register itself as a component of echarts after it is imported.

    Usage

    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],
        // center: { lng: 108.39, lat: 39.9 },
        // initial map zoom
        zoom: 4,
    
        // whether echarts layer should be rendered when the map is moving. `true` by default.
        // 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. `2000` by default.
        echartsLayerZIndex: 2019,
        // whether to enable gesture handling. `true` by default.
        // since v1.4.0
        roam: false
    
        // 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);

    Install

    npm i map-map-map

    DownloadsWeekly Downloads

    1

    Version

    1.4.4

    License

    MIT

    Unpacked Size

    70.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • aminfathullah