Widget Type:
Page Widgets
TPC Version:
  • 3.3 +
VideoLogos
Geographical region based data visualization map. Color codes regions based on CRM data. This feature collects the CRM data then groups them by a region and sums up the values per this region. Then color codes region based on the summed value.

Prerequisites 

You will need CRM Entities with Linked-Entities that hold a numeric value. For example contacts linked to orders.

Configuration

Basic Setup 

Drag and drop CRM ShapeMap onto a page. You can find it in The Portal Connector MVC Widgets section.

1) Click Edit and configure your options in Basic Tab. Select a Region of Interest to visualize data on.

 

Below is an example of different Select a Region for Data View options:

ShapeMap_Region_Options_Screenshots





















Info: Above screenshots have been constructed using the same CRM FetchXML. The colors are automatically scaled against summed CRM data. The examples display Yellow as High and Gray as Low values. Hovering over the region would reveal a name and the summed value. 
Note: World option shows all countries, but Canada, USA and World brakes down into States and Provinces leaving other countries in their entirety.

Appearance

2) Click Appearance Tab and configure your more graphics related options. 
Choose colors for Data Visualization.

You can use the Pickers, Pallets or fill Textboxes in hex-RGB or RGBA formats.



FetchXML 

3) Go to FetchXML Tab to configure what CRM data to pull. 

You can select Entity from Dropdown to use Load Default FetchXML and then Use Builder to configure the FetchXML in a GUI. 
OR type in the FetchXML manually then Use Builder. 

* Make sure you have included a unique identifier and a numeric value in your linked-entity: such as invoiceid and totalamount.
* Do not need to include  aggregate in the linked entity such as Sum because the widget will decide the summation for you depending on your region settings. 


Tip: You need entity with addresses and a linked-entity with value fields of interest.
Above example uses the entity Contact with linked-entity Invoice.

Data 

4) Next is the Data Tab, once FetchXML is configured all dropdown options are dynamically pre-filled with values from FetchXML. 

Choose your Name Attribute to group by data entities. 

Then choose your type of Address Lookup depending on CRM data entity:


- Use Address: If you have multiple address fiends in the entity: Street, Number, etc
- Use Composite Address: If you have one line address. 

Appropriate attribute dropdown selectors will show up automatically. These dropdown options are also pre-populated from the fetchXML. 

Select Numeric Value Attribute field that is used for data visualization.




5) Fill the optional filters, additional to in-FetchXML filters. 
Use add /remove links [+] / [-]  to add or remove filters.

6) Save and Publish Page when done.

Widget Properties

Basic Properties

Color Codes: Background, Shape High Value, Shape Low Value Data, Shape No Data, Border

 Color Codes: 

Choose color by textbox hex-RGB or RGBA, use the simple Pallet or use the Color Picker.

- Background: Color of the water and hidden regions.
- Shape High Value: The color of the highest entity value. Scaled from 0 to the highest value.
- Shape Low Value Data: Color of low value that is higher than zero. All values in between are scaled.
- Shape No Data: Color of zero or null value.
- Border.

Region Selector

 - Region Selector: User can pick a geographical region of interest. Available options:
   - Canada: Divided into Provinces/Territories.
- USA: Divided into States.
- World: Divided into Countries
- Canada, USA and World: Countries with Canada and US divided into States/Provinces/Territories.

Numeric Value Attribute

In Bubble Map: 
- Adjust bubble size.

In Shape Map: 
- dictates the color code of the regions.

In Chart Map: 
- Adjust bar chart size.

Use Composite Address

Used when you have address fields concatenated in one line in CRM. Using this option activates Geocoder. (that uses external apis to pull coordinates)

Use Address

Used when detailed address is registered in CRM on each entity. If true, the following sub properties will be available in drop down boxes. Street Line 1, Street Line 2, City Attribute, Province Attribute, Country Attribute, Postal Attribute. Using this option activates Geocoder. (that uses external apis to pull coordinates)

