# Markers in Angular Maps component

Markers are notes that are used to leave a message on the Maps. It indicates or marks a specific location with desired symbols on the Maps. It can be enabled by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#visible) property of the [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/) to **true**.

## Adding marker

To add the markers, the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#datasource) property of the [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/) has a list of objects that contains the data for markers. Using this property, any number of markers can be added to the layers of the Maps. By default, it displays the markers based on the specified latitude and longitude in the given data source. Each data source object contains the following list of properties.

* latitude - The latitude point which determines the X location of the marker.
* longitude - The longitude point which determines the Y location of the marker.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'  >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [{
            visible: true,
            height: 20,
            width: 20,
            dataSource: [
                { latitude: 49.95121990866204, longitude: 18.468749999999998 },
                { latitude: 59.88893689676585, longitude: -109.3359375 },
                { latitude: -6.64607562172573, longitude: -55.54687499999999 }
            ],
            animationDuration: 0,
        }]
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


## Adding marker template

The Marker can be added as a template in the Maps component. The [`template`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#template) property of the [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/) is used to set the HTML string or id of an element as a template.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'  >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [
            {
                visible: true,
                template: '<div id="marker4" class="markerTemplate">Europe' +
                        '</div>',
                dataSource: [
                    { latitude: 49.95121990866204, longitude: 18.468749999999998 }
                ],
                animationDuration: 0,
            },
            {
                visible: true,
                template: '<div id="marker5" class="markerTemplate" style="width:50px">North America' +
                        '</div>',
                dataSource: [
                    { latitude: 59.88893689676585, longitude: -109.3359375 }
                ],
                animationDuration: 0
            },
            {
                visible: true,
                template: '<div id="marker6" class="markerTemplate" style="width:50px">South America' +
                        '</div>',
                dataSource: [
                    { latitude: -6.64607562172573, longitude: -55.54687499999999 }
                ],
                animationDuration: 0
            }
        ]
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


## Customization

The following properties are available in [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/) to customize the Markers of the Maps component.

