Displaying map marker according to the conditional statement

Question

Hi,

May I know if the marker of map will work using if /else what I mean is that if the condition of the statement is like this

if (PREMCASE[index].premorecase == 1)

{

"map.model.layers[0].markers = PREMCASE"

"map.model.layers[0].markerTemplate = 'premref'"

}

else

{

"map.model.layers[0].markers = FSites"

"map.model.layers[0].markerTemplate = 'site'"

}

the color coding of this icons was
markerTemplate premref is using green dot

then

markerTemplate site is using orange dot

being said my desired result is if the condition is ==1

I would see green dots that has boolean 1 inside its column premorecase

but reality is its reading and seeing that there is boolean 1 inside its column but I still see orange dots instead of green

so in my database I can see I have two records that its premorecase column has 1 on it and the rest is 0 so if I understand correctly I should see on my map those

two green dots appearing together with orange dots because it met its condition on if statement

OR

just only two green dots since it met its requirement

Deepaa Pragaasam · Answer

Hi Kyle,

We have analyzed your query. We have prepared a sample according to your requirement.

In the sample we have created the button and on clicking the button we have changed the maker source and template .

Please refer the code snippet below

[HTML]

[JS]

function markerChange() {

var map = $("#container").data("ejMap");

for (var i = 0; i < syncfusion_locations.length; i++) {

if (syncfusion_locations[i].orderValue == 1) {

map.model.layers[0].markers = marker_locations1;

map.model.layers[0].markerTemplate = "template1";

}

else {

map.model.layers[0].markers = marker_locations;

map.model.layers[0].markerTemplate = "template"

}

map.refresh();

}

Please refer the output screenshot

Map while rendered

After button click

We have attached the sample for your reference

JS Playground Link: https://jsplayground.syncfusion.com/4yazgwaq

Please let me know if you have any concerns

Regards,

Deepaa.

Kyle Oliveros · Answer

Hi DeepaCan you make it onload instead of click... plus is it necessary create another var for the records with orderValue = 1 and another var for records with orderValue = 0 it cannot be done by using only one var?

Kyle Oliveros · Answer

Hi DeepaI notice that if  I use your provided code no error but it keeps on loading the var that meet its conditions as if it is on infinite loop here is the scenario I only have 11 records inside my table in database but it keeps looping and looping as if it is endless to the point that I think it hangs itself

Kyle Oliveros · Answer

Hi DeepaAdditional feedbackthe only difference between your sample andmy project is that your orderValue is a static while in my side is a dynamic one

Sanjith Kesavan · Answer

Hi Kyle,

Sorry for the inconvenience. We have analyzed your queries and changed the code to avoid infinite looping issue you have faced. Currently we are not having ‘onload’ event in maps. So, we have logged improvement task on this and it will be included in our Essential studio volume 1 release which is expected to be roll out at the mid of February 2018. It is not necessary to maintain any variables. We have modified the code in setTimeOut instead of ‘onclick’ event. please find the code example below.

[JS]

setTimeout(function(){

var map = $("#container").data("ejMap");

map.model.layers[0].markers=[];

for (var i = 0; i < syncfusion_locations.length; i++) {

if (syncfusion_locations[i].orderValue == 1)

map.model.layers[0].markers.push(syncfusion_locations[i]);

}

map.model.layers[0].markerTemplate = "template1";

map.refresh();

}, 3000);

In the above code, we have checked the condition that orderValue is i. if it is ‘1’ then we have pushed the values in marker array and set the markerTemplate as ‘template1’. Template1 contains below values.

[HTML]

<div>

</svg>

</div>

</div>

Now the map will render like below.

In the below link, we have attached sample for your reference.

Sample link: Sample

Please check the sample and let us know if you have any concern.

Thanks,

Sanjith.

Kyle Oliveros · Answer

Hi Sanjith I will try your code and give give you feedback of the outputThanks Kyle

Kyle Oliveros · Answer

Hi Sanjith

I tried your code no error in console but no markers being rendered the difference between your code and my is that your json var is syncfusion_locations, in my code it is Flsite, your column is orderValue while in mine it is premref, your marker and markerTemplate is syncfusion_locations and template and template1 while in my code it is Flsite and the templates are site and premref so what is the prob on my side

Kyle Oliveros · Answer

now I have 403 for accessing the image

Anandaraj T · Answer

Hi Kyle, Thanks for the update. We are using JsRender library for rendering markers in map. We can achieve your requirement by checking the order value using if else template tag of JsRender. Please find the modified sample in following JS Playground link https://jsplayground.syncfusion.com/rxzfwdtg Please refer the following code snippet to achieve this [HTML] [Map with red and green circle based on order value] Please let us know if we misunderstood your requirement. Regards, Anand

Kyle Oliveros · Answer

hi Sanjith,

I tried your code but it does not change my icon after 1500 seconds it still orange

anyway my code for this marker as per your online guide is like this:

is is the cause why my marker cant change?

Kyle Oliveros · Answer

Hi Anand

Thanks for the help though what I need is the code provided by sanjith thats the one my boss wants me to do but in my side after 1500ms it does not change my marker just like what sanjith did

Kyle Oliveros · Answer

Hi Anand I can see my marker in console of chrome if I didnt put my div inside my

Kyle Oliveros · Answer

Hi Anand I cant see my marker in console of chrome if I didnt put my div inside my

Kyle Oliveros · Answer

Hi SanjithCan you provide an on click on your code my boss wants it to be onclick event not by setTimeout? the code I was referring was herehttps://jsplayground.syncfusion.com/oh5rfcpvalso can you display the marker for orderValue = 0 together with orderValue = 1Thank you

Kyle Oliveros · Answer

Hi Anand, can you render the circle on your sample on a div not as svg?

Kyle Oliveros · Answer

Hi anandumm I try your code https://jsplayground.syncfusion.com/14ibiyfn but the result in my side is not the same as your sample it goes only to else statement only um my scenario of my codes is this my json data (syncfusion_location in your case) is in the backcode together with my if/else statement then my dot/map marker is on clientside

Anandaraj T · Answer

Hi Kyle, Thanks for the update. Query #1: the result in my side is not the same as your sample it goes only to else statement As the template is working fine in our sample, we would like to know the following details so that we can analyze this issue and provide a solution Could you please share the structure of data source bounded to map along with sample data for testing ? If possible, could you please modify our demo to replicate this issue ? The information provided would be of great help in resolving the issue and provide a solution sooner. Query #2: can you render the circle on your sample on a div not as svg? We have modified the sample to render circle using div element in the following link https://jsplayground.syncfusion.com/4xqaxxh2 Please refer the following code snippet to achieve this [HTML] Query #3: Can you provide an on click on your code my boss wants it to be onclick event not by setTimeout? We have modified the sample in provided link as per the requirements and it is available in the following link https://jsplayground.syncfusion.com/4xqaxxh2 Please refer the following code snippet to achieve this [JS] function getOrderValue() { var map = $("#container").data("ejMap"); //code to get the current order value from database //for demonstration purpose we are just toggling the value between 0 and 1 orderValue = (orderValue === 0 ? 1 : 0); if (orderValue === 0) //Use the template that uses orange color map.model.layers[0].markerTemplate = "template"; else //Use the template that has two colors (green and orange) for order value map.model.layers[0].markerTemplate = "template_both"; //Refresh the map control map.refresh(); } Query #4: I cant see my marker in console of chrome if I didnt put my div inside my

Kyle Oliveros · Answer

Hi Anand can you revise your condition here https://jsplayground.syncfusion.com/rxzfwdtg because my boss wants it to be 3 colors not twoThanks

Deepaa Pragaasam · Answer

Hi Kyle,

Sorry for the inconvenience caused.

We have modified the sample according to your requirement. In the order value we have used 3 values and based on the condition we have updated the color of the marker

Please refer the code snippet below

[JS]

syncfusion_locations =

[

{ "Name": "USA", "latitude": 38.8833, "longitude": -77.0167, "orderValue": 0 },

{ "Name": "Brazil", "latitude": -15.7833, "longitude": -47.8667, "orderValue": 1 },

{ "Name": "India", "latitude": 21.0000, "longitude": 78.0000, "orderValue": 2 },

{ "Name": "China", "latitude": 35.0000, "longitude": 103.0000, "orderValue": 0 },

{ "Name": "Indonesia", "latitude": -6.1750, "longitude": 106.8283, "orderValue": 1 },

{ "Name": "Russia", "latitude": 61.524010, "longitude": 105.318756, "orderValue": 2 },

{ "Name": "Congo", "latitude": -4.783195, "longitude": 21.508523, "orderValue": 1 },

];

// Template values

<circle cx="30" cy="30" r="20"

fill="orange"></circle>

<circle cx="30" cy="30" r="20"

fill="green"></circle>

<circle cx="30" cy="30" r="20"

fill="red"></circle>

</svg>

Please refer the screenshot of the rendered map

Please refer the sample link below

JS Playground Link: https://jsplayground.syncfusion.com/xo2b0g2n

Please let me know if you have any concerns

Regards,

Deepaa.

Kyle Oliveros · Answer

Hi Deepaawhy there is no sample shown in your link I tried to refresh clear cache and re click your link provided  and no sample at all?

Deepaa Pragaasam · Answer

Hi Kyle, 

We have analyzed your query.  
We are unable to replicate the issue. The provided JS playground link is working fine at our end. 

Please refer the screenshot of the map rendered  
  

We have also created individual sample for your reference and it can be downloaded from the below link. 
Sample : http://www.syncfusion.com/downloads/support/forum/135431/ze/135431-617607699  

Please let us know if you have any concerns. 

Regards, 
Deepaa.

Kyle Oliveros · Answer

Hi DeepaIs this possible in ejMapIf(ordervalue1 = 1 && ordervalue2 = 2 ){  Alert("display icon);}Else{Alert("none");}Because i need to check if two columns has a value of 1 and display it to the map

Deepaa Pragaasam · Answer

Hi Kyle, We have analyzed your query and prepared the sample according to your requirement. We have modified the template and the marker data source according to your requirement. Please refer the code snippet below. [JS] syncfusion_locations = [ { "Name": "USA", "latitude": 38.8833, "longitude": -77.0167, "orderValue": 0, "orderValue1": 1 }, { "Name": "Brazil", "latitude": -15.7833, "longitude": -47.8667, "orderValue": 1, "orderValue1": 1 }, { "Name": "India", "latitude": 21.0000, "longitude": 78.0000, "orderValue": 2, "orderValue1": 0 }, { "Name": "China", "latitude": 35.0000, "longitude": 103.0000, "orderValue": 0, "orderValue1": 1 }, { "Name": "Indonesia", "latitude": -6.1750, "longitude": 106.8283, "orderValue": 1, "orderValue1": 0 }, { "Name": "Russia", "latitude": 61.524010, "longitude": 105.318756, "orderValue": 2, "orderValue1": 1 }, { "Name": "Congo", "latitude": -4.783195, "longitude": 21.508523, "orderValue": 1, "orderValue1": 0 }, ]; Please refer the output screenshot of the rendered Map We have attached the sample for your reference JS Playground Link: https://jsplayground.syncfusion.com/pfxuoek3 Please let me know if you have any concerns Regards, Deepaa.

Kyle Oliveros · Answer

I try to implement your code to mine and got an error in the console then it didnt render the map anyway to give clearer view
this is what I want to do

if(orderValue1 == 1)

{

//Render marker for orderValue1

}

else(orderValue2 == 1)

{

//Render marker for orderValue2

}

else (orderValue1 == 1 && orderValue2 == 1 )

{

//Render marker for representing the else(orderValue1 == 1 && orderValue2 == 1 ) condition

}

in which I got a console error and a not rendering map
Here is what the console error says : Uncaught it {name: "JsRender Error", message: "Syntax error↵Compiled template code:↵↵// _0↵var j=… ";↵return ret;↵↵}catch(e){return j._err(e);}"}

Deepaa Pragaasam · Answer

Hi Kyle, We have analyzed the code provided by you. We are unable to reproduce the reported issue. We have implemented the requested code snippet and the sample is rendering fine. Please refer the code Snippet below [JS] We suspect that you are not using the “script” tag while declaring the template. Only when the script tag is present the conditional operations can be performed. We have attached the modified sample for your reference. JS Playground Link: https://jsplayground.syncfusion.com/1nk2lsk5 Kindly modify the attached sample or provide us you sample as it would be helpful for us to check and provide the solution faster Please let us know if you have any concerns. Regards, Deepaa

Kyle Oliveros · Answer

Hi Deepaa is it possible to use that using div not svg

Kyle Oliveros · Answer

Hi again DeepaaI tried to use your latest provided code but how come the chrome console says "Unexpected token <"

Deepaa Pragaasam · Answer

Hi Kyle, We have analyzed your queries. Please find the response for the same below Query 1: is it possible to use that using div not svg Yes we can create template using the div. Please find the below code snippet for it [JS]

Query 2: I tried to use your latest provided code but how come the chrome console says "Unexpected token <" The above error is caused as the script template doesnot contain the type specified in it. We have now modified the sample to resolve this error. Please find the modified code snippet below [JS] Please refer the modified sample below Sample Link: https://jsplayground.syncfusion.com/kk14ixhe Please let us know if you have any concerns Regards, Deepaa.