Different marker objects can be added to the Maps component using the marker settings. To update different marker settings in Maps, please follow the given steps:
Step 1:
Initialize the Maps control with marker settings. Here, a marker has been added with specified latitude and longitude of California by using the dataSource
property. To customize the shape of the marker using the shape
property and change the border color and width of the marker using the border
property as mentioned in the following example.
import { Component, ViewEncapsulation } from '@angular/core';
import { usa_map } from 'usa.ts';
@Component({
selector: 'app-container',
// specifies the template string for the maps component
template:`<ejs-maps id='container'>
<e-layers>
<e-layer [shapeData]='usmap' [markerSettings]='markerSettings'></e-layer>
</e-layers>
</ejs-maps>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public usmap=usa_map;
public markerSettings = [
{
dataSource: [
{ latitude: 37.0000, longitude: -120.0000, city: 'California' }
],
visible:true,
shape:'Circle',
fill:'white',
width:3,
animationDuration:0,
border:{width:2,color:'#333'}
}
]
}
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);
Step 2:
Customize the above option for n number of markers as mentioned in the following example.
import { Component, ViewEncapsulation } from '@angular/core';
import { usa_map } from 'usa.ts';
@Component({
selector: 'app-container',
// specifies the template string for the maps component.
template:`<ejs-maps id='container'>
<e-layers>
<e-layer [shapeData]='usmap' [markerSettings]='markerSettings'></e-layer>
</e-layers>
</ejs-maps>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public usmap=usa_map;
// Initializing Map with Marker sttings.
public markerSettings = [
{
dataSource: [
{ latitude: 37.0000, longitude: -120.0000, city: 'California' }
],
visible:true,
shape:'Circle',
fill:'white',
width:3,
animationDuration:0,
border:{width:2,color:'#333'}
},
{
dataSource: [
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' }
],
visible:true,
shape:'Rectangle',
fill:'yellow',
width:15,
height:4,
animationDuration:0,
border:{width:2,color:'#333'}
},
{
dataSource: [
{ latitude: 42, longitude: -93, city: 'Iowa' }
],
visible:true,
shape:'Diamond',
fill:'white',
width:10,
height:10,
animationDuration:0,
border:{width:2,color:'blue'}
},
{
dataSource: [
{ latitude:36.499589049395055, longitude:-103.042108197135548, city:'New Mexico'}
],
visible:true,
shape:'Balloon',
fill:'red',
width:10,
height:15,
animationDuration:0,
border:{width:2,color:'#333'}
},
{
dataSource: [
{ latitude:36.360624205142919, longitude:-94.595916790727287, city:'Oklahoma'}
],
visible:true,
shape:'Triangle',
fill:'blue',
width:10,
animationDuration:0,
border:{width:2,color:'#333'}
}
]
}
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);