Overview

Mendix Pluggable Widget to provide an interface for https://www.npmjs.com/package/react-usa-map. 

This was built on Mendix version 9.6.2, but should work (in theory) on any Mendix 9 version.

Documentation

Description

Mendix Pluggable Widget to provide an interface for https://www.npmjs.com/package/react-usa-map. 

This was built on Mendix version 9.6.2, but should work (in theory) on any Mendix 9 version.

You can get the full documentation on Github.

Typical usage scenario

Heat Map – Shows a map of the US with each state with a variable color to show how it compares to other States. You can still specify an on-click action.  

Selection – Shows a map of the US with each state having its own defined color. You can specify an on-click action that will trigger an action for that one State (i.e. you can click on Indiana and the action executed will be specific for Indiana). This is helpful if you want the user to select a particular state without using a dropdown.

Features and limitations

Features:

• Shows a map of the USA with each state with a variable color to show how it compares to other States. You can still specify an on-click action. – Heat Map
• Shows a map of the USA with each state having its own defined color. You can specify an on-click action that will trigger an action for that one State (i.e. you can click on Indiana and the action executed will be specific for Indiana). – Selection

Limitations:

• Cannot display information on each state without an on click 
• Cannot display custom on hover text for each state

Dependencies

• None

Installation

Heat Map Setup:

1) In the General tab, Set Width and Height to 100%. Set the Default State Color to hsla(x,75%,50%).
2) In the Data Source tab, create a microflow that creates a list of non-persistent objects with the State Abbreviation, HeatPercent, and any other data you want to use when the user clicks on that particular State. Heat Percent should be either how that particular state compares to 0 and the maximum value (i.e. $IteratorState/Value div $MaximumStateValue) or how that particular state compares to the lowest value and the maximum value (i.e. ($IteratorState/Value - $MinimumStateValue) div ($MaximumStateValue - $MinimumStateValue). Be sure not to divide by zero!!
3) Set State Abbreviation the attribute on your non-persistent entity.
4) Set an On Click action for what you want to happen when a user clicks on a single State.
5) In the Heat Map tab, set Use Heat Map to "Yes". Select the HeatPercent on your non-persistent entity. Set Show Gradient to "Yes", so you can see the range of colors even if you don't have all the data.
6) Run the project and view the graph. Then, make adjustments to the Width, Height, and Heat Map Colors (Check the Configuration section on Github to see how the colors are calculated) as you see fit. Be sure to update the Default State Color in the general tab by replacing x with H Range + H Offset.

Selection Setup:

1) In the General tab, Set Width and Height to 100%.
2) In the Data Source tab, create a microflow that creates a list of non-persistent objects with the State Abbreviation, State Color, and any other data you want to use when the user clicks on that particular State.
3) Set State Abbreviation and State Color as the respective attributes of your non-persistent entity.
4) Set an On Click action for what you want to happen when a user clicks on a single State.
5) Run the project and view the graph. Then, make adjustments to the Width and Height as you see fit.

Configuration

Please see the full documentation on Github (includes images!). Below are the highlights.

Width - The CSS width of the entire graph. Values can be px, em, % etc.
Height - The CSS height of the entire graph. Values can be px, em, % etc.
Default State Color - The CSS color for a state as if no color is specified in the data source.

List of States - A Mendix data source (Database, Association, Nanoflow, Microflow, XPath). I recommend using a microflow that translates your persistent data to a non-persistent entity with the State Abbreviation and State Color (required if not using a heatmap). If you plan to have an on-click action, then you can use the non-persistent entity to retrieve your persistent records for the particular State the user clicked on.
State Abbreviation - The two-character official abbreviation for a USA State (i.e. IN = Indiana, NY = New York).
State Color - The Hex Value or CSS Color to fill the State (i.e. #2E2EFF or blue). This is required if you're not using a Heat Map.
On click - Action performed when a particular State is clicked. This will return the object type that is specified in the List of States data source.

Use Heat Map? - A boolean to enable the heat map color calculation.
Heat Percent - A decimal attribute that should be between 0.00 and 1.00 You should calculate this attribute inside your data source microflow. This value is used to calculate the color used to represent the State. For example with the default color settings, a State with a Heat Percent of 0.1 would show as slightly yellow, 0.4 would show as orange, and 0.8 would show as red.
Show Gradient? - When enabled, a bar will be displayed below the graph with the full-color range available.

Bugs

https://github.com/bsgriggs/mendix-usa-map/issues