Angular
Demos
Support
Forum
Download
Search results

User Interactions

Options like zooming, panning, single click and double click, highlight and map selection enables the effective interaction on Map elements.

Zooming

The zooming feature enables you to zoom in and out the Map to show in-depth information. It is controlled by the zoomFactor property of the zoomSettings of the map. When the zoomFactor is increased, the Map is zoomed in. When the zoomFactor is decreased, then the Map is zoomed out.

Enable Zooming

To enable the zooming feature, set the zoomSettings.enable as true in maps. Zooming feature needs the ZoomService injection to perform zooming actions, use module injection to inject ZoomService into Maps by using NgModule providers.

Various type of zooming

Zooming can be performed by various types. click zooming, double click zooming, toolbar zooming rectangular zooming, mouse wheel zooming and pinch zooming.

Refer the API links for Zooming.

[app.component.ts]

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Maps, Zoom } from '@syncfusion/ej2-angular-maps';
import { world_map } from 'world-map.ts';
Maps.Inject(Zoom);
@Component({
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container' [zoomSettings] = 'zoomSettings'>
     <e-layers>
    <e-layer [shapeData] = 'shapeData'></e-layer>
    </e-layers>
    </ejs-maps>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        public zoomSettings: Object = {
        enable: true,
    };
    public shapeData: Object = world_map;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService, SelectionService, AnnotationsService, ZoomService } from '@syncfusion/ej2-angular-maps';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, MapsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
     providers: [LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService , SelectionService, AnnotationsService, ZoomService]
   
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

[app.module.ts] Injecting ZoomService into NgModule.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the MapsModule for the Maps component
import { MapsModule, ZoomService} from '@syncfusion/ej2-angular-maps';
import { AppComponent }  from './app.component';

@NgModule({
  // declaration of ej2-angular-maps module into NgModule
  imports:      [ BrowserModule, MapsModule ],
  declarations: [ AppComponent ],
  providers: [ZoomService],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Selection

Each shape in the Map can be selected and deselected during interaction with the shapes.

By tapping on the specific legend, the shapes which are bounded to the selected legend is also selected and vice versa.

The layer selectionSettings.fill property is used to change the selected layer shape color. The selectionSettings.border.color and selectionSettings.border.width properties are used to customize the selected shape border.

You can select the shape by tapping the shape. The Single selection is enabled by the selectionSettings.enable property of shape layer. When selectionSettings.enable is set to false, the shapes cannot be selected.

Refer the API and code snippet for Selection.

Note: Selection is separate module, need to inject it’s service to work on Selection.

[app.component.ts]

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Maps, Selection } from '@syncfusion/ej2-angular-maps';
import { world_map } from 'world-map.ts';
Maps.Inject(Selection);
@Component({
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container' [zoomSettings] = 'zoomSettings'>
     <e-layers>
    <e-layer [shapeData] = 'shapeData' [selectionSettings] ='selectionSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
       public selectionSettings: Object = {
            enable: true,
            fill: 'green',
            border: { color: 'white', width: 2}
        };
    public shapeData: Object = world_map;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService, SelectionService, AnnotationsService, ZoomService } from '@syncfusion/ej2-angular-maps';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, MapsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
     providers: [LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService , SelectionService, AnnotationsService, ZoomService]
   
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

[app.module.ts] Injecting SelectionService into NgModule.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the MapsModule for the Maps component
import { MapsModule, SelectionService} from '@syncfusion/ej2-angular-maps';
import { AppComponent }  from './app.component';

@NgModule({
  // declaration of ej2-angular-maps module into NgModule
  imports:      [ BrowserModule, MapsModule ],
  declarations: [ AppComponent ],
  providers: [SelectionService],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Highlight

Each shape in the Map can be highlighted during mouse over on the shapes.

Hovering on the specific legend, the shapes which are bounded to the selected legend is also highlighted and vice versa.

The layer highlightSettings.fill property is used to change the highlighted layer shape color. The highlightSettings.border.color and highlightSettings.border.width properties are used to customize the highlighted shape border.

You can highlight the shape by mouse over on the shape. The highlight is enabled by the highlightSettings.enable property of shape layer. When highlightSettings.enable is set to false, the shapes cannot be highlighted.

Note: Highlight is separate module, need to inject to work on Highlight.

Refer the API and code snippet for Highlight.

[app.component.ts]

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Maps, Highlight } from '@syncfusion/ej2-angular-maps';
import { world_map } from 'world-map.ts';
Maps.Inject(Highlight);
@Component({
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container' [zoomSettings] = 'zoomSettings'>
     <e-layers>
    <e-layer [shapeData] = 'shapeData' [highlightSettings] ='highlightSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
      public highlightSettings: Object = {
            enable: true,
            fill: 'green',
            border: { color: 'white', width: 2}
        }
    public shapeData: Object = world_map;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService, SelectionService, AnnotationsService, ZoomService } from '@syncfusion/ej2-angular-maps';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, MapsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
     providers: [LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService , SelectionService, AnnotationsService, ZoomService]
   
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

[app.module.ts] Injecting HighlightService into NgModule.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the MapsModule for the Maps component
import { MapsModule, HighlightService} from '@syncfusion/ej2-angular-maps';
import { AppComponent }  from './app.component';

@NgModule({
  // declaration of ej2-angular-maps module into NgModule
  imports:      [ BrowserModule, MapsModule ],
  declarations: [ AppComponent ],
  providers: [HighlightService],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Tooltip

Tooltip used to get more information about layer or bubble or marker on mouse over or touch end event performing on that. Tooltip is a separate module, So it needs module injection to work maps tooltip. Using NgModule provider you can inject MapsTooltipService. tooltip module into maps.

Tooltip can be enabled separately for layer or bubble or marker by using tooltipSettings.visible as true. Tooltip valuePath value need to set to display dataSource which field as tooltip text. Below code snippet illustrate the tooltip enabled for layer to show shape data name field.

Refer the API for Tooltip feature.

Step: 1 Import the usmap geo json data from already created WorldMap.ts file and assign to shapeData.

Step: 2 Import MapsTooltipService from ej2-angular-maps package and Inject to NgModule provider.

Step: 3 Enable tooltip for layer using tooltipSettings.visible as true and bind valuePath value as ‘name’.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Maps, MapsTooltip } from '@syncfusion/ej2-angular-maps';
import { world_map } from 'world-map.ts';
Maps.Inject(MapsTooltip);
@Component({
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container' [zoomSettings] = 'zoomSettings'>
     <e-layers>
    <e-layer [shapeData] = 'shapeData' [tooltipSettings] ='tooltipSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
      public tooltipSettings: Object ={
            visible: true,
            valuePath: 'name'
        }
    public shapeData: Object = world_map;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService, SelectionService, AnnotationsService, ZoomService } from '@syncfusion/ej2-angular-maps';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, MapsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
     providers: [LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService , SelectionService, AnnotationsService, ZoomService]
   
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

[app.module.ts] Injecting MapsTooltipService into NgModule.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the MapsModule for the Maps component
import { MapsModule, MapsTooltipService} from '@syncfusion/ej2-angular-maps';
import { AppComponent }  from './app.component';

@NgModule({
  // declaration of ej2-angular-maps module into NgModule
  imports:      [ BrowserModule, MapsModule ],
  declarations: [ AppComponent ],
  providers: [MapsTooltipService],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
Previous
Next