How to use HeatMap/HighMaps in Outsystems?

Hi Folks,
Greetings!

Please see below image, this kind of map is required in my web application.



I am using HeatMap/HignMap in my web application, I am not able to pass proper data to map input parameters so kindly let me know how to pass data to map.
Also need one functionality on map is:  user can tap on any country so in response on tapped to get country info.

Can any body help me here how to use Map?

Thanks

Hi Meer,

Are you using your own implementation of the HeatMap, or are you using this Forge component? If you are, it will be easier to get more support as owners of the component get notified if you make a post associated with it.

If you aren't, could you help us understand your current implementation? When you say you can't pass data to the map input, what happens? Are you having problems structuring the data into the JS function to draw the map? Is the data drawn incorrectly?

Afonso Carvalho wrote:

Hi Meer,

Are you using your own implementation of the HeatMap, or are you using this Forge component? If you are, it will be easier to get more support as owners of the component get notified if you make a post associated with it.

If you aren't, could you help us understand your current implementation? When you say you can't pass data to the map input, what happens? Are you having problems structuring the data into the JS function to draw the map? Is the data drawn incorrectly?

Hi Afonso Carvalho,
Thanks for reply.

Yes, I am using forge component. But what data I have to provide to map to show countries in diff colors like map.

Please let me know for more details.

Also please share example data to Map if possible.

I am not able send message to owner because send message button not working
https://www.outsystems.com/Forge_CW/Popup_MessageTeam.aspx?IsSupported=False&ProjectId=1045


Meer,

It seems that the component owner is no longer an active community member, that would be why you cannot send the team a message.

Perhaps consider this example from the HighCharts site: https://www.highcharts.com/demo/honeycomb-usa

Hope it helps.

Hanno

Hanno wrote:

Meer,

It seems that the component owner is no longer an active community member, that would be why you cannot send the team a message.

Perhaps consider this example from the HighCharts site: https://www.highcharts.com/demo/honeycomb-usa

Hope it helps.

Hanno

Hi Hanno,
Thanks for your reply.

Actually I have checked many option like you sent me but also did not get any idea from that examples.


Do you have any example where HighMap is used, if so please share it to me.


Your support is very appreciable.


Thanks



Meer Imtiyaz wrote:

Hanno wrote:

Meer,

It seems that the component owner is no longer an active community member, that would be why you cannot send the team a message.

Perhaps consider this example from the HighCharts site: https://www.highcharts.com/demo/honeycomb-usa

Hope it helps.

Hanno

Hi Hanno,
Thanks for your reply.

Actually I have checked many option like you sent me but also did not get any idea from that examples.


Do you have any example where HighMap is used, if so please share it to me.


Your support is very appreciable.


Thanks



Hi

Can any body share HighMap example or at least dummy data inputs to HighMap?


Meer Imtiyaz wrote:

Meer Imtiyaz wrote:

Hanno wrote:

Meer,

It seems that the component owner is no longer an active community member, that would be why you cannot send the team a message.

Perhaps consider this example from the HighCharts site: https://www.highcharts.com/demo/honeycomb-usa

Hope it helps.

Hanno

Hi Hanno,
Thanks for your reply.

Actually I have checked many option like you sent me but also did not get any idea from that examples.


Do you have any example where HighMap is used, if so please share it to me.


Your support is very appreciable.


Thanks



Hi

Can any body share HighMap example or at least dummy data inputs to HighMap?



Hi,


Can you check this link for simple example of highmap


https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/


More in here:

https://www.highcharts.com/maps/demo/geojson


Thanks,

Balasubramanian

Balu Prakasam wrote:

Meer Imtiyaz wrote:

Meer Imtiyaz wrote:

Hanno wrote:

Meer,

It seems that the component owner is no longer an active community member, that would be why you cannot send the team a message.

Perhaps consider this example from the HighCharts site: https://www.highcharts.com/demo/honeycomb-usa

Hope it helps.

Hanno

Hi Hanno,
Thanks for your reply.

Actually I have checked many option like you sent me but also did not get any idea from that examples.


Do you have any example where HighMap is used, if so please share it to me.


Your support is very appreciable.


Thanks



Hi

Can any body share HighMap example or at least dummy data inputs to HighMap?



Hi,


Can you check this link for simple example of highmap


https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/


More in here:

https://www.highcharts.com/maps/demo/geojson


Thanks,

Balasubramanian

Hi Balasubramanian,
Thanks for reply.

Actually I have checked all these examples but my issue is which value to pass as inputs to HighMap for example in HighMap there are inputs parameters like DataPoints, MapData, Code etc so what data and in which format I have to pass to these inputs params.






Hi,

Like you are saying what type of map you want to show and what is requirment in the map, based on this point will differ,

like just show the points or points and location description or also include the legends for those point, and also what map you want to show, world map or country by region etc..


Thanks,

