Custom Image Map

Expected Effect

The built-in map is only suitable for displaying geographic information, which is limited in application. This document introduces how to create custom maps, for example, an image map of a mall floor plan.

Implementation Method

Log in to the FineBI system as the admin, choose System Management > Map Configuration, and create a custom image with area boundaries delineated. When the map boundaries are created, you can click the icon in Chart Type to customize the map.

Internal Network Description

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

• webapi.amap.com

• vdata.amap.com

• restapi.amap.com

If you cannot access the external network or set the whitelist, you can place the set custom image map (JSON file) in the corresponding path of the production project. (For details, see Custom Map JSON Resource.) Then, the custom image map can be used for geographic role matching.

1. Log in to the FineBI system 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, as shown in the following figure.

2. Select the created 2Fmarket and click the Import Image button on the right to import the plan of the 2F shopping mall, as shown in the following figure.

Note:

1. Imported images are automatically resized adaptively. You can also scale the images as needed by scrolling the mouse wheel.

2. The maximum size of uploaded images is 2 MB (Tomcat’s default POST limit), You can remove the limit as needed.

3. Click the icon to outline the area of each store, set the area name to the corresponding store number, and click Save in the upper right corner, as shown in the following figure.

Note:

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

4. The custom image is created and the generated JSON file is saved in FineBI installation directory\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 FineBI system as the admin, click My Analysis, select a folder, and click New Subject, as shown in the following figure.

2. Choose Local Excel > Upload Data, as shown in the following figure.

You can download the example data: Custom Map.xlsx

3. After the data is uploaded, click OK, as shown in the following figure.

4. Click Field Settings in the upper right corner, as shown in the following figure.

5. Modify the type of the Store Name field to Text, click Save, and click Update, as shown in the following figure.

6. Click Preview, as shown in the following figure.

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 choose Geographical Role (None) > Custom Image, as shown in the following figure.

3. Select 2Fmarket from the drop-down list of Custom Image, and the store names will automatically match the area names, as shown in the following figure.

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

Graphic Property

Setting the Label

Drag the Store Name field into the Label bar, as shown in the following figure.

Setting the Color

Click the icon of the Color bar and select a color, as shown in the following figure.

Setting the Prompt

Drag the Band and Product fields into the Prompt bar, as shown in the following figure.

Note:

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

Effect Display

PC

The following figure shows the preview effect.

Mobile Terminal

The following figure shows the preview effect in the DataAnalyst app and the HTML5 client.

For FineBI of 6.0.11 and later versions, if the system fails to load custom images, you can modify the value of the AttachmentStrategyConfig.localPrefer field to false with the FINE_CONF_ENTITY Visualization Configuration plugin installed. This will enable image files to be cached on the file server. You can restart the server after the modification. Then, the system can load custom images successfully.