Angular Map - Add and Remove
To add markers at design-time, pass an array of objects to the markers property. A marker requires only its location to be specified.
HTML
TypeScript
- <dx-map
- [zoom]="5"
- [markers]="mapMarkers">
- </dx-map>
- import { DxMapModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- mapMarkers = [
- { location: "40.749825, -73.090443" },
- { location: "42.743244, -71.594375" },
- { location: "37.058435, -74.903842" }
- ];
- }
- @NgModule({
- imports: [
- // ...
- DxMapModule
- ],
- // ...
- })
To add or remove a marker at runtime, bind the markers property of the Map to a component property:
HTML
TypeScript
- <dx-map
- [zoom]="10"
- [markers]="mapMarkers"
- (onClick)="addMarker($event)">
- </dx-map>
- <dx-button
- text="Remove the Last Marker"
- (onClick)="removeMarker()">
- </dx-button>
- import { DxMapModule, DxButtonModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- mapMarkers = [
- { location: "40.749825, -73.090443" },
- { location: "42.743244, -71.594375" }
- ];
- addMarker (e) {
- this.mapMarkers.push({ location: e.location });
- };
- removeMarker () {
- this.mapMarkers.pop();
- }
- }
- @NgModule({
- imports: [
- // ...
- DxMapModule,
- DxButtonModule
- ],
- // ...
- })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.