We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

customize Marker template while map zoom in and zoom out

Thread ID:

Created:

Updated:

Platform:

Replies:

132816 Sep 22,2017 01:52 PM UTC Sep 27,2017 08:30 PM UTC JavaScript 3
loading
Tags: ejMap
tamil
Asked On September 22, 2017 01:52 PM UTC

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 [Syncfusion]
Replied On September 25, 2017 12:40 PM UTC

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
Replied On September 25, 2017 01:17 PM UTC

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


Saravana Kumar Kanagavel [Syncfusion]
Replied On September 27, 2017 08:30 PM UTC

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. 
 
 
 
Please find the output of the sample below 
 
 
 
Please let us know if you have any concern on this. 
 
Regards, 
Saravana Kumar K.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;