1. Home
  2. Forum
  3. jQuery
  4. How to zoom

How to zoom

How can I zoom in after clicked on a specific marker and display country name in pop up box 

6 Replies
DP Deepaa Pragaasam Syncfusion Team December 14, 2017 06:17 AM UTC

Hi Kyle, 
We have analyzed your query. The zooming can be  enabled on double click of the marker using the “markerSelected” event where the enableZoom option of the ZoomSettings is set to true along with the pop up where the details are displayed .  
 
Please refer the below code snippet  
[ASPX] 
<ej:Map ID="dataMarker" runat="server" Background="white" EnableAnimation="true" OnClientMarkerSelected="marker" OnClientShapeSelected="shapeselected" ClientIDMode="Static"> 
</ej:Map > 
 
[JS] 
 
var previourMarker = "";  
         
    function marker(sender) { 
            sender.model.zoomSettings.enableZoom = true; 
            if (previourMarker != args.originalEvent.data.Name) {  
                document.getElementById("popup").style.visibility = "visible";  
                document.getElementById("popup").innerHTML = "Selected Marker is - " + args.originalEvent.data.Name;  
                previourMarker = args.originalEvent.data.Name;  
            }  
            else {  
                document.getElementById("popup").innerHTML = "";  
                previourMarker = "";  
                document.getElementById("popup").style.visibility = "hidden";  
            }  
        } 
 
     function shapeSelected(sender) { 
            sender.model.zoomSettings.enableZoom = false; 
        } 

We have prepared a sample for your reference 
  

Find the output of the sample below. 
 

Please let us know if you have any concerns 

Regards, 
Deepaa 



DP Deepaa Pragaasam Syncfusion Team December 15, 2017 08:12 AM UTC

Hi Kyle, 

We have analyzed your query. The zoom in of the marker can be performed by binding the mouseup event for the window and using the “navigateTo” method which can be used to zoom the map with clicked marker as center. 
Please refer the below code snippet 
[JS] 
<script> 
           window.count = 1; window.latitude, window.longitude; 
          $(window).on('mouseup', function (event) { 
        
               if (event.target.className == "e-icon1 e-map-home")  
                   window.count = 1; 
                      
               else if (event.target.className == "e-icon1 nav-inc-Vert  e-innerIncrement") 
                
                   window.count++; 
               else if (event.target.className == "e-icon1 nav-dec-Vert e-innerDecrement") 
                   window.count--; 
              
            
               $("#dataMarker").ejMap("navigateTo",window.latitude,window.longitude, window.count); 
                
           }); 
 
 
           var previourMarker = ""; 
           function markerSelected(args) { 
             
               if (previourMarker != args.originalEvent.data.Name) { 
                
                   window.count++; 
                   document.getElementById("popup").style.visibility = "visible"; 
                   document.getElementById("popup").innerHTML = "Selected Marker is - " + args.originalEvent.data.Name; 
                   previourMarker = args.originalEvent.data.Name; 
 
               } 
               else { 
                   window.count++; 
                   document.getElementById("popup").innerHTML = ""; 
                   previourMarker = ""; 
                   document.getElementById("popup").style.visibility = "hidden"; 
               } 
               window.latitude = args.originalEvent.data.latitude; 
               window.longitude = args.originalEvent.data.longitude; 
 
 
           } 


Please refer the output of the sample 
 
We have modified the sample accordingly. 

Please let me know if you have any concerns 

Regards, 
Deepaa 


KO Kyle Oliveros December 15, 2017 09:35 AM UTC

 How can I zoom in after clicked on a specific marker and display country name in pop up box using single click only on the marker and put a square border around that clicked marker?

DP Deepaa Pragaasam Syncfusion Team December 18, 2017 12:35 PM UTC

Hi Kyle, 

We have modified the sample according to your requirement.  We have disabled the zooming on the double click of the marker by setting  the enableZoom property  of the zoomSettings as false and added the border around the selected marker in the “OnClientMarkerSelected” event. 

Please find the code snippet below 
[Maps.ASPX] 
<ej:Map ID="dataMarker" OnClientMarkerSelected="markerSelected" > 
 
</ej:Map> 
 
[JS] 
function markerSelected(args) { 
               
               if (previourMarker != args.originalEvent.data.Name) { 
                   args.model.zoomSettings.enableZoom = false; 
                   window.count++; 
                   document.getElementById("popup").style.visibility = "visible"; 
                   document.getElementById("popup").innerHTML = "Selected Marker is - " + args.originalEvent.data.Name; 
                   previourMarker = args.originalEvent.data.Name; 
                   for (i = 0; i < args.originalEvent.marker[0].children[0].childElementCount - 1; i++) 
                   { 
                       args.originalEvent.marker[0].children[0].children[i].style.border = "1px solid red"; 
                       
                   } 
               } 
               else { 
                   window.count++; 
                   document.getElementById("popup").innerHTML = ""; 
                   previourMarker = ""; 
                   document.getElementById("popup").style.visibility = "hidden"; 
                  
               } 
               window.latitude = args.originalEvent.data.latitude; 
               window.longitude = args.originalEvent.data.longitude; 
 
 
           } 
         

The Output of the rendered Map 
 

We have attached the sample for your reference 

Please let me know if you have any concerns 

Regards, 
Deepaa. 


KO Kyle Oliveros December 18, 2017 10:56 PM UTC

how come that if I scroll my mouse to zoom out after I click a marker to display pop up I cannot use my scroll unless I use the zoom in zoom out button of the ejNavigation

DP Deepaa Pragaasam Syncfusion Team December 19, 2017 05:54 AM UTC

Hi Kyle, 

We have analyzed your requirement. When the enableZoom property of the zoomSettings is enabled both the mouse wheel zooming and zooming on double click will be active. 
We do not have separate API for disabling and enabling the mouseWheel zooming alone. So as of now we cannot achieve your requirement. Thus we have set the enableZoom property as true in the sample where the mouse wheel zooming and double click zoom is enabled. 

[Maps.ASPX] 
<ej:Map ID="dataMarker" OnClientMarkerSelected="markerSelected" > 
 
</ej:Map> 
 
[JS] 
function markerSelected(args) { 
               
               if (previourMarker != args.originalEvent.data.Name) { 
                   args.model.zoomSettings.enableZoom = true; 
                   window.count++; 
                   document.getElementById("popup").style.visibility = "visible"; 
                   document.getElementById("popup").innerHTML = "Selected Marker is - " + args.originalEvent.data.Name; 
                   previourMarker = args.originalEvent.data.Name; 
               } 
               else { 
                   window.count++; 
                   document.getElementById("popup").innerHTML = ""; 
                   previourMarker = ""; 
                   document.getElementById("popup").style.visibility = "hidden"; 
                  
               } 
               window.latitude = args.originalEvent.data.latitude; 
               window.longitude = args.originalEvent.data.longitude; 
 
 
           } 


We have modified the sample and attached for your reference 

Please let us know if you have any concerns 

Regards, 
Deepaa. 



Loader.
Up arrow icon