Methods

Method for navigating to specific shape based on latitude, longitude and zoom level.

  • html
  • <div id="map"></div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module MapComponent {
        $(function () {
            var sample = new ej.datavisualization.Map($("#map"),{
            //..//   
            });
     
         sample.navigateTo(); 
        });
    });
    }

    pan(direction)

    Method to perform map panning

  • html
  • <div id="map"></div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module MapComponent {
        $(function () {
            var sample = new ej.datavisualization.Map($("#map"),{
            //..//   
            });
     
         sample.pan(); 
        });
    });
    }

    refresh()

    Method to reload the map.

  • html
  • <div id="map"></div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module MapComponent {
        $(function () {
            var sample = new ej.datavisualization.Map($("#map"),{
            //..//   
            });
     
         sample.refresh(); 
        });
    });
    }

    refreshLayers()

    Method to reload the shapeLayers with updated values

  • html
  • <div id="map"></div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module MapComponent {
        $(function () {
            var sample = new ej.datavisualization.Map($("#map"),{
            //..//   
            });
     
         sample.refreshLayers(); 
        });
    });
    }

    refreshNavigationControl(navigation)

    Method to reload the navigation control with updated values.

  • html
  • <div id="map"></div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module MapComponent {
        $(function () {
            var sample = new ej.datavisualization.Map($("#map"),{
            //..//   
            });
     
         sample.refreshNavigationControl(); 
        });
    });
    }

    zoom(level, isAnimate)

    Method to perform map zooming.

  • html
  • <div id="map"></div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module MapComponent {
        $(function () {
            var sample = new ej.datavisualization.Map($("#map"),{
            //..//   
            });
     
         sample.zoom(); 
        });
    });
    }

    Events

    markerSelected

    Triggered on selecting the map markers.

  • javascript
  • <script>
    
    //markerSelected event for Map 
      $(function () {
            var sample = new ej.datavisualization.Map($("#map"), {
                  markerSelected: function () {
                     //..//
                    }
                });
            });
           
    </script>

    mouseLeave

    Triggers while leaving the hovered map shape

  • javascript
  • <script>
    
    //mouseLeave event for Map 
      $(function () {
            var sample = new ej.datavisualization.Map($("#map"), {
                  mouseLeave: function () {
                     //..//
                    }
                });
            });
           
    </script>

    mouseover

    Triggers while hovering the map shape.

  • javascript
  • <script>
    
    //mouseover event for Map 
      $(function () {
            var sample = new ej.datavisualization.Map($("#map"), {
                  mouseover: function () {
                     //..//
                    }
                });
            });
           
    </script>

    onRenderComplete

    Triggers once map render completed.

  • javascript
  • <script>
    
    //onRenderComplete event for Map 
      $(function () {
            var sample = new ej.datavisualization.Map($("#map"), {
                  onRenderComplete: function () {
                     //..//
                    }
                });
            });
           
    </script>

    panned

    Triggers when map panning ends.

  • javascript
  • <script>
    
    //panned event for Map 
      $(function () {
            var sample = new ej.datavisualization.Map($("#map"), {
                  panned: function () {
                     //..//
                    }
                });
            });
           
    </script>

    shapeSelected

    Triggered on selecting the map shapes.

  • javascript
  • <script>
    
    //shapeSelected event for Map 
      $(function () {
            var sample = new ej.datavisualization.Map($("#map"), {
                  shapeSelected: function () {
                     //..//
                    }
                });
            });
           
    </script>

    zoomedIn

    Triggered when map is zoomed-in.

  • javascript
  • <script>
    
    //zoomedIn event for Map 
      $(function () {
            var sample = new ej.datavisualization.Map($("#map"), {
                  zoomedIn: function () {
                     //..//
                    }
                });
            });
           
    </script>

    zoomedOut

    Triggers when map is zoomed out.

  • javascript
  • <script>
    
    //zoomedOut event for Map 
      $(function () {
            var sample = new ej.datavisualization.Map($("#map"), {
                  zoomedOut: function () {
                     //..//
                    }
                });
            });
           
    </script>

    Copyright © 2001 - 2015 Syncfusion Inc. All Rights Reserved