Map focus malfunction.
Hello, I'm using the map tool but I'm having problems clicking on the marker.
I set the centerposition like this..
<MapsCenterPosition Latitude="FocusLatitude" Longitude="FocusLongitude"></MapsCenterPosition>
Setting my starting position.
After which I change it with events that I trigger outside the map component (I have a list where all the markers are located and based on the click I put the focus on the clicked marker).
So far everything works well, but if I move the pointer within the map the mechanism stops working.
For subsequent events where I change "FocusLatitude" and "FocusLongitude" the map stops focusing on the markers.
Hi Matteo,
We are unable to completely understand the issue from the provided scenario. We attempted to recreate the reported behavior and observed the following: Initially, we set the center position to the map, and when clicking on the markers, the center position was updated to the clicked marker using the “OnMarkerClick” event and the “MapsCenterPosition” tag, which worked as expected. However, after panning the map, the center position changes, and when we try to update the center position again by clicking on the markers, it does not update.
Could you please confirm if this is the exact scenario you are experiencing in your application?
We have shared a sample and video demonstrating this in the below link.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Maps-2147155410
Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/maps-519810184
Please
check and confirm if your scenario matches the sample and video provided above.
If it does not, please share your exact scenario or modify the sample to
replicate the reported issue. Additionally, provide the steps to reproduce the
issue. This information will help us analyze the problem more effectively and
assist you further.
I state that I am working with blazor web app (net 8) interactive mode auto.
sending the code where I replicate the problem.
Explanation:
Selecting an element from the list (as the first iteration with the page) the behavior is correct, that is, the detail updates and the focus of the map changes.
The problem comes out if I move the cursor inside the map, after clicking inside the map and trying to click an element of the list, the map is no longer able to focus on the selected marker.
------------------------------------------------------------------------------------------------------------------------------
@using Syncfusion.Blazor.Maps
@using System.Collections.ObjectModel;
<SfMaps @ref="map" Height="500px" Width="100%">
<MapsZoomSettings Enable="true" ZoomFactor="6" ZoomOnClick="true" DoubleClickZoom="true" MaxZoom="40"></MapsZoomSettings>
<MapsCenterPosition Latitude="FocusLatitude" Longitude="FocusLongitude"></MapsCenterPosition>
<MapsEvents OnMarkerClick="@OnClickEvent"></MapsEvents>
<MapsLayers>
<MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="City" ShapePropertyPath='new string[] { "name" }' ShapeDataPath="Name">
<MapsMarkerSettings>
<MapsMarker Visible="true" DataSource="MarkerDataSource" TValue="City" Height="25" Width="25" ColorValuePath="MarkerColor">
<ChildContent>
<MapsMarkerTooltipSettings Visible="true">
<TooltipTemplate>
@{
var Data = context as City;
<div>
<div class="toolback">
<div class="listing2">
<center>
@Data.Name
</center>
</div>
</div>
</div>
}
</TooltipTemplate>
</MapsMarkerTooltipSettings>
</ChildContent>
</MapsMarker>
</MapsMarkerSettings>
<MapsMarkerClusterSettings AllowClustering="true" Shape="MarkerType.Circle" Fill="#008CFF" Height="25" Width="25">
<MapsLayerMarkerClusterLabelStyle Color="white"></MapsLayerMarkerClusterLabelStyle>
</MapsMarkerClusterSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
<div class="row">
<div class="col-6">
List
<table>
<tr>
<th>Name</th>
<th>Longitude</th>
<th>Latitude</th>
</tr>
@foreach (var item in MarkerDataSource)
{
<tr>
<td>@item.Name</td>
<td>@item.Longitude</td>
<td>@item.Latitude</td>
<td>
<button @onclick="x => OnSelected(item)">Selecte Item</button>
</td>
</tr>
}
</table>
</div>
<div class="col-6">
Selected item detail
@if (SelectedItem is not null)
{
<br />
@SelectedItem.Name
<br />
@SelectedItem.Latitude
<br />
@SelectedItem.Longitude
}
</div>
</div>
@code {
protected SfMaps map;
public double FocusLatitude = 35.145083;
public double FocusLongitude = -117.960260;
public City? SelectedItem { get; set; }
public class City
{
public string Name { get; set; }
public double Latitude { get; set; }
public double Longitude { get; set; }
};
public ObservableCollection<City> MarkerDataSource = new ObservableCollection<City> {
new City {Latitude=35.145083,Longitude=-117.960260, Name = "Test 1"},
new City { Latitude=40.724546, Longitude=-73.850344, Name = "Test 2" },
new City {Latitude= 41.657782, Longitude=-91.533857, Name = "Test 3"}
};
protected void OnSelected(City city)
{
SelectedItem = city;
FocusLatitude = city.Latitude;
FocusLongitude = city.Longitude;
map.Refresh();
}
protected void OnClickEvent(MarkerClickEventArgs args)
{
SelectedItem = new City()
{
Name = args.Data.FirstOrDefault(x => x.Key == nameof(City.Name)).Value,
Latitude = Convert.ToDouble(args.Data.FirstOrDefault(x => x.Key == nameof(City.Latitude)).Value),
Longitude = Convert.ToDouble(args.Data.FirstOrDefault(x => x.Key == nameof(City.Longitude)).Value)
};
}
}
-------------------------------------------------------------------------------------------------
By pasting this code into your project I think you can reproduce the problem.
Hi Matteo,
We were able to reproduce the reported issue - "When changing the center position dynamically, the Maps fails to update the location properly after zooming and panning" from the provided code snippet. However, we have considered this as a bug and logged a defect report for the same. The fix for the issue will include in our weekly patch release, which is expected to be available on August 20, 2024. Meanwhile, please find the feedback link below to keep track of the reported issue.
Hi Matteo,
We have resolved the reported issue - "When changing the center position dynamically, the Maps fails to update the location properly after zooming" and the fix is included in the weekly patch release(26.2.10). Please update the “Syncfusion.Blazor.Maps” package to the latest version and refer the latest version of “syncfusion-blazor.min.js” script in your application to resolve the reported issue. Please find the package and script from the below links.
Package: https://www.nuget.org/packages/Syncfusion.Blazor.Maps
Script: https://cdn.syncfusion.com/blazor/26.2.10/syncfusion-blazor.min.js
Root Cause:
When dynamically changing the center position, the internally managed variables for storing map transform values were not being reset. As a result, the previous transform values were used when updating the center position. We have now reset the transform values, so the center position updates as expected.
Please
let us know if you need any further assistance.
- 5 Replies
- 2 Participants
-
MA Matteo
- Jul 25, 2024 01:54 PM UTC
- Aug 20, 2024 05:16 PM UTC
