From 3006dc66256afed9e52eeb44bf28e58f01d66ee2 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Thu, 28 Nov 2024 15:47:15 +0000 Subject: [PATCH 1/2] Added new kb article map-center-on-selected-marker --- .../map-center-on-selected-marker.md | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 knowledge-base/map-center-on-selected-marker.md diff --git a/knowledge-base/map-center-on-selected-marker.md b/knowledge-base/map-center-on-selected-marker.md new file mode 100644 index 0000000000..72708d681e --- /dev/null +++ b/knowledge-base/map-center-on-selected-marker.md @@ -0,0 +1,104 @@ +--- +title: Center the Map on a Selected Marker +description: Learn how to center a Telerik Map for Blazor component on a marker selected from a list. +type: how-to +page_title: How to Center a Map on Marker in Blazor Applications +slug: map-center-on-selected-marker +tags: map, blazor, center, marker, selection, list +res_type: kb +ticketid: 1671734 +--- + +## Environment + + + + + + + + +
ProductMap for Blazor
+ +## Description + +There's a list of markers. I need to center the map on a marker when it's selected from the list. + +- How can I dynamically update the center of a map based on a marker's coordinates? + +## Solution + +To center the map on a specific marker's coordinates, use a variable to bind the `Center` parameter of the `TelerikMap` component. Update this variable whenever a selection is made from the list. Here's how you can implement this: + +1. Use a component like the `TelerikDropDownList` to display the list of markers. Handle the `OnChange` event to update the map's center. + +2. In the `OnChange` event handler, update the map's `Center` property to the coordinates of the selected marker. + +````RAZOR + + + + + + + + + + + + + +@code { + private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 }; + private int selectedValue { get; set; } + + private readonly string[] LayerSubdomains = new string[] { "a", "b", "c" }; + private const string LayerUrlTemplate = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"; + private const string LayerAttribution = "© OpenStreetMap contributors"; + + private void MyOnChangeHandler(object theUserInput) + { + int selectedId = (int)theUserInput; + MapCenter = MarkerData.First(i => i.Id == selectedId).LatLng; + } + + private List MarkerData { get; set; } = new List() { + new MarkerModel() + { + Id = 0, + LatLng = new double[] { 30.268107, -97.744821 }, + Title = "Austin, TX" + }, + new MarkerModel() + { + Id = 1, + LatLng = new double[] { 37.7749, -122.4194 }, + Title = "San Francisco, CA" + } + }; + + public class MarkerModel + { + public int Id { get; set; } + public double[]? LatLng { get; set; } + public string Title { get; set; } = string.Empty; + } +} +``` + +## See Also + +- [Map Overview](https://docs.telerik.com/blazor-ui/components/map/overview) +- [Map Markers](https://docs.telerik.com/blazor-ui/components/map/layers/marker) +- [DropDownList Overview](https://docs.telerik.com/blazor-ui/components/dropdownlist/overview) From 54498d2f4027444a3be60ef80f9870839fc1e69a Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Fri, 29 Nov 2024 15:09:01 +0200 Subject: [PATCH 2/2] kb(Map): address comments --- .../map-center-on-selected-marker.md | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/knowledge-base/map-center-on-selected-marker.md b/knowledge-base/map-center-on-selected-marker.md index 72708d681e..f221b8e85f 100644 --- a/knowledge-base/map-center-on-selected-marker.md +++ b/knowledge-base/map-center-on-selected-marker.md @@ -1,10 +1,10 @@ --- -title: Center the Map on a Selected Marker -description: Learn how to center a Telerik Map for Blazor component on a marker selected from a list. +title: Center Map on Selected Marker +description: Learn how to programmatically center a Telerik Map for Blazor component on a marker selected from a list. type: how-to page_title: How to Center a Map on Marker in Blazor Applications -slug: map-center-on-selected-marker -tags: map, blazor, center, marker, selection, list +slug: map-kb-center-on-selected-marker +tags: blazor, map, marker res_type: kb ticketid: 1671734 --- @@ -24,7 +24,7 @@ ticketid: 1671734 There's a list of markers. I need to center the map on a marker when it's selected from the list. -- How can I dynamically update the center of a map based on a marker's coordinates? +How can I dynamically update the center of a map based on a marker's coordinates? ## Solution @@ -32,18 +32,20 @@ To center the map on a specific marker's coordinates, use a variable to bind the 1. Use a component like the `TelerikDropDownList` to display the list of markers. Handle the `OnChange` event to update the map's center. -2. In the `OnChange` event handler, update the map's `Center` property to the coordinates of the selected marker. +2. In the `OnChange` event handler, update the map's `Center` property value to the coordinates of the selected marker. + +>caption Centering the Map on a Selected Marker ````RAZOR - + Zoom="@MapZoom">