Custom Image Map

Expected Effect

The built-in map is only suitable for displaying map information and this document introduces how to customize a mall floor plan.

Implementation Method

Log in to the platform as the admin, choose System Management > Map Configuration, and create a custom image with area boundaries delineated, with which you can use the Custom Chart component to customize a map.

Intranet Description

You need to request Amap API resources online or whitelist the following map APIs to use the Map Configuration page. Otherwise, the geographic information and the custom image layers cannot be displayed.

webapi.amap.com

vdata.amap.com

restapi.amap.com

If you cannot connect to the extranet or set the whitelist, you can place the custom image map (JSON file) set in versions earlier than 5.1.24 into the corresponding path of the official project. For details, see Custom Map JSON Resource. Then, the custom image map can be used for geographic role matching.

Log in to the platform as the admin, choose System Management > Map Configuration > Custom Image, click the icon to add a custom image, name the image 2Fmarket, and click OK.

Select the created 2Fmarket and click the Import Image button on the right to import a floor plan of the second floor of a shopping mall.

Note:

1. Imported images will be resized adaptively and can also be freely scaled by scrolling the mouse wheel.

2. The maximum size of uploaded images is 2M, which is the default POST limit of Tomcat. You can set it to unlimited.

Click the Rectangle icon to outline the area of each store, set the area name to the corresponding store name, and click Save in the upper right corner.

Note:

If the area is in an irregular shape, you can click the Polygon icon for delineation.

The custom image is created and the generated JSON file is saved in the directory %FineBI_HOME%\webapps\webroot\WEB-INF\assets\map\image, as shown in the following figure.

Note:

JSON files can be copied and pasted to other projects. For details about how to make the map file take effect, see the Methods for Map Files Taking Effect section in Map File Update.

Data Preparation

1. Log in to the system as the admin, click My Analysis, and click New Subject, as shown in the following figure.

2. Click Local Excel and click Upload Data, as shown in the following figure.

You can download the example data.Custom Map.xlsx

3. Click OK after the data is uploaded, as shown in the following figure.

4. Click Edit in the upper right corner.

5. Change the type of the Store Name field to Text, and click Save and Update.

6. Click Exit and Preview.

Component Creation

1. Click Component in the lower left corner, as shown in the following figure.

2. Click the icon of the Store Name field and set Geographical Role (None) to Custom Image.

3. Select 2Fmarket from the drop-down list of Custom Image and the store name will automatically match the area name.

4. Click the Custom Chart icon in Chart Type, drag the Store(longitude) field to the Horizontal Axis and the Store(altitude) field to the Vertical Axis, and select Fill Map from the drop-down list in Graphic Property.

Graphic Property

Label Setting

Drag the Store Name field into Label.

Color Setting

Click the icon of the Color bar to set the color.

Prompt Setting

Drag the Band and Product fields into Prompt.

Note:

For more details, see Chart Component Style, and Graphic Properties.

Effect Display

On PC

The actual preview effect of the custom image map on a dashboard is shown in the following figure.

On Mobile Terminals

The following figure shows the preview effect on the DataAnalyst and on HTML5 apps.