customize Marker template while map zoom in and zoom out

[tamil]

hi,

          The Marker Template  could not aligned properly. All markers images (or) details are overlapping. so give a proper solution.

here i attached sample.

thank you

tamil.p   

[Saravana Kumar Kanagavel]

Hi Tamil, 

 

Thanks for contacting Syncfusion Support. 

 

We have analyzed your query and currently we don’t have support for avoiding marker template overlapping. These markers are overlapping due to some locations are very close to another location, so in order to overcome this issue you can zoom the map instead of displaying the complete world map. 

 

Also this cannot be considered as a new request. Because marker template will overlap if it is assigned for nearby places and moving it due to intersection, will show marker at some other place. 

Please let us know if you have any concern. 

 

Regards,            

Saravana Kumar K. 

[tamil]

My suggestion is just create a single line from the location area and show the markers.

[Saravana Kumar Kanagavel]

Hi Tamil, 

 

Thanks for your update. 

 

We have analyzed your requirement and before providing solution to your scenario, we would like to let you know that, when we give markers to few countries(say for example 4 to 7), if marker get overlapped means, by workaround we can move to some specific location, but this will not work when there are more number of markers and this is not the best way to visualize the data.  

 

However we have some solution to your scenario. We have prepared a sample in which we have initially shown marker only without data label and when we clicked on the particular marker,  then we have shown the data label. You can also change this with respect to your scenario. Kindly find the code snippet below to achieve this requirement. 

 

[JS] 

 

$("#container").ejMap({    

              onRenderComplete:"renderComplete",  

      markerSelected:"onSelect" 

 }); 

 

function onSelect(sender){ 

             var markerElement =  sender.originalEvent.marker[0].children[0]; 

              for(var i=0; i < markerElement.childElementCount;i++){ 

                  var element = markerElement.children[i]; 

                   window.markerCurrentElement = markerElement; 

                   if(element.id.indexOf("dataLabel") > -1){ 

                     process = true; 

                     element.style.display = "block"; 

                 } 

                } 

               if(process){ 

                window.setTimeout(function(){ 

                  for(var j=0;j<window.markerCurrentElement.childElementCount;j++){ 

                      var element = window.markerCurrentElement.children[j]; 

                   if(element.id.indexOf("dataLabel") > -1){ 

                     process = false; 

                     element.style.display = "none"; 

                   } 

                  } 

                },2000); 

              } 

         } 

          

         function renderComplete(sender){ 

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

           map._on($(window), "orientationchange", mapResize); 

           map._on($(window), "resize", mapResize); 

           hideDataLabelTemplate(); 

         } 

         function mapResize(){ 

            window.setTimeout(function(){ 

              hideDataLabelTemplate(); 

            },500); 

         } 

      

         function hideDataLabelTemplate(sender){ 

            var markerTemplate = document.getElementsByClassName("e-TemplateDiv")[0]; 

           for(var i=0;i<markerTemplate.childElementCount;i++){ 

              var markerElement = markerTemplate.children[i]; 

              for(var j=0;j<markerElement.children[0].childElementCount;j++){ 

                 var element = markerElement.children[0].children[j]; 

                 if(element.id.indexOf("dataLabel") > -1){ 

                   element.style.display = "none"; 

                 } 

              } 

           } 

         } 

 

Kindly find the sample for your reference from the below link. 

 

Sample Link : http://jsplayground.syncfusion.com/oyouc0wc 

 

 

Please find the output of the sample below 

 

 

 

Please let us know if you have any concern on this. 

 

Regards, 

Saravana Kumar K.