How to zoom

[Kyle Oliveros]

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

[Deepaa Pragaasam]

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 

Sample link: https://www.syncfusion.com/downloads/support/forum/135047/7z/popup_and_zooming2125643620  

  

Find the output of the sample below. 

 

Please let us know if you have any concerns 

Regards, 

Deepaa 

[Deepaa Pragaasam]

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. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/135047/7z/zoomingin_single_click704619313  

Please let me know if you have any concerns 

Regards, 

Deepaa 

[Kyle Oliveros]

 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?

[Deepaa Pragaasam]

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 

Sample link: https://www.syncfusion.com/downloads/support/forum/135047/7z/Border_and_double_click951926123  

Please let me know if you have any concerns 

Regards, 

Deepaa. 

[Kyle Oliveros]

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

[Deepaa Pragaasam]

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 

Sample link: https://www.syncfusion.com/downloads/support/forum/135047/7z/zooming_on_mouse_wheel-2037296798  

Please let us know if you have any concerns 

Regards, 

Deepaa.