Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1179
Zoom to area on GeographicMap
posted

I have a page that gets the current location from the device's location services. I want to display this in a map, zoomed into the immediate area. I've tried doing this from OnParameterSetAsync, or OnAfterRenderAsync using ZoomToGeographicAsync, but neither works. The problem seems to be that my reference to the map component is null in these calls. I added a button that calls the same code when pressed and this works fine, but I'd like it to be done automatically. Short of adding a timer event to repeatedly check until it is safe to use the reference, how can I get this to work correctly?

I'm binding the reference like follows:

						<GeographicMap @ref="@geoMap" Width="100%" Height="240px" Zoomable="true">
							<GeographicSymbolSeries DataSource="locs" MarkerType="MarkerType.Triangle" LatitudeMemberPath="Lat" LongitudeMemberPath="Lon" MarkerBrush="Red" MarkerOutline="Black" />
						</GeographicMap>

Parents
  • 34810
    Offline posted

    Hello Kevin,

    I have been investigating into your requirement to zoom to an area on the GeographicMap component in Ignite UI for Blazor, and I would recommend continuing with the OnAfterRender method, but make a check to see if the “ref” object that you are passing your GeographicMap to is not null.

    For example, our sample here is doing the following, where “MapRef” is the “ref” of the GeographicMap:

        protected override void OnAfterRender(bool firstRender)
        {
            base.OnAfterRender(firstRender);
    
            if (MapRef != null && !firstRender)
            {
                var geoRegion = new Rect(-130, 15, new Size(65, 35));
                MapRef.ZoomToGeographic(geoRegion);
            }
       }

    Please let me know if you have any other questions or concerns on this matter.

Reply Children