* [`border`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#border) - To customize the color, width and opacity of the border for the markers in Maps.
* [`fill`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#fill) - To apply the color for markers in Maps.
* [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#dasharray) - To define the pattern of dashes and gaps that is applied to the outline of the markers in Maps.
* [`height`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#height) - To customize the height of the markers in Maps.
* [`width`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#width) - To customize the width of the markers in Maps.
* [`offset`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#offset) - To customize the position of the markers in Maps.
* [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#opacity) - To customize the transparency of the markers in Maps.
* [`animationDelay`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#animationdelay) - To change the time delay in the transition for markers.
* [`animationDuration`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#animationduration) - To change the time duration of animation for markers.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'  >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [{
            visible: true,
            border: {
                color: 'green',
                width: 2
            },
            fill: 'red',
            dashArray: '1',
            height: 20,
            width: 20,
            opacity: 0.9,
            animationDelay: 100,
            animationDuration: 1000,
            shape: 'Balloon',
            dataSource: [
                { latitude: 37.0000, longitude: -120.0000, city: 'California' },
                { latitude: 40.7127, longitude: -74.0059, city: 'New York' },
                { latitude: 42, longitude: -93, city: 'Iowa' }
            ]
        }]
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


## Marker shapes

The Maps component supports the following marker shapes. To set the shape of the marker, the [`shape`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#shape) property in [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel) is used.

* Balloon
* Circle
* Cross
* Diamond
* Image
* Rectangle
* Start
* Triangle
* VerticalLine
* HorizontalLine

### Rendering marker shape as image

To render a marker as an image in Maps, set the [`shape`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#shape) property of [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/) as **Image** and specify the path of the image to [`imageUrl`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#imageurl) property. There is another way to render a marker as an image using the [`imageUrlValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#imageurlvaluepath) property of the [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/). Bind the field name that contains the path of the image in the data source to the [`imageUrlValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#imageurlvaluepath) property.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'>
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [{
            visible: true,
            shape: 'Image',
            imageUrl: 'https://ej2.syncfusion.com/angular/demos/assets/maps/images/ballon.png',
            height: 20,
            width: 20,
            dataSource: [
                { latitude: 37.0000, longitude: -120.0000, city: 'California' },
                { latitude: 40.7127, longitude: -74.0059, city: 'New York' },
                { latitude: 42, longitude: -93, city: 'Iowa' }
            ]
        }]
    }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


## Multiple marker groups

Multiple groups of markers can be added to the Maps using the [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel) in which the properties of markers are added as an array. The customization for the markers can be done with the [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel).

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'  >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [{
            visible: true,
            shape: 'Diamond',
            height: 15,
            fill: "green",
            width: 15,
            dataSource: [
                {
                    latitude: 37.0000, longitude: -120.0000, name:'California',
                },
                {
                    latitude: 40.7127, longitude: -74.0059, name:"New York"
                },
                {
                    latitude: 42, longitude: -93, name:'Iowa'
                }
            ]
        },
        {
            visible: true,
            dataSource: [{
                latitude: 19.228825, longitude: 72.854118, name: "Mumbai"
            }, {
                latitude: 28.610001, longitude: 77.230003, name: "Delhi"
            }, {
                latitude: 13.067439, longitude: 80.237617, name: "Chennai"
            }],
            shape: 'Circle',
            fill: "blue",
            height: 10,
            width: 10
        }]
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


## Customize marker shapes from data source

### Bind different colors and shapes to the marker from data source

Using the [`shapeValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#shapevaluepath) and [`colorValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#colorvaluepath) properties, the color and shape of the marker can be applied from the given data source. Bind the data source to the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#datasource) property of the [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/) and set the field names that contains the shape and color values in the data source to the [`shapeValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#shapevaluepath) and [`colorValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#colorvaluepath) properties.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container' >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [{
            visible: true,
            shapeValuePath:'shape',
            colorValuePath:'color',
            dataSource: [
                { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe', color:'red', shape:'Triangle' },
                { latitude: 59.88893689676585, longitude: -109.3359375, name:'North America',
                color:'blue', shape:'Pentagon' },
                { latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America',
                color:'green', shape:'InvertedTriangle' }
            ]
        }];
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


### Setting value path from the data source

The latitude and longitude values are used to determine the location of each marker in the Maps. The [`latitudeValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#latitudevaluepath) and [`longitudeValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#longitudevaluepath) properties are used to specify the value path that presents in the data source of the marker. In the following example, the field name from the data source is set to the [`latitudeValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#latitudevaluepath) and [`longitudeValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#longitudevaluepath) properties.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'  >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [{
            visible: true,
            latitudeValuePath: 'latitude',
            longitudeValuePath: 'longitude',
            dataSource: [
                { latitude: 49.95121990866204, longitude: 18.468749999999998 },
                { latitude: 59.88893689676585, longitude: -109.3359375},
                { latitude: -6.64607562172573, longitude: -55.54687499999999 }
            ]
        }]
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


### Setting different sizes for markers individually

The size of the markers in a marker group can be customized using the [widthValuePath](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#widthvaluepath) and [heightValuePath](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#heightvaluepath) properties, which allow the user to change the width and height of the markers based on values from the given data source. Bind the data source to the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#datasource) property of the [markerSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/), and specify the field names containing the width and height values in the data source for the `widthValuePath` and `heightValuePath` properties.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { MarkerService } from '@syncfusion/ej2-angular-maps';
import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'  >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [{
            visible: true,
            shape: 'Circle',
            widthValuePath: 'width',
            heightValuePath: 'height',
            dataSource: [
                {
                    latitude: 49.95121990866204,
                    longitude: 18.468749999999998,
                    width: 30,
                    height: 30,
                },
                {
                    latitude: 59.88893689676585,
                    longitude: -109.3359375,
                    width: 20,
                    height: 20,
                },
                {
                    latitude: -6.64607562172573,
                    longitude: -55.54687499999999,
                    width: 10,
                    height: 10,
                }
            ]
        }]
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


## Repositioning the marker using drag and drop

The markers on the map can be dragged and dropped to change their position. To enable marker drag and drop, set the [enableDrag](https://helpej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#enabledrag) property to **true** in the [markerSettings](https://helpej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/) property.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService, MapsTooltipService } from '@syncfusion/ej2-angular-maps'

import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService, MapsTooltipService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'>
    <e-layers>
    <e-layer [shapeSettings] = 'shapeSettings'  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    public shapeSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.shapeSettings = {
            fill: '#C3E6ED'
        };
        this.markerSettings = [{
            enableDrag: true,
            dataSource: [
                 { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'MarkerOne' },
                 { latitude: 59.88893689676585, longitude: -109.3359375, name:'MarkerTwo'},
                 { latitude: -6.64607562172573, longitude: -55.54687499999999 , name:'MarkerThree'},
                 { latitude: 23.644385824912135, longitude: 77.83189239539234  , name:'MarkerFour'},
                 { latitude: 63.66569332894224, longitude: 98.2225173953924 , name:'MarkerFive'}
            ],
            visible: true,
            animationDuration: 0,
            shape: 'Balloon',
            width: 20,
            height: 20,
            border: { width: 2, color: '#285255' },
            tooltipSettings: {
                visible: true,
                valuePath: 'name',
            }
        }]
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


The data of the drag and dropped marker in the marker data source can be customized using the [markerDragStart](https://helpej2.syncfusion.com/angular/documentation/api/maps/#markerdragstart) and [markerDragEnd](https://helpej2.syncfusion.com/angular/documentation/api/maps/#markerdragend) events. When you change the appropriate marker data, the tooltip and legend item text of that marker are automatically updated. The following properties are available in the event argument of the marker drag events.

|   Argument Name      |   Description                               |
|----------------------| --------------------------------------------|
|   dataIndex          |   It represents the index of the data of the dragged marker in the marker data source.                          |
|   latitude           |   It represents the latitude coordinate point of the dragged marker.                                            |
|   longitude          |   It represents the longitude coordinate point for the dragged marker.                                          |
|   markerIndex        |   It represents the index of the marker setting.                                                                |
|   layerIndex         |   It represents the index of the layer in which the marker belongs.                                             |
|   name               |   It represents the name of the event.                                                                          |
|   x                  |   It represents the horizontal location of the mouse pointer on the map when the drag action is performed.      |
|   y                  |   It represents the vertical location of the mouse pointer on the map when the drag action is performed.        |

The following example shows how to use marker drag events to customize the data of the drag and dropped marker in the marker data source.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { LegendService, MarkerService, MapsTooltipService } from '@syncfusion/ej2-angular-maps'

import { Component, OnInit, ViewChild } from '@angular/core';
import { Maps, IMarkerDragEventArgs } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [LegendService, MarkerService, MapsTooltipService],
standalone: true,
    selector: 'app-container',
    template: `
        <ejs-maps id="rn-container" #maps (markerDragStart)="markerDragStart($event)" (markerDragEnd)="markerDragEnd($event)" [legendSettings]="legendSettings">
        <e-layers>
            <e-layer [shapeSettings]="shapeSettings" [shapeData]="shapeData" [markerSettings]="markerSettings"></e-layer>
        </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    @ViewChild('maps')
    public mapsInstance?: Maps;
    public shapeData?: object;
    public markerSettings?: object;
    public shapeSettings?: object;
    public zoomSettings?: object;
    public markerDragStart = (args: IMarkerDragEventArgs | any) => {
      // When the marker begins to move on the map, the event is triggered.
    };
    public markerDragEnd = (args: IMarkerDragEventArgs | any) => {
      // When the marker on the map stops dragging, the event is triggered.
      (this.mapsInstance as any).layers[args.layerIndex].markerSettings[args.markerIndex].dataSource[args.dataIndex].name = 'Dragged Marker ' + (args.dataIndex + 1);
      (this.mapsInstance as Maps).refresh();
    };
    public legendSettings?: object;

    ngOnInit(): void {
        this.shapeData = world_map;
        this.legendSettings = {
            visible: true,
            type: 'Markers',
            shape: 'Circle',
            shapeWidth: 10,
            shapeHeight: 10,
            fill: '#FF471A',
            shapeBorder: { width: 2, color: '#285255' },
        };
        this.shapeSettings = {
          fill: '#C3E6ED',
        };
        this.zoomSettings = {
          enable: false,
        };
        this.markerSettings = [
        {
            enableDrag: true,
            legendText: 'name',
            dataSource: [
                {
                  latitude: 49.95121990866204,
                  longitude: 18.468749999999998,
                  name: 'MarkerOne',
                },
                {
                  latitude: 59.88893689676585,
                  longitude: -109.3359375,
                  name: 'MarkerTwo',
                },
                {
                  latitude: -6.64607562172573,
                  longitude: -55.54687499999999,
                  name: 'MarkerThree',
                },
                {
                  latitude: 23.644385824912135,
                  longitude: 77.83189239539234,
                  name: 'MarkerFour',
                },
                {
                  latitude: 63.66569332894224,
                  longitude: 98.2225173953924,
                  name: 'MarkerFive',
                },
            ],
            visible: true,
            animationDuration: 0,
            shape: 'Balloon',
            width: 20,
            height: 20,
            border: { width: 2, color: '#285255' },
            tooltipSettings: {
              visible: true,
              valuePath: 'name',
            },
        },
    ];
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


## Marker zooming

The Maps can be initially scaled to the center value based on the marker distance. This can be achieved by setting the [`shouldZoomInitially`](https://ej2.syncfusion.com/angular/documentation/api/maps/zoomSettingsModel/#shouldzoominitially) property in [`zoomSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/zoomSettingsModel/) as **true**.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService, ZoomService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService, ZoomService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'  [zoomSettings] ='zoomSettings'>
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    public zoomSettings?: object
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [
        {
            visible: true,
            dataSource: [
                { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
                { latitude: 59.88893689676585, longitude: -109.3359375, name:'North America' },
                { latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America'}
            ],
        },
        ];
        this.zoomSettings = {
            enable: true,
            shouldZoomInitially: true,
            toolbarSettings: {
                horizontalAlignment: 'Near'
            }
        }
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


## Marker clustering

Maps support hiding and clustering markers when they overlap. The number on a cluster indicates how many overlapping markers it contains. When zooming into any cluster location on the map, the number on the cluster decreases, and individual markers become visible. When zooming out, the overlapping markers increase, causing them to cluster again, which increases the count on the cluster.

To enable clustering for markers within a layer, set the [allowClustering](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#allowclustering) property of [markerClusterSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel) in the [layers](https://ej2.syncfusion.com/angular/documentation/api/maps/#layers) to **true**. Customization of clustering can be done using the `markerClusterSettings` property.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService, MapsTooltipService, ZoomService } from '@syncfusion/ej2-angular-maps'



import { Component, ViewEncapsulation, ViewChild, OnInit  } from '@angular/core';
import { world_map } from './world-map';
import { cluster } from './marker-location';;
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService, MapsTooltipService, ZoomService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container' [zoomSettings] = 'zoomSettings' [layers] = 'layers'>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public zoomSettings?: object;
    public layers?: object;
    ngOnInit(): void {
        this.zoomSettings = {
            enable: true
        };
        this.layers = [{
            shapeData: world_map,
            shapeSettings: { fill: '#C1DFF5' },
            markerClusterSettings: {
                allowClustering: true,
                shape: 'Circle',
                height: 40,
                width: 40,
                labelStyle: { color: 'white' },
            },
            markerSettings: [{
                dataSource: cluster,
                visible: true,
                animationDuration: 0,
                shape: 'Balloon',
                height: 20,
                width: 20,
                tooltipSettings: {
                    visible: true,
                    valuePath: 'area',
                }
            }]
        }];
    }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


### Customization of marker cluster

The following properties are available to customize the marker clustering in the Maps component.

* [`border`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#border) -  To customize the color, width and opacity of the border of cluster in Maps.
* [`connectorLineSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/connectorLineSettingsModel/) - To customize the connector line in cluster separating the markers.
* [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#dasharray) - To customize the dash array for the marker cluster in Maps.
* [`fill`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#fill) - Applies the color of the cluster in Maps.
* [`height`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#height) - To customize the height of the marker cluster in Maps.
* [`imageUrl`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#imageurl) - To customize the URL path for the marker cluster when the cluster shape is set as image in Maps.
* [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#labelstyle) -  To customize the text in marker cluster.
* [`offset`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#offset) - To customize the offset position for the marker cluster in Maps.
* [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#opacity) - To customize the opacity of the marker cluster.
* [`shape`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#shape) - To customize the shape for the cluster of markers.
* [`width`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#width) - To customize the width of the marker cluster in Maps.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService, MapsTooltipService, ZoomService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit  } from '@angular/core';
import { Point } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';
import { cluster } from './marker-location';;
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService, MapsTooltipService, ZoomService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container' [zoomSettings] = 'zoomSettings' [layers] = 'layers'>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public zoomSettings?: object;
    public layers?: object;
    ngOnInit(): void {
        this.zoomSettings = {
            enable: true
        };
        this.layers = [{
            shapeData: world_map,
            shapeSettings: { fill: '#C1DFF5' },
            markerClusterSettings: {
                allowClustering: true,
                allowClusterExpand: true,
                shape: 'Circle',
                height: 40,
                width: 40,
                labelStyle : { color: 'white'},
                offset: new Point(10, 20),
                opacity: 0.9,
                fill: 'green',
                connectorLineSettings: {
                    color: 'orange',
                    opacity: 0.8,
                    width: 2
                }
            },
            markerSettings: [{
                dataSource: cluster,
                visible: true,
                animationDuration: 0,
                shape: 'Balloon',
                height: 20,
                width: 20,
                tooltipSettings: {
                    visible: true,
                    valuePath: 'area',
                }
            }]
        }];
    }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


### Expanding the marker cluster

The cluster is formed by grouping an identical and non-identical marker from the surrounding area. By clicking on the cluster and setting the [`allowClusterExpand`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#allowclusterexpand) property in [`markerClusterSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel) as **true** to expand the identical markers. If zooming is performed in any of the locations of the cluster, the number on the cluster will decrease and the overlapping marker will be split into an individual marker on the map. When performing zoom out, it will increase the marker count and then cluster it again.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService, ZoomService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService, ZoomService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'  [zoomSettings] ='zoomSettings'  >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings' [markerClusterSettings] = 'markerClusterSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    public zoomSettings?: object;
    public markerClusterSettings?: object;
    ngOnInit(): void {
        this.shapeData = world_map;
        this.markerSettings = [{
            visible: true,
            dataSource: [
                { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
                { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
                { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
                { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
                { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
                { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
                { latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
                { latitude: 59.88893689676585, longitude: -109.3359375, name:'North America' },
                { latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America'}
            ]
        }];
        this.zoomSettings = {
            enable: true,
            mouseWheelZoom : true,
        },
        this.markerClusterSettings = {
            allowClustering: true,
            allowClusterExpand: true,
            shape: 'Circle',
            height: 40,
            width: 40,
            labelStyle : { color: 'white'},
        }
    }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


### Clustering markers within each marker group

Marker clustering can be enabled for each marker group in the map by using the [clusterSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/#clustersettings) property within the [markerSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel/) property in the [layers](https://ej2.syncfusion.com/angular/documentation/api/maps/#layers). This allows for individual customization of clusters for each marker group which group markers that are located near each other to reduce clutter and improve readability. When the [allowClustering](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#allowclustering) property is set to **true**, the markers within each group are clustered and visually represented as separate clusters. As users zoom in, the clusters expand to reveal individual markers, enabling more detailed exploration. Clusters can also be expanded manually by setting the [allowClusterExpand](https://ej2.syncfusion.com/angular/documentation/api/maps/markerClusterSettingsModel/#allowclusterexpand) property to **true**. The appearance of the clusters and their expansion behavior can be customized using the `clusterSettings` property, similar to the [markerClusterSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettingsModel/#markerclustersettings) property, as explained in the sections above.

>When the `clusterSettings` property is enabled for an individual marker group, the `markerClusterSettings` property within the layers becomes ineffective.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { MarkerService, MapsTooltipService, ZoomService } from '@syncfusion/ej2-angular-maps';
import { Component, OnInit  } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService, MapsTooltipService, ZoomService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='container' style="display:block;" [layers]='layers' [zoomSettings]="zoomSettings" [titleSettings]="titleSettings">
     </ejs-maps>`
})

export class AppComponent implements OnInit {
    public zoomSettings?: object;
    public layers?: object;
    public titleSettings?: object;
    ngOnInit(): void {
        this.zoomSettings ={
            enable: true,
            toolbarSettings: {
                buttonSettings: {
                    toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
                }
            }
        };
        this.titleSettings = {
            text: 'Attractive places around the world',
            textStyle: {
                size: '16px'
            }
        };
        this.layers = [{
            shapeData: world_map,
            markerSettings: [
                {
                    clusterSettings: {
                        allowClustering: true,
                        allowDeepClustering: false,
                        allowClusterExpand: true,
                        labelStyle: {
                            color: 'white',
                            size: '10px'
                        },
                        shape: 'Image',
                        height: 40, width: 40,
                        imageUrl: 'https://ej2.syncfusion.com/angular/demos/assets/maps/images/cluster-france.svg'
                    },
                    visible: true,
                    dataSource: [
                        { latitude: 48.8584, longitude: 2.2945, name: 'Eiffel Tower', state: 'Paris', country: 'France' },
                        { latitude: 48.8606, longitude: 2.3376, name: 'Louvre Museum', state: 'Paris', country: 'France' },
                        { latitude: 48.8529, longitude: 2.3500, name: 'Notre-Dame Cathedral', state: 'Paris', country: 'France' },
                        { latitude: 48.6360, longitude: 1.5115, name: 'Mont Saint-Michel', state: 'Normandy', country: 'France' }
                    ],
                    shape: 'Circle',
                    height: 15,
                    width: 15,
                    fill: '#b38600',
                    border: {
                        color: '#e6f2ff',
                        width: 2
                    },
                    tooltipSettings: {
                        visible: true,
                        valuePath: 'name',
                        format: '<b>Name:</b> ${name} <br/> <b>State:</b> ${state} <br/> <b>Country:</b> ${country}'
                    },
                    animationDuration: 0
                },
                {
                    clusterSettings: {
                        allowClustering: true,
                        allowDeepClustering: false,
                        allowClusterExpand: true,
                        shape: 'Image',
                        height: 40, width: 40,
                        labelStyle: {
                            color: 'white',
                            size: '10px'
                        },
                        imageUrl: 'https://ej2.syncfusion.com/angular/demos/assets/maps/images/cluster-usa.svg'
                    },
                    visible: true,
                    dataSource: [
                        { latitude: 35.019028, longitude: -85.339439, name: 'Ruby Falls', state: 'Tennessee', country: 'United States of America' },
                        { latitude: 35.654613, longitude: -105.996979, name: 'Meow Wolf Santa Fe', state: 'New Mexico', country: 'United States of America' },
                        { latitude: 36.107216, longitude: -115.175804, name: 'City Center of Las Vegas', state: 'Nevada', country: 'United States of America' },
                        { latitude: 36.879047, longitude: -111.510498, name: 'Horseshoe Bend', state: 'Arizona', country: 'United States of America' },
                        { latitude: 36.011955, longitude: -113.810951, name: 'Grand Canyon West Skywalk', state: 'Arizona', country: 'United States of America' }
                    ],
                    shape: 'Circle',
                    height: 15,
                    width: 15,
                    fill: '#bf4040',
                    border: {
                        color: '#e6f2ff',
                        width: 2
                    },
                    tooltipSettings: {
                        visible: true,
                        valuePath: 'name',
                        format: '<b>Name:</b> ${name} <br/> <b>State:</b> ${state} <br/> <b>Country:</b> ${country}'
                    },
                    animationDuration: 0
                },
                {
                    clusterSettings: {
                        allowClustering: true,
                        allowDeepClustering: false,
                        allowClusterExpand: true,
                        shape: 'Image',
                        height: 40, width: 40,
                        labelStyle: {
                            color: 'white',
                            size: '10px'
                        },
                        imageUrl: 'https://ej2.syncfusion.com/angular/demos/assets/maps/images/cluster-india.svg'
                    },
                    visible: true,
                    dataSource: [
                        { latitude: 26.985901, longitude: 75.850700, name: 'Amber Fort, Amer', state: 'Rajastan', country: 'India' },
                        { latitude: 22.957390, longitude: 77.625275, name: 'Bhimbetka, Raisen District', state: 'Madhya Pradesh', country: 'India' },
                        { latitude: 26.809330, longitude: 75.540527, name: 'Bagru Fort, Bagru', state: 'Rajasthan', country: 'India' },
                        { latitude: 25.489504, longitude: 80.330116, name: 'Kalinjar Fort, Banda', state: 'Uttar Pradesh', country: 'India' },
                        { latitude: 27.988890, longitude: 76.388336, name: 'Neemrana', state: 'Rajasthan', country: 'India' }
                    ],
                    shape: 'Circle',
                    fill: '#00b3b3',
                    border: {
                        color: '#e6f2ff',
                        width: 2
                    },
                    height: 15,
                    width: 15,
                    tooltipSettings: {
                        visible: true,
                        valuePath: 'name',
                        format: '<b>Name:</b> ${name} <br/> <b>State:</b> ${state} <br/> <b>Country:</b> ${country}'
                    },
                    animationDuration: 0
                }
            ]
        }];
    }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
  


## Tooltip for marker

Tooltip is used to display more information about a marker on mouse over or touch end event. This can be enabled separately for marker by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/maps/tooltipSettingsModel/#visible) property of [`tooltipSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/tooltipSettingsModel) to **true**. The [`valuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/tooltipSettingsModel/#valuepath) property in the [`tooltipSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/tooltipSettingsModel) takes the field name that presents in data source and displays that value as tooltip text.

{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService, MapsTooltipService } from '@syncfusion/ej2-angular-maps'



import { Component, OnInit } from '@angular/core';
import { usa_map } from './usa';
@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService, MapsTooltipService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container'>
    <e-layers>
    <e-layer  [shapeData]= 'shapeData' [markerSettings] = 'markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})

export class AppComponent implements OnInit {
    public shapeData?: object;
    public markerSettings?: object;
    ngOnInit(): void {
        this.shapeData = usa_map;
        this.markerSettings = [{
            dataSource: [
                { latitude: 40.7424509, longitude: -74.0081468, city: 'New York' }
            ],
            visible:true,
            shape:'Circle',
            fill:'white',
            width:3,
            animationDuration:0,
            border: { width:2, color:'green'},
            tooltipSettings: {
                visible: true,
                valuePath:'city'
            }
        }]
   }
}



{% endhighlight %}

{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}