Current latLngBounds

Question

I would like to inform the user about the size of the map that is displayed. For example below the map show something like "the width of the map you see is equivalent to 500 km". How can I do that? How can I get this information? In another scenario I would even like to update this information when the user zooms in or out.

Hariharasudhan Kanagaraj · Answer

Hi Heiko Tappe,Sorry for the delay. To achieve your requirement, we have found a possible solution in SfMaps to render the size of the map while zooming. However, we are currently working on creating a workaround sample to ensure the best possible solution from our end. We will provide you with further details by July 7, 2023. We appreciate your patience until then.Regards,Hari Hara Sudhan. K

Hariharasudhan Kanagaraj · Answer

Hi Heiko Tappe,We have analyzed your query and currently in SfMaps
we don’t have any support to display the size and distance of the map. However,
we have surfed through the internet for calculating the distance between the
two coordinate points and found the formula’s used on the below links as useful
to find the distance.How-to-calculate-lat-long-distance.Calculate-distance-between-two-latitude-longitude-points-haversine-formula.To calculate the distance between the two coordinates
using those formula’s, you need two coordinate points and current zooming
value. In SfMaps,
while user interactions like zooming and panning are performed, the onWillZoom
and onWillPan callback will be called. In both onWillZoom
and onWillPan
callback, we can get the coordinate points and the current zoom level value
with the help of the newVisibleBounds
and newZoomLevel
property respectively in the MapZoomDetails.Disclaimer: Here, we have analyzed and surfed
through the internet to provide the best possible solution from our end,
however we can’t be able to guarantee whether this possible solution works
fine. We recommend to you to try calculating the distance between the two
coordinate points using the above possible solution. If you have further queries, please get back to us.Regards,Hari Hara Sudhan. K

Heiko Tappe · Answer

Thanks for this proposal!I tried to implement it that way and I think it works... almost ;-)I can use onWillZoom to calculate and display all the necessary stuff. But what about the initial distance and the display of it?

Hariharasudhan Kanagaraj · Answer

Hi Heiko Tappe,To calculate the distance between the two coordinates at
load time, as already mentioned, you may need the latLngBounds
and zoomLevel
to calculate the distance. But in SfMaps,
the onWillZoom
callback will not be called on initial rendering, so the initial latLngBounds
and the initial zoomLevel
cannot be accessed at load time rendering.But through assigning the initialLatLngBounds
by yourself, we can be able to achieve the initial latLngBounds
and initial zoomLevel
at load time. If the initialLatLngBounds
is given, based on the initialLatLngBounds,
the zoomLevel
will be calculated internally, and the calculated zoomLevel
can be accessed by overriding the zoomLevel
setter in the customized MapZoomPanBehavior.If both the initialLatLngBounds
and the zoomLevel
is given, the initialLatLngBounds
will only be taken as priority and the zoomLevel
will not be considered.With the help of the initialLatLngBounds
and the zoomLevel
accessed from the zoomLevel
setter in the customized MapZoomPanBehavior,
you can able to calculate the distance between the two coordinates at load time
and to display the distance between the two coordinate points programmatically
you can use the onWillZoom
callback as already mentioned. Kindly refer the below code snippet for your reference:

class CustomZoom extends MapZoomPanBehavior {
    CustomZoom({
      super.zoomLevel,
      super.focalLatLng,
      super.latLngBounds,
      super.minZoomLevel,
      super.maxZoomLevel,
      super.enablePinching = true,
      super.enablePanning = true,
      super.enableDoubleTapZooming = false,
      super.enableMouseWheelZooming = false,
      super.showToolbar = true,
      super.toolbarSettings = const MapToolbarSettings(),
    });
   
    @override
   
  set zoomLevel(double value) {
   
    super.zoomLevel = value;
   
  }
   
    @override
    void onZooming(MapZoomDetails details) {
      super.onZooming(details);
    }
  }

If you have further queries, please get back to us.Regards,Hari Hara Sudhan. K