DataViz WebApp extension process

Feedback

The DataViz WebApp supports customizing the Logo link, the Tabs on the left, the point and line symbol sets in vector layers. In this section, we will describe the extension process of DataViz WebApp in detail.

In /META-INF/resources/apps/dataviz/libs/plugins directory of the unzipped webjar-dataviz-*.jar found in the [iPortal product package] /webapps/iportal/WEB-INF/lib directory, you can obtain PluginsConfig.js, symbol-point.json and symbol-line.json, which are configuration files related to DataViz WebApp extension customization.

Extend Tab page

  1. Create a js file and instantiate DataViz.Plugins.DatavizPlugins shown as below:

   let plugins = new DataViz.Plugins.DatavizPlugins({

        changeTabCallback: changeMenuTab

    });

  1. Implement the callback function changeMenuTab mentioned in step 1, i.e., add the development code that follows your needs. When developing, you can refer to the RESTAPI of iPortal and the DataViz Open interfaces.
  2. In the configuration file PluginsConfig.js, which can be obtained in the /META-INF/resources/apps/dataviz/libs/plugins directory of the unzipped webjar-dataviz-*.jar found in the [iPortal product package] /webapps/iportal/WEB-INF/lib directory, add the newly extended Tab and the corresponding js and css files shown as following content in bold code. In addition, you can also customize the Logo link address.

window.DataViz.Plugins = {

    // By default, clicking the Logo will open the iPortal home page.

    logoHref: "",

    // By default, clicking the Logo will open a new browser tab.

    logoHrefTargetSelf: false,

    //The Tabs page to be displayed on the left

    menus: [{

        //Layer Tab (provided in the default interface)

        id: 'dv-layers',

        title: DataViz.Language.layerManagement,

        iconClass: 'supermapol-icons-layers'

    },{

        //Setting Tab (provided in the default interface)

        id: 'dv-settings',

        title: DataViz.Language.mapSetting,

        iconClass: 'supermapol-icons-setting'

    }

    ,{

        //Extended example tab

        id: 'dv-extension',

        title: 'Extension',

        iconClass: 'supermapol-icons-roadnetwork'

    }

    ]

    ,

    //The extended js file (relative path)

    jsFile: ['sample/Sample.js'],

    //The extended css file (relative path)

    cssFile: ['sample/Sample.css']

}

The table below shows a detailed description of the menus, jsFile, and cssFile parameters:

Parameter Type Description
menus array The Tabs array displayed in the left panel. The system displays the elements on the interface from top to bottom.
 
The array elements are of object type. In the object:
id：the id of the dom panel corresponding to the Tab page
title：the title of the Tab page
iconClass：the class name of the Tab page icon
jsFile array The extended Tab js file path (relative to the PluginsConfig.js configuration file).
cssFile array The extended Tab css file path (relative to the PluginsConfig.js configuration file).

Note:

  1. When extending multiple Tabs, the object DataViz.Plugins. DatavizPlugins can only be instantiated once.
  2. The extension item id in menus in step 3 must be consistent with the id defined in the js file.

Customize the Logo Link of DataViz WebApp

  1. In the configuration file PluginsConfig.js, you can customize the Logo link address of the DataViz WebApp as shown in the following bold code.

window.DataViz.Plugins = {

    // By default, clicking the Logo will open the iPortal home page.

    logoHref: "",

    // By default, clicking the Logo will open a new browser tab.

    logoHrefTargetSelf: false,

    //The Tabs page to be displayed on the left

    menus: [{

        id: 'dv-layers',

        title: DataViz.Language.layerManagement,

        iconClass: 'supermapol-icons-layers'

    },{

        id: 'dv-settings',

        title: DataViz.Language.mapSetting,

        iconClass: 'supermapol-icons-setting'

    }

    ]

}

The table below shows a detailed description of the logoHref and logoHrefTargetSelf parameters:

Parameter Type Description
logoHref String The link address of the DataViz Logo. Empty means using the iPortal homepage.
logoHrefTargetSelf boolean Whether to open the Logo link in the current browser window

customize point and line symbol sets

customize point symbol set

  1. Symbol-point.json provides default Tab pages as shown in the following code. You can add point symbols to existing Tab pages or define new Tab pages.

