WebUI - Map Node Color

[Mohsen Reisi]

Hi,

I think it is possible to change the color of an individual node on a map or an individual bar of a bar chart on a WebUI page using a (element) parameter. I mean, the color of the nodes or bars are determined based on the quantities associated with them. Would you please provide an example. You might post a CSS script example. 

Best regards,

Mohsen  

[Mohan]

Hi Mohsen,

You can add webui::annotations to the nodes depending on the quantities. See this article for details about annotations : https://how-to.aimms.com/Articles/49/49-webui-css-color.html

Then you can add a css snippet like below to change the color.

.tag-map .annotation-color1 circle{
         fill: somecolor
}

[Mohsen Reisi]

Dear Mohan,

Thanks for the reply. I have not been able to make it work yet. I may need to start with something simpler. I have created an small project with two charts on its WebUi. I have also created a css file in  ...\MainProject\WebUI\resources\css to change the colors of the circles on the linechart, but it does not work. Would you please have a look and write me what is wrong. I would also like to change the colors of the bars on the barchart similarly. I will then apply this practice to the nodes on the map.

Please find the project attached. 

Best regards,

Mohsen

[Mohan]

Hello Mohsen,

See attached project. Your css file was saved as a text file (MyColors.css.txt), so anything in there wouldn't show up in AIMMS.

Also, for annotations, you only need to use the annotation value. .annotation-value. No need for anything else.

For map widget, .tag-map .annotation-value should work just fine.

[Mohsen Reisi]

Thanks Mohan. The coloring works on my project for bar charts now, but I still have problem with the nodes on the map. I have updated the project which I sent you before. Would you please have a look at the project attached and write me what is wrong.

Regards,

Mohsen

[Mohan]

Hi Mohsen,

You had the CSS snippet wrong, it must be

.tag-mapv2[data-widget\.uri="MyMap_1"] .annotation-Spec7{

fill: green;

}

Note that you can also just use the below code if you have only one map in your project.

circle.annotation-Spec7{

fill: green;

}

Also, you have to assign MyAnnotation(i) as the webui::AnnotationsIdentifier for the set MySet. The elements of this set will be nodes on the map, so for them to take on custom identifiers - you will need to use the webui::AnnotationsIdentifiers for the set as well (same as you did for MyParameter) - see attached screenshot

[Mohsen Reisi]

Thanks, it is working for the small project which I sent to you. However, in my actual project, the nodes on the map come from a two-dimensional parameter that is each node represents a population, Population(i,j), where i and j belong to MySet1 and MySet2 respectively.  The annotation is also defined as my MyAnnotation(i,j). How should I assign the annotation to the sets as you instructed in your last email?  

Best regards,

Mohsen

[Mohan]

Hello Mohsen,

The nodes on a map will be elements in a set. How does Population(i, j) represent nodes here ?

Is i latitude and j longitude here ?

Then, you will need to create a set of nodes, say node-1, node-2, node-3 and then latitude(node-1) = i-1, longitude(node-1) = j-1 and so on.

Does this make sense ? If not, can you provide more context to what you are trying to do ?

[Mohsen Reisi]

Hello Mohan,

Population(i, j) represents the population of suburb i ( i in MySet1) in year j (j in MySet2).  There is an slider on the UI which determines the year, then the map shows the population of suburbs in a given year specified by the slider. Longitudes and latitudes are given for each node (suburb) that is we have Longitude(i) and Latitude(i), i in MySet1. 

Best regards,

Mohsen

[Mohan]

Thanks for the context Mohsen.

Here, your node set must be i in MySet1. Use Latitude(i) and Longitude(i) as the lat lon properties.

For the node size property, you will use Population(i, j) and j will be sliced to the element parameter you are using to select year. See screenshot and attached example.

Now, do you want to create a sort of heat map on the map ? Node size will be colored depending on the population of the selected year ? Then, you will have an annotations identifier, say NodeColorAnnotation(i) and have the definition based on Population(i, SelectedYear).

In your CSS file, you will need to include the colors for all different ranges. The attached example should help you.

[Mohsen Reisi]

Hi Mohan,

Great! It is working now.

Best regards,

Mohsen