Change Map Icons based on Value

Technical queries
, ,
#1

Hello Helical,

I am using Helical Insight 4.0. I want to change the icon that is being used on the map based on the value of the measure. For example, if the value is less than 10, I want to display Icon1, if the value is between 10 and 20, it should display Icon2 and so on. Is there any script that I can use?

Thank You,
Snow.

#2

Hello Snow,

This requirement is not straightforward as the required APIs are not directly exposed. We will need to make a few changes at the backend before applying the JS script in the editor.

Step 1: Place the required images in the folder:
…/hi/hi-repository/System/Admin/CustomScripts/maps/images

Step 2: Download the file HICharts.js and replace the file with same name in the folder:
…/hi/apache-tomcat-9/webapps/hi-ee/js/vendors

Step 3: Restart the server

Step 4: Generate the map report.

Step 5: In the JS Editor, place the following script. In the below script we are displaying different icons based on the value if it is less than 10, 10 to 50 and if more than 50 and those respective png files (marker-Icon.png, starIcon.png and pieIcon.png) are saved in the images folder. In a similar way further condition and icons can be added in the below script :

hi_container.set("postFetch",function(c){              
var viz_Options = c.get("viz_Options");     
var responseData = c.get("responseData"); 	
viz_Options.chartOptions.customIconRendring = true     
viz_Options.chartOptions.customIcon = true 	
viz_Options.chartOptions.valueBasedOn = "sum_location_id" 	     
var measure;     
let custonIconsFromPF = {}     
for(var i=0;i<responseData.data.length;i++){         
measure = responseData.data[i][viz_Options.chartOptions.valueBasedOn];	         
if(measure <= 10){             
custonIconsFromPF[measure] = "marker-icon.png" ;         
}         
else if(measure > 10 && measure <= 50){             
custonIconsFromPF[measure] = "starIcon.png" ;         
}         
else{             
custonIconsFromPF[measure] = "pieIcon.png" ;         
}     
}      
viz_Options.chartOptions.custonIconsFromPF = custonIconsFromPF 	     
c.set("viz_Options",viz_Options);      
});

Thank You,
Helical Insight.