{

  "Vector": {

  },

  "Image": {

  }

}

  1. Add symbols to the Tab page, i.e., add the following bold code in step 1.

You can extend point symbols of Vector and Image types. Vector point symbols support svg format that can be accessed online or at relative addresses such as static/imgs/layer_editor/point_imgs_v1/xxx.svg. Image point symbols can be accessed online or in the png/jpg/jpeg format of relative addresses such as static/imgs/layer_editor/point_imgs_v1/xxx.png.

{

  "Vector": {

    //Extension demonstration of vector point symbol

    "customVectorSymbol1": [

      "http://fakeurl:8081/demo/test1.svg",

      "http://fakeurl:8081/demo/test2.svg",

    ]

  },

  "Image": {

    //Extension demonstration of image point symbol

    "customImageSymbol1": [

      "http://fakeurl:8081/demo/bigimgs/biji.png",

      "http://fakeurl:8081/demo/bigimgs/biaoqian.png",

    ],

  }

}

customize line symbol set

  1. symbol-line.json provides an example of traffic Tab page, you can define a Tab page for your line symbols in this configuration file, as shown in the following code.

{

"traffic": {

    "label": "Traffic", // The Tab label of line symbol set

"items": [] // The line symbols in Tab page

}

  1. Extend line symbols in "items" under the Tab page you define, and define the id, label, thumbnail, styleConfigs, and styles parameters for each line symbol, as shown in bold code below.

{

  "traffic": {

    "label": "Traffic", // The Tab label of line symbol set

    "items": [] // The line symbols in Tab page

      {

        "id": "ordinaryRail", // The unique id of the line symbol

        "label": "OrdinaryRail", // The label of the line symbol

        "thumbnail": "static/imgs/layer_editor/lineType/dark/ordinaryrail.svg", //The address of line symbol thumbnail, which can be a relatively static directory or an online address.

        // styleConfigs is used to configure rendering interface or others, the data format of it is an array of objects corresponding to each style.

        "styleConfigs": [

          {

            "strokeColor": {

              "label": "dashLineColor1", // The label of configuration item

              "controlType": "color" // The control type of configuration item.

            },

            "strokeWidth": {

              "label": "dashLineWidth1",

              "controlType": "number"

            },

            "strokeOpacity": {

              "label": "dashLineOpacity1",

              "controlType": "percent"

            },

            "lineCap": {

              "label": "dashLineCap1",

              "controlType": "select"

            }

          },

          {

            "strokeColor": {

              "label": "dashLineColor2",

              "controlType": "color"

            },

            "strokeWidth": {

              "label": "dashLineWidth2",

              "controlType": "number"

            },

            "strokeOpacity": {

              "label": "dashLineOpacity2",

              "controlType": "percent"

            }

          }

        ],

//styles support setting strokeColor, strokeWidth, strokeOpacity, lineCap and lineJoin currently.

        "styles": [

          {

            "strokeColor": "#BFBFBF", // Configure line color

            "strokeWidth": 4.16, // Configure line width, unit: pixel

            "strokeOpacity": 1, // Configure line opacity

            "lineCap": "round" // Configure line cap, the optional values include round, butt, or square

          },

          {

            "strokeColor": "#ffffff",

            "strokeWidth": 3,

            "lineDash": [13.23, 13.23], // Configure dot and dash line, unit: pixel

            "strokeOpacity": 1,

            "lineJoin": "round" //Configure line join style, the optional values include round, butt, or square

          }

        ]

      }

    ]

  }

}

 

After extension customization has been completed, refering to your extension items, copy the extended js, css files and configuration files (PluginsConfig.js, symbol-point.json,  symbol-line.json) to the [iPortal product package]/webapps/iportal/apps/dataviz/libs/plugins/ directory (if no such directory, create it), or recompress them into the iPortal product package/webapps/iportal/WEB-INF/lib/webjar-dataviz-*.jar (location: /META-INF/resources/apps/dataviz/libs/plugin/) as required. If both locations have been placed the extended files, the former will take effect.

Files involved in different extension customization items:

After placing the extension files, check extension effect in DataViz WebApp in iPortal (no need to restart iPortal, and if the extension items doesn't show, please clear the browser cache and try again). The extended effect of the point and line symbol sets can be checked in Point styles and Line styles under the Base tab in panels of the point and line layers, respectively.