Solved

How can I change the map node shape?

  • 3 December 2020
  • 3 replies
  • 72 views
T
Rank
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.

Thanks!

icon

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

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 - https://manual.aimms.com/_static/aimms-icons/icons-reference.html
  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;
}

path.annotation-red,path.annotation-yellow,path.annotation-green{
	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.

 

Thanks,

Pratap

View original

3 replies

P
Rank
Userlevel 3
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 - https://manual.aimms.com/_static/aimms-icons/icons-reference.html
  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;
}

path.annotation-red,path.annotation-yellow,path.annotation-green{
	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.

 

Thanks,

Pratap

T
Rank
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?

P
Rank
Userlevel 3
Badge +2

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

path.annotation-red,path.annotation-yellow,path.annotation-green{
	display: none;
}

You can remove or comment the code you have.

Reply


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

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