Displaying map marker according to the... | jQuery Forums

Displaying map marker according to the conditional statement

Kyle Oliveros · 2018-01-12T01:38:23.4130000+00:00

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 thisif (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 dotthenmarkerTemplate site is using orange dotbeing said my desired result is if the condition is ==1I would see green dots that has boolean 1 inside its column premorecasebut reality is its reading and seeing that there is boolean 1 inside its column but I still see orange dots instead of greenso 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 thosetwo 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

DP Deepaa Pragaasam Syncfusion Team January 12, 2018 11:10 AM UTC

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.

KO Kyle Oliveros January 15, 2018 02:35 AM UTC

Hi Deepa

Can 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?

KO Kyle Oliveros January 15, 2018 05:13 AM UTC

Hi Deepa

I 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

KO Kyle Oliveros January 15, 2018 07:01 AM UTC

Hi Deepa

Additional feedback

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

SK Sanjith Kesavan Syncfusion Team January 15, 2018 07:36 AM UTC

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.

KO Kyle Oliveros January 15, 2018 08:45 AM UTC

Hi Sanjith

I will try your code and give give you feedback of the output

Thanks

Kyle

KO Kyle Oliveros January 15, 2018 09:26 AM UTC

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

KO Kyle Oliveros January 15, 2018 09:33 AM UTC

now I have 403 for accessing the image

AT Anandaraj T Syncfusion Team January 16, 2018 05:51 AM UTC

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]

<div>

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

fill="orange"></circle>

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

fill="green"></circle>

</svg>

</div>

</div>

[Map with red and green circle based on order value]

Please let us know if we misunderstood your requirement.

Regards,

Anand

KO Kyle Oliveros January 16, 2018 06:25 AM UTC

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?

KO Kyle Oliveros January 16, 2018 06:34 AM UTC

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

KO Kyle Oliveros January 16, 2018 07:53 AM UTC

Hi Anand

I can see my marker in console of chrome if I didnt put my div inside my <script> tag just like this

<div style="display:none;"><img src='src/images/{{:company_logo}}' style='display:inline-block;float:left;vertical-align:middle;margin-top:21px;'/><label id="marker_label" style="display:inline-block;margin-left:6px;font-weight:normal">Site Name: {{:site_name}}<br>Site Status: {{:status}}<br>Parent Company: {{:parent_company}}<br>Country: {{:country_name}}<br>Industry: {{:industry}}</label></div>

</div>

</script>

KO Kyle Oliveros January 16, 2018 09:13 AM UTC

Hi Anand

I cant see my marker in console of chrome if I didnt put my div inside my <script> tag just like this

<div style="display:none;"><img src='src/images/{{:company_logo}}' style='display:inline-block;float:left;vertical-align:middle;margin-top:21px;'/><label id="marker_label" style="display:inline-block;margin-left:6px;font-weight:normal">Site Name: {{:site_name}}<br>Site Status: {{:status}}<br>Parent Company: {{:parent_company}}<br>Country: {{:country_name}}<br>Industry: {{:industry}}</label></div>

</div>

</script>

KO Kyle Oliveros January 17, 2018 07:10 AM UTC

Hi Sanjith

Can 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 here

https://jsplayground.syncfusion.com/oh5rfcpv

also can you display the marker for orderValue = 0 together with orderValue = 1

Thank you

KO Kyle Oliveros January 17, 2018 08:15 AM UTC

Hi Anand,

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

KO Kyle Oliveros January 17, 2018 09:52 AM UTC

Hi anand

umm 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

AT Anandaraj T Syncfusion Team January 17, 2018 02:21 PM UTC

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]

</div>

</div>

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 <script> tag

In our sample, we have used the template element outside script tag and map renders the marker fine. In Elements tab of chrome console window, we can view the elements representing all the markers and template element.

Could you please provide more information about this issue along with a screenshot? It would be helpful for us to check this issue and provide a quick solution.

[Map marker elements in Elements tab of chrome console window]

Please let us know if you have any concern.

Regards,

Anand

KO Kyle Oliveros January 19, 2018 08:10 AM UTC

Hi Anand

can you revise your condition here https://jsplayground.syncfusion.com/rxzfwdtg

because my boss wants it to be 3 colors not two

Thanks

DP Deepaa Pragaasam Syncfusion Team January 19, 2018 12:36 PM UTC

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.

KO Kyle Oliveros January 20, 2018 09:02 AM UTC

Hi Deepaa

why 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?

DP Deepaa Pragaasam Syncfusion Team January 22, 2018 06:37 AM UTC

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.

KO Kyle Oliveros January 23, 2018 12:52 AM UTC

Hi Deepa

Is this possible in ejMap

If(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

DP Deepaa Pragaasam Syncfusion Team January 24, 2018 05:09 AM UTC

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 },

];

<div>

<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>

</div>

</div>

</script>

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.

KO Kyle Oliveros January 24, 2018 08:17 AM UTC

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);}"}

DP Deepaa Pragaasam Syncfusion Team January 24, 2018 12:32 PM UTC

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]

<div>

<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>

</div>

</div>

</script>

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

KO Kyle Oliveros January 24, 2018 10:43 PM UTC

Hi Deepaa

is it possible to use that using div not svg

KO Kyle Oliveros January 24, 2018 10:55 PM UTC

Hi again Deepaa

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

DP Deepaa Pragaasam Syncfusion Team January 25, 2018 05:27 AM UTC

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]

<div>

</div>

</div>

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]

<div>

</div>

</div>

</script>

Please refer the modified sample below

Sample Link: https://jsplayground.syncfusion.com/kk14ixhe

Please let us know if you have any concerns

Regards,

Deepaa.