Kendo Angular Map

[Michael]

Is there any interactivity that can be used with Kendo Angular Map?

Like setting the "center" property after clicking on the map!

I also have troubles with scaling to width and height 100%!

[Zornitsa]

Hi Michael,

I noticed that a similar question was asked in the following private support thread, and I have provided a reply about the matter in the private ticket:

• https://www.telerik.com/account/support-center/view-ticket/1706128 

Still, I will also share here my reply from the linked ticket since the information can be helpful for other developers in the community who may encounter a similar scenario:

1. Setting the Center on Map Click

You can update the Map's center dynamically upon click by handling the mapClick event. This event provides the clicked coordinates, which can be used to set the Map's center property.

For example:

<kendo-map
  [center]="center"
  (mapClick)="onMapClick($event)"
></kendo-map>

public center = [42.698334, 23.319941];

onMapClick(event: MapClickEvent): void {
  this.center = event.location;
}

2. Scaling to 100% Width and Height

To ensure the Map fills its container and does not shrink when zooming, dragging, or using navigation buttons, both the Map and all of its parent containers must have their height and width set explicitly.

For instance, if you want the Map to cover the full viewport, use the following markup:

<div style="width: 100vw; height: 100vh;">
  <kendo-map style="width: 100%; height: 100%;"></kendo-map>
</div>

Below you can find a StackBlitz example demonstrating both approaches in action:

• https://stackblitz.com/edit/angular-tmzb8wbb 

Lastly, in the future, it would be great if you could post questions either here, in the Q&A Forum, or as a private support ticket. This allows our team to maintain a clean support history and respectively provide a better support service in general.

Thank you for your understanding and hope that the provided information was found helpful.

Regards,
Zornitsa
Progress Telerik