Zoom feature request

[avresial]

Hi

I would like to zoom in or out using an event from my blazor wasm .NET 8 application. I can not find any method that accomplishes my goal.

I tried to change parameters.zoomLevel from code. For example using a button. But it seems that it does not affect map at all. Setting RealTimeMap.LoadParameters.zoomLevel works only during initialization. Then I tried invoking InvokeAsync(StateHasChanged); after zoom value change and it does not work.

My suggestion would be to add parameter zoomlevel to following method:

public async Task movePoint(double[] coordinate, PointSymbol pointSymbol)

or make another one. Like changeZoomLevel(double zoomLevel)

Overall I find this nugget very useful! thx

[ichim]

Hello sir,

I will check, it may be a bug! Sorry!

[ichim]

Hello sir,

I checked, everything works fine. It is natural that when the RealTimeMap control is initialized, the zoom level should be modified. But I think I know what you mean! If you want the zoom level to be preserved when you call the movePoint() method, you must set changeExtentWhenMovingPoints to false

Best regards, laurentiu

[avresial]

changeExtentWhenMovingPoints does not seem to cut it for me.

To quickly show my point i added two buttons.

@using LeafletForBlazor
@inherits MapComponentBase
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-primary" @onclick=OnZoomInClick><i class="bi bi-plus-lg"></i></button>
    <button type="button" class="btn btn-outline-primary" @onclick=OnZoomOutClick><i class="bi bi-dash-lg"></i></button>
</div>
<RealTimeMap height="400px" width="100%" @ref=realTimeMap Parameters="parameters"></RealTimeMap>

part of MapComponentBase class:

 public class MapComponentBase : ComponentBase, IDisposable
 {
 public RealTimeMap? realTimeMap;
 public RealTimeMap.LoadParameters parameters = new RealTimeMap.LoadParameters()
 { 
    basemap = new RealTimeMap.Basemap()
    {
        basemapLayers = new List<RealTimeMap.BasemapLayer>()
        {
            new RealTimeMap.BasemapLayer()
            {
                url = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                attribution = "©Open street map",
                title = "Open Street Map",
                detectRetina = true
            },
            new RealTimeMap.BasemapLayer()
            {

                url = "http://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png",
                attribution = "©Open railway map",
                title = "Open railway map",
                detectRetina = true,

            }
        }

    },
    zoomLevel = 18,
 };
 RealTimeMap.PointSymbol symbol = new RealTimeMap.PointSymbol()
 {
    color = "red",
    fillColor = "red",
    radius = 5,
    weight = 3,
    opacity = 1,
    fillOpacity = 1
 };

.
.
.

  public async Task OnZoomInClick(MouseEventArgs args)
   {
       parameters.zoomLevel += 1;
   }

   public async Task OnZoomOutClick(MouseEventArgs args)
   {
       parameters.zoomLevel -= 1;
   }

public async Task UpdateLocation(GeoLocationDto location)
{
        await realTimeMap.movePoint([location.Latitude, location.Longitude], symbol);

}
}

I would like to zoom in or out using my custom +/- buttons. Is it possible?

[ichim]

Hello sir, This is not possible! In the next version I will add a setZoomLevel method.

LoadParameters is a object (class) for RealTimeMap initialization...

[avresial]

Ok, Thanks for help. I'm looking forward for new release than! :D

[ichim]

Hello sir,

Version 2.0.8.8 is available. In this version you will find properties that allow setting the zoom level (setZoomLevel) (#45 issue)

https://www.nuget.org/packages/LeafletForBlazor/2.0.8.8