Public Methods and Events in Angular Maps
20 May 20225 minutes to read
navigateTo(latitude, longitude, level)
Method for navigating to specific shape based on latitude, longitude and zoom level.
export class AppComponent {
navigateTo(){
this.map.widget.navigateTo();
}
// Create map instance
@ViewChild('mapControl') map: EJComponents<any, any>;
}pan(direction)
Method to perform map panning
export class AppComponent {
pan(){
this.map.widget.pan();
}
// Create map instance
@ViewChild('mapControl') map: EJComponents<any, any>;
}refresh()
Method to reload the map.
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
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.
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.
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.
onMarkerSelected(sender){
//Do something
}<ej-map id="events" (markerSelected)="onMarkerSelected($event)">
</ej-map>mouseLeave
Triggers while leaving the hovered map shape
onMouseLeave(sender){
//Do something
}<ej-map id="events" (mouseLeave)="onMouseLeave($event)">
</ej-map>mouseover
Triggers while hovering the map shape.
onMouseOver(sender){
//Do something
}<ej-map id="events" (mouseover)="onMouseOver($event)">
</ej-map>onRenderComplete
Triggers once map render completed.
onRenderComplete(sender){
//Do something
}<ej-map id="events" (onRenderComplete)="onRenderComplete($event)">
</ej-map>panned
Triggers when map panning ends.
onPanned(sender){
//Do something
}<ej-map id="events" (panned)="onPanned($event)">
</ej-map>shapeSelected
Triggered on selecting the map shapes.
onShapeSelected(sender){
//Do something
}<ej-map id="events" (shapeSelected)="onShapeSelected($event)">
</ej-map>zoomedIn
Triggered when map is zoomed-in.
onZoomedIn(sender){
//Do something
}<ej-map id="events" (zoomedIn)="onZoomedIn($event)">
</ej-map>zoomedOut
Triggers when map is zoomed out.
onZoomedOut(sender){
//Do something
}<ej-map id="events" (zoomedOut)="onZoomedOut($event)">
</ej-map>