Balasubramanian

Balu Prakasam wrote:

Hi,

Like you are saying what type of map you want to show and what is requirment in the map, based on this point will differ,

like just show the points or points and location description or also include the legends for those point, and also what map you want to show, world map or country by region etc..


Thanks,

Balasubramanian

Thanks Balasubramanian,

I have posted image of Map with my question please see above. That is what I need to implement.

Now problem is, what data I have to pass to HighMaps inputs params i.e. DataPoints, MapData, Code etc.

I think you get my query?


Hi Meer,


Ok i have the sample in Highmap.html, just verify this code,

data format is 

data = [
    ['dk', 0],
    ['fo', 1],
    ['cz', 49]
];

And here 'dk' and 'fo' is the hc-key value of the high maps this is declared in the world.js file, in this file have the information of map Polygon points and GPS points and description like name of the country, and import is each line have primary-key is called "hc-key", this is the one we are putting in the data section.


And the below section indicates point increase or decrease like in example 0 - 49 (in data section (['dk',0]), if you increase 100 below legend will increase too automatically changing colors in maps light to dark.


and you can change the label check the javascript section in the file.

Hope this helps


Thanks,

Balasubramanian

Balu Prakasam wrote:

Hi Meer,


Ok i have the sample in Highmap.html, just verify this code,

data format is 

data = [
    ['dk', 0],
    ['fo', 1],
    ['cz', 49]
];

And here 'dk' and 'fo' is the hc-key value of the high maps this is declared in the world.js file, in this file have the information of map Polygon points and GPS points and description like name of the country, and import is each line have primary-key is called "hc-key", this is the one we are putting in the data section.


And the below section indicates point increase or decrease like in example 0 - 49 (in data section (['dk',0]), if you increase 100 below legend will increase too automatically changing colors in maps light to dark.


and you can change the label check the javascript section in the file.

Hope this helps


Thanks,

Balasubramanian

Sorry, I have one concern.

Actually I was used this data array and other arrays mentioned in example in many way before to post my issue, but whereever I have used then Map got hide.

See I have following input params for Map, DataPoints, MapData, Code so to which parameter I have to pass data array among "DataPoints, MapData, Code" and should I pass these data array directly as in quote like
 "[
    ['dk', 0],
    ['fo', 1],
    ['cz', 49]
]"
to any of the params?

can you please try this map example on your end?





Hi Meer,

Here i rearrange my Highmap.html file i see the map and i input the data array for selected countries and its showing me data what i entered when i mouse over on selected country.


this is the output of the Highmaps.html



i added custom tooltip as you see in the map.

And i dont know why you use double quote to data array, its javascript data not the string.

Check the file i attached again, i believe you have what you want.


Let me know if you have your answer.


Thanks,

Balasubramanian


Balu Prakasam wrote:

Hi Meer,

Here i rearrange my Highmap.html file i see the map and i input the data array for selected countries and its showing me data what i entered when i mouse over on selected country.


this is the output of the Highmaps.html



i added custom tooltip as you see in the map.

And i dont know why you use double quote to data array, its javascript data not the string.

Check the file i attached again, i believe you have what you want.


Let me know if you have your answer.


Thanks,

Balasubramanian


Thanks for help Balasubramanian!

Actually I am using HighMap forge component, so I would like example for the same forge component.

Kindly check this component below
https://www.outsystems.com/forge/component-overview/1045/high-maps


 



Hi,

i test the demo eSpace of Highmaps and it show me the data, and sample data was already present in the preparation section with record and record list.


in the preparation see the DataPoints_rec (code is 'hr' and value is 10, here 'hr' is country code hc-key value) as record and append to DataPoints_list, and pass DataPoints_list to map.


and finally 



i see the maps in live,


here where you find diffculty, just print screen your screens hat have problems


Thanks,

Balasubramanian

Balu Prakasam wrote:

Hi,

i test the demo eSpace of Highmaps and it show me the data, and sample data was already present in the preparation section with record and record list.


in the preparation see the DataPoints_rec (code is 'hr' and value is 10, here 'hr' is country code hc-key value) as record and append to DataPoints_list, and pass DataPoints_list to map.


and finally 



i see the maps in live,


here where you find diffculty, just print screen your screens hat have problems


Thanks,

Balasubramanian

Great Balasubramanian,

This is what I was looking...

Can you please share the demo link or oml file?



Solution

Here you have the oml of highmaps OS11

Solution

Balu Prakasam wrote:

Here you have the oml of highmaps OS11

Thanks for shared oml file, I really happy and appropriate your support.

Only one help here  I need is, when I oped oml file there asking 

OutSystems2JSON.JSON

error, so from where I can get this Server Action?


install "ardoJSON" extension from forge,



Balu Prakasam wrote:

install "ardoJSON" extension from forge,



Great, Its working ......(handshake)


Good to hear, enjoy your coding.