Methods

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

  • ts
  • export class AppComponent {
    
    navigateTo(){
              
         this.map.widget.navigateTo();
    
    }
    
    // Create map instance
    @ViewChild('mapControl') map: EJComponents<any, any>;
    
    }

    pan(direction)

    Method to perform map panning

  • ts
  • export class AppComponent {
    
    pan(){
              
         this.map.widget.pan();
    
    }
    
    // Create map instance
    @ViewChild('mapControl') map: EJComponents<any, any>;
    
    }

    refresh()

    Method to reload the map.

  • ts
  • export class AppComponent {
    
    refresh(){
              
         this.map.widget.refresh();
    
    }
    
    // Create map instance
    @ViewChild('mapControl') map: EJComponents<any, any>;
    
    }

    refreshLayers()

    Method to reload the shapeLayers with updated values

  • ts
  • export class AppComponent {
    
    refreshLayers(){
              
         this.map.widget.refreshLayers();
    
    }
    
    // Create map instance
    @ViewChild('mapControl') map: EJComponents<any, any>;
    
    }

    refreshNavigationControl(navigation)

    Method to reload the navigation control with updated values.

  • ts
  • export class AppComponent {
    
    refreshNavigationControl(){
              
         this.map.widget.refreshNavigationControl();
    
    }
    
    // Create map instance
    @ViewChild('mapControl') map: EJComponents<any, any>;
    
    }

    zoom(level, isAnimate)

    Method to perform map zooming.

  • ts
  • export class AppComponent {
    
    zoom(){
              
         this.map.widget.zoom();
    
    }
    
    // Create map instance
    @ViewChild('mapControl') map: EJComponents<any, any>;
    
    }

    Events

    markerSelected

    Triggered on selecting the map markers.

  • ts
  • onMarkerSelected(sender){
         
         //Do something
    
    }
  • html
  • <ej-map id="events" (markerSelected)="onMarkerSelected($event)">    
    </ej-map>

    mouseLeave

    Triggers while leaving the hovered map shape

  • ts
  • onMouseLeave(sender){
         
         //Do something
    
    }
  • html
  • <ej-map id="events" (mouseLeave)="onMouseLeave($event)">    
    </ej-map>

    mouseover

    Triggers while hovering the map shape.

  • ts
  • onMouseOver(sender){
         
         //Do something
    
    }
  • html
  • <ej-map id="events" (mouseover)="onMouseOver($event)">    
    </ej-map>

    onRenderComplete

    Triggers once map render completed.

  • ts
  • onRenderComplete(sender){
         
         //Do something
    
    }
  • html
  • <ej-map id="events" (onRenderComplete)="onRenderComplete($event)">    
    </ej-map>

    panned

    Triggers when map panning ends.

  • ts
  • onPanned(sender){
         
         //Do something
    
    }
  • html
  • <ej-map id="events" (panned)="onPanned($event)">    
    </ej-map>

    shapeSelected

    Triggered on selecting the map shapes.

  • ts
  • onShapeSelected(sender){
         
         //Do something
    
    }
  • html
  • <ej-map id="events" (shapeSelected)="onShapeSelected($event)">    
    </ej-map>

    zoomedIn

    Triggered when map is zoomed-in.

  • ts
  • onZoomedIn(sender){
         
         //Do something
    
    }
  • html
  • <ej-map id="events" (zoomedIn)="onZoomedIn($event)">    
    </ej-map>

    zoomedOut

    Triggers when map is zoomed out.

  • ts
  • onZoomedOut(sender){
         
         //Do something
    
    }
  • html
  • <ej-map id="events" (zoomedOut)="onZoomedOut($event)">    
    </ej-map>

    Copyright © 2001 - 2015 Syncfusion Inc. All Rights Reserved