How to Add Custom Map Shape Files to the Bold BI Map Widget

Overview

The Bold BI Map widget allows you to visualize data geographically using custom shapes. To achieve this, you need to provide a GeoJSON file, which defines the geometry and properties of your custom regions.

Why GeoJSON is Required

GeoJSON is a widely used format for encoding geographic data structures. In Bold BI:

1. GeoJSON is only required for Map widgets.
2. It helps the Map widget interpret and render custom shapes accurately.
3. Without GeoJSON, the widget cannot display custom boundaries or regions.

This Knowledge Base article provides step-by-step instructions on how to upload custom map shape files to the Bold BI Map widget. This feature allows users to add their own map shapes, such as those representing towns or local authorities, enhancing the flexibility and customization of the map visualization. To do this, follow the steps below:

Step 1: Download the Shape File

• Downloading a shape file from any open-source data provider that suits your needs.
• After downloading, extract the contents of the shape file.

Step 2: Rename the Shape File

• Locate the extracted shape file and proceed to rename it. As an illustration, let’s consider the scenario where we have downloaded a custom Map shape file for the Indonesia and rename it as ‘indonesia.js’.
• Note: Ensure that the name is in lowercase, and spaces in the name should be replaced with underscores. For example, ‘indonesia.js’.

Step 3: Paste the Custom Shape File to the Bold BI

• Navigate to the directory where Bold BI is installed on your system. Location: “{Installed Location}\bi\dataservice\wwwroot\shapefiles”.
• Move or copy the renamed ‘indonesia.js’ shape file into this directory.

Step 4: Update the ‘shapefile.json’ File

• In the Bold BI installation directory {Installed Location}\bi\dataservice\wwwroot\shapefiles, locate the shapefile.json file.
• Open the file in any text editor.
• Add the name of the custom shape file (indonesia.js) into the shapefile.json file as follows:
  
  
  
  
  

By default, the Map widget supports drill-down using the built-in shape files. If you need to display a custom drill-down hierarchy, such as State → City or Province → City (for example, Indonesia with city-level boundaries), you can achieve this by uploading and configuring a custom map shape file. To do this, follow the steps below:

Step 1: Prepare the Custom Shape File

• Obtain a shape file containing the required city-level boundaries and convert it to GeoJSON format.
• For example, if you want to provide city-level drill-down for the Bengkulu province in Indonesia: Convert the Bengkulu city boundary shape file into GeoJSON format.
• Rename the file appropriately, for example: customindonesia_bengkulu.js

Step 3: Paste the Custom Shape File to the Bold BI

• Navigate to the directory where Bold BI is installed on your system. Location: “{Installed Location}\bi\dataservice\wwwroot\shapefiles”.
• Move or copy the renamed ‘customindonesia_bengkulu.js’ shape file into this directory.

Step 2: Define the Shape Object

• Open the generated JavaScript shape file and prepend the following declaration at the beginning of the file: ejdashboard.customindonesia_bengkulu =
  
  
• Save the file after making the modification.

Step 3: Configure the Parent Map Shape

• Open the Indonesia map shape file (Indonesia.js) and locate the Bengkulu province definition.

• Add the shapeName property to reference the newly created custom shape: shapeName: "customindonesia_bengkulu"
  

  

• This configuration instructs the Map widget to load the custom city-level boundaries when users drill down into the Bengkulu province.
  

  
  
  
  

With these steps, you can successfully upload your custom map shape files to the Bold BI Map widget, allowing you to visualize and analyze data with your own map shapes. This feature enhances the customization capabilities of Bold BI’s map visualizations and provides greater flexibility for displaying geographic data.