Options like zooming, panning, single click and double click, highlight and map selection enables the effective interaction on Map elements.
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.
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
.
To enable the panning feature, set the enablePanning
property of zoomSettings
to true.
[app.component.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,
enablePanning: 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 { }
Zooming can be performed in following types:
Zooming toolbar
By default, the toolbar is rendered with zoom-in
, zoom-out
, and reset
options when it is set to ‘true’ in the enable
property of zoomSettings
. You can also customize the toolbar items using the toolBArs
property in zoomSettings
.
The following options are available in toolbar, and you can use the options as needed:
Refer the API
links for Zooming.
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;
}
}
Pinch Zooming
Use the pinchZooming
property in zoomSettings
to enable or disable the pinch zooming.
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,
pinchZooming:true
};
public shapeData: Object = world_map;
}
}
Single-click zooming
Use the zoomOnClick
property in zoomSettings
to enable or disable the single-click zooming
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,
zoomOnClick:true
};
public shapeData: Object = world_map;
}
}
Double-click zooming
Use the doubleClickZoom
property in zoomSettings
to enable or disable the double-click zooming.
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,
doubleClickZoom:true
};
public shapeData: Object = world_map;
}
}
Mouse wheel zooming
Use the mouseWheelZoom
property in zoomSettings
to enable or disable mouse wheel zooming.
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,
mouseWheelZoom:true
};
public shapeData: Object = world_map;
}
}
You can use the animationDuration
property in layers
property to zoom in or zoom out the maps with animation.
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' [animationDuration] = 'animationDuration'></e-layer>
</e-layers>
</ejs-maps>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
public zoomSettings: Object = {
enable: true,
mouseWheelZoom:true
};
pubic animationDuration: number = 500;
public shapeData: Object = world_map;
}
}
[app.component.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 { }
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
]
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 { }
Each shape in the map can be selected by calling the shapeSelection
method. Input parameters for this method are layerIndex, propertyName, country name and selected value as in boolean state(true / false).
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Maps, Selection, MapsComponent} 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' #maps>
<e-layers>
<e-layer [shapeData]= 'shapeData' [initialShapeSelection] = 'initialShapeSelection' [selectionSettings] ='selectionSettings'></e-layer>
</e-layers>
</ejs-maps> <button id='select' (click)='select()'>select</button> <button id='unselect' (click)='unselect()'>unselect</button>`
})
export class AppComponent implements OnInit {
@ViewChild('maps')
public mapObj: MapsComponent;
ngOnInit(): void {
public shapeData: Object = world_map;
public selectionSettings: Object = {
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
};
select(){
this.mapObj.shapeSelection(0, "continent", "Asia", true);
};
unselect(){
this.mapObj.shapeSelection(0, "continent", "Asia", false);
}
}
}
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);
Initially, the shape can be selected by using the property initialShapeSelection
and the values are mapped to the shapePath
and shapeValue
.
Note: initialShapeSelection is an Array property.
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' >
<e-layers>
<e-layer [shapeData]= 'shapeData' [initialShapeSelection] = 'initialShapeSelection' [selectionSettings] ='selectionSettings'></e-layer>
</e-layers>
</ejs-maps>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
public shapeData: Object = world_map;
public initialShapeSelection: Object = [
{ shapePath: 'continent', shapeValue: 'Africa' },
{ shapePath: 'name', shapeValue: 'India' }
];
public selectionSettings: Object = {
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
},
}
}
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);
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
]
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 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’.
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 { }