How can I change the map node shape?

  • 3 December 2020
  • 3 replies

Userlevel 1

I was wondering if it is possible to change the shape of the node on the map from a circle to something different, e.g. a square or triangle? I am already using color coding to indicate allocation of store locations to warehouses, the shape is intended to differentiate between 3 different types of stores.

Using of icons or alterntative stroke colors doesn't really work, because the nodes need to be quite small. But I am also interested in any other suggestions to make it work.



Best answer by Pratap Kumble 4 December 2020, 08:46

View original

3 replies

Userlevel 4
Badge +2

Hi @tbulavskaya ,


Currently, there isn’t an option to change the shape of the node. We do have it on the roadmap but it might take a while to get to. 


However, there is a workaround. Since you are already using annotations for color there are just two things you need to do.

  1. Add icons to the nodes. you can find all the icons here -
  2. Add the below CSS (please change the annotation names and the colors as required)
/* Only icons without node AND Color to icons */

.annotation-red .node-icon:before{
color: red !important;

.annotation-yellow .node-icon:before{
color: yellow !important;

.annotation-green .node-icon:before{
color: green !important;

display: none;

/* ----------End---------- */

You should be able to get a similar effect as the below image.


I also added a node size parameter to increase or decrease the size of the icon. For the example I used a node size of 10.


Please let me know if this works.




Userlevel 1

Thanks Pratap, that really helps! I have done a small test and it works indeed.

I am used to coloring nodes on the map with the following css:

.tag-mapv3 .annotation-red{
fill: red;
stroke: red;

But if I use your version with node-icon, my code becomes irrelevant, right?

Userlevel 4
Badge +2

In a way yes. the below CSS hides the node but retains the icon:

display: none;

You can remove or comment the code you have.


Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator