Custom picture map

1.1 Application scenario

The built-in map is only suitable for displaying map information. If you want to customize a mall floor plan, how can you implement it?

1.2 Implementation method

First, make "Custom Pictures" at the "Map Configuration" under the "Manage", that is, making map boundaries.

After you have a map boundary, you need to use a "custom chart" in the dashboard to achieve a custom map effect.

1) Enter the "Manage", select "Map Configuration" → "Custom Picture", select the "Custom Picture", click the "+" button in the upper right corner of the directory, name the custom picture "2Fmarket", and click "OK". As shown in the figure below:

2) Select the "2Fmarket" and click the "Import Picture" button on the right to import a plan of the second floor of the mall, as shown in the following figure:

Note 1: the size of the imported picture can be adaptive, or it can be scaled freely through the wheel.

Note 2: the upload image size is limited to 2M, which is the default post size limit of Tomcat. Users can set it to not limit the image size. For the setting method, see section 4 of the file "WangEditor rich text control plug-in".

3) Use the draw rectangle tool to circle the area of each shop, and set the area name as the number of the corresponding merchant. After all shops are set, click the upper right corner to save, as shown in the following figure:

Note: if the area to be circled is irregular, you can use the draw polygon tool to draw points.

4) So far, the custom picture has been created, and the generated JSON file is saved in the %FineBI%\webapps\webroot\WEB-INF\assets\map\image directory, as shown in the following figure:

Note: JSON files can be directly copied to other projects for use.

3.1 Data preparation

Add the excel file to "My Package", and the data is as shown in the following figure:

Sample data: 189.Custom Map of Shopping Mall.xlsx

Note: when adding the excel dataset, the field type of Shop ID must be changed to "text", because the field of numerical type will become an indicator after adding components.

3.2 Add new dashboard

Create a new dashboard and rename it as a "custom map", as shown in the following figure:

3.3 Add component

1) Click the "Add component" button, as shown in the following figure:

2) Select the newly added excel dataset, as shown in the following figure:

3.4 Make the map

1) This example does not display the component name, so the title is not displayed here.

Click the drop-down button on the right side of the "Shop ID" in the dimension field, and select "Geographic role (None)" → "Custom Picture", as shown in the following figure:

2) If 2Fmarket is selected as the custom image, the Shop ID will automatically match the "area name" set when making the map boundary, as shown in the following figure:

3) Select "Custom Chart" for "chart type", drag the two dimensions converted to geographic roles to the horizontal axis and vertical axis respectively, and set the "Graphic Properties" as shown in the figure below.

Note: you must select "Fill the map" in the drop-down box under "Graphic Properties", otherwise the custom picture map will not take effect.

4) Uncheck the "Legend" in "component style", as shown in the figure below:

3.5 View the effect

After entering the dashboard, the actual preview effect is shown in the figure below:

Note: Mobile preview is not supported.