Use Coordinates Option

sed when coordinates are registered in the CRM entity. Sub Properties: Latitude and Longitude Dropdowns: to specify the coordinates fields.

Name Attribute

CRM field to be attached to each marker as a tooltip.

Entity

Drop Down: Optional, select entity to use the Load Default FetchXML. Required in Advanced Pin Map: Used to dynamically populate image selectors list to differentiate markers by status.

Marker Type

A string property that hold image url.

 

Navigation Control

Completely optional tool to navigate map by clicking arrows. If not null, Position Sub Property drop down will be available. Type: Boolean

Attribution or Comment

Use this to add some info, description, credentials, links or just leave blank.

If not null, Position sub property will be available.

Zoom Control

Completely optional tool to adjust zoom by clicking on +/- buttons. If not null, Position Sub Property drop down will be available. Type: Boolean

Zoom

You got 20 map zoom levels.

Map Height ~ advance pin map

Choose a height in pixels (300 is default) and width is determined by the page layout.

Center Longitude & Latitude

If Center By Address is null, this property is used instead.
Allows to choose to center by direct coordinates.

Center By Address

Type address by any format you wish, in the background map widget would use google API to select best matching location. So type a full address or just name of the city.

Advanced Properties

Advanced properties provide additional functionality. They can be accessed by clicking on the "Advanced" Button in the bottom right corner of the widget designer.

Color Codes: Background, Shape High Value, Shape Low Value Data, Shape No Data, Border

 Color Codes: 

Choose color by textbox hex-RGB or RGBA, use the simple Pallet or use the Color Picker.

- Background: Color of the water and hidden regions.
- Shape High Value: The color of the highest entity value. Scaled from 0 to the highest value.
- Shape Low Value Data: Color of low value that is higher than zero. All values in between are scaled.
- Shape No Data: Color of zero or null value.
- Border.

Region Selector

 - Region Selector: User can pick a geographical region of interest. Available options:
   - Canada: Divided into Provinces/Territories.
- USA: Divided into States.
- World: Divided into Countries
- Canada, USA and World: Countries with Canada and US divided into States/Provinces/Territories.

Numeric Value Attribute

In Bubble Map: 
- Adjust bubble size.

In Shape Map: 
- dictates the color code of the regions.

In Chart Map: 
- Adjust bar chart size.

Use Composite Address

Used when you have address fields concatenated in one line in CRM. Using this option activates Geocoder. (that uses external apis to pull coordinates)

Use Address

Used when detailed address is registered in CRM on each entity. If true, the following sub properties will be available in drop down boxes. Street Line 1, Street Line 2, City Attribute, Province Attribute, Country Attribute, Postal Attribute. Using this option activates Geocoder. (that uses external apis to pull coordinates)

Use Coordinates Option

sed when coordinates are registered in the CRM entity. Sub Properties: Latitude and Longitude Dropdowns: to specify the coordinates fields.

Name Attribute

CRM field to be attached to each marker as a tooltip.

Entity

Drop Down: Optional, select entity to use the Load Default FetchXML. Required in Advanced Pin Map: Used to dynamically populate image selectors list to differentiate markers by status.

Marker Type

A string property that hold image url.

 

Navigation Control

Completely optional tool to navigate map by clicking arrows. If not null, Position Sub Property drop down will be available. Type: Boolean

Attribution or Comment

Use this to add some info, description, credentials, links or just leave blank.

If not null, Position sub property will be available.

Zoom Control

Completely optional tool to adjust zoom by clicking on +/- buttons. If not null, Position Sub Property drop down will be available. Type: Boolean

Zoom

You got 20 map zoom levels.

Map Height ~ advance pin map

Choose a height in pixels (300 is default) and width is determined by the page layout.

Center Longitude & Latitude

If Center By Address is null, this property is used instead.
Allows to choose to center by direct coordinates.

Center By Address

Type address by any format you wish, in the background map widget would use google API to select best matching location. So type a full address or just name of the city.