topic how to get MapView in ViewModel Using MVVM in .NET Maps SDK Questions

how to get MapView in ViewModel Using MVVM

NadirHussain — Wed, 31 May 2017 11:07:03 GMT

Dear All,

i am using mvvm technique.my model class is given below.

On my button click i want to ACCESS MyMapView in my model in modelview class.I cant under stand how i get the reference of this MyMapView on event in modelview.because on click event i want to add some graphics on my map.

please help.Thanks in advance.

please help.

Thanks in advance

Re: how to get MapView in ViewModel Using MVVM

dotMorten_esri — Wed, 31 May 2017 17:48:08 GMT

> On my button click i want to ACCESSÂ MyMapView in my model in modelview class.I

You should never access views in your models and view models. That's breaking with the MVVM pattern.

Your view model should instead expose a Map and a set of GraphicsOverlays, that you then bind to your MapView.

You can then add layers to your map and graphics to your graphics overlays, and the mapview will automatically get them.

<esri:MapView Map="{Binding Map}"  GraphicsOverlays="{Binding GraphicsOverlays}" />‍

Re: how to get MapView in ViewModel Using MVVM

marceloctorres — Sat, 11 Dec 2021 20:01:16 GMT

To implement the MVVM pattern correctly you must consider using a series of objects and interfaces so that the View (XAML code) and the class that acts as ViewModel can communicate effectively. My recommendation is to use a framework that facilitates the writing of the code. You can use Prism.Wpf from Brian Lagunas which is added to the project as a Nuget package.

Here is the code for Vista:

<Window x:Class="GeonetPost.WPF.Views.MapWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <esri:MapView Map="{Binding MyMap}"      
                  GraphicsOverlays="{Binding GraphicsOverlays}">
    </esri:MapView>
    <Button Grid.Row="1"
            Margin="5"
            Width="100"
            Content="Click Me!"
            Background="Black"
            Foreground="White"
            Command="{Binding ButtonClickCommand}" />
  </Grid>
</Window>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You have to bind GraphicsOverlays property of the MapView to a property on your ViewModel Class. Here is the ViewModel Class;

using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Symbology;
using Esri.ArcGISRuntime.UI;
using Prism.Commands;
using Prism.Mvvm;
using System.Windows.Input;
using System.Windows.Media;

namespace GeonetPost.WPF.ViewModels
{
  public class MapWindowViewModel : BindableBase
  {
    private Map _myMap;
    private GraphicsOverlayCollection _grapchicsOverlays;

    /// <summary>
    /// 
    /// </summary>
    public Map MyMap
    {
      get { return _myMap; }
      set { SetProperty(ref _myMap, value); }
    }

    /// <summary>
    /// 
    /// </summary>
    public GraphicsOverlayCollection GraphicsOverlays
    {
      get { return _grapchicsOverlays; } 
      set { SetProperty(ref _grapchicsOverlays, value); }
    }

    /// <summary>
    /// 
    /// </summary>
    public ICommand ButtonClickCommand { get; private set; }

    public MapWindowViewModel()
    {
      MyMap = new Map(Basemap.CreateStreets());
      GraphicsOverlays = new GraphicsOverlayCollection();
      ButtonClickCommand = new DelegateCommand(ButtonClickAction);

      GraphicsOverlay go = new GraphicsOverlay()
      {
        Id = "MyGraphicOverlay"
      };
      GraphicsOverlays.Add(go);
    }

    /// <summary>
    /// 
    /// </summary>
    private void ButtonClickAction()
    {
      var g = new Graphic()
      {
        Geometry = new MapPoint(-74, 4, SpatialReferences.Wgs84),
        Symbol = new SimpleMarkerSymbol() {  Color=Colors.Green, Style= SimpleMarkerSymbolStyle.Circle, Size=10 }
      };
      GraphicsOverlays[0].Graphics.Add(g);

    }
  }
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Another thing you have to keep in mind is the handling of events generated by the MapView such as GeoViewTapped or DrawStatusChanged that must be handled with EventTriggers or Behaviors to comply with the MVVM pattern.

Marcelo.

Re: how to get MapView in ViewModel Using MVVM

NadirHussain — Thu, 01 Jun 2017 07:55:07 GMT

Dear Neilsen,

i understand this property GraphicsOverlays.But if i have to call this method .SetViewpointGeometryAsync of mapview object.how i call this in my VeiwModel.

Please help.Thanks in advance.

Re: how to get MapView in ViewModel Using MVVM

NadirHussain — Thu, 01 Jun 2017 07:56:00 GMT

Dear Marcelo,

i understand this property GraphicsOverlays.But if i have to call this method .SetViewpointGeometryAsync of mapview object.how i call this in my VeiwModel.

Please help.Thanks in advance.

Re: how to get MapView in ViewModel Using MVVM

AnttiKajanus1 — Thu, 01 Jun 2017 08:18:19 GMT

You can follow the same approach described in https://community.esri.com/message/520348

Re: how to get MapView in ViewModel Using MVVM

NadirHussain — Thu, 01 Jun 2017 08:34:58 GMT

Dear Antti Kajanus

i read this.I need the sample example.so i fallow that.i try for GITHUB but link is not working.Please provide some samle example.

Thanks

Re: how to get MapView in ViewModel Using MVVM

dotMorten_esri — Thu, 01 Jun 2017 15:51:01 GMT

Typically your ViewModel will raise an event. For instance add

public event EventHandler<Viewpoint> RequestViewpoint;

You then just raise the event. If a listener is active, it'll act appropriately on it. For instance in your code-behind you can write view-specific code like:

myViewModel.RequestViewpoint += (sender,viewpoint) => mapView.SetViewpointAsync(viewpoint);

(just make sure you unhook from that event when navigating away from the page, or there's' a good chance you'll leak a lot of memory each time you leave the map page).

If you absolutely want no code-behind (although most people agree view-specific code like this is ok in MVVM), you can use attached properties to accomplish the same thing. This is a little more complicated subject if you're new to XAML, but it's used here: https://github.com/Esri/arcgis-runtime-demos-dotnet/blob/master/src/TurnByTurn/RoutingSample.Universal/MainPage.xaml#L52

by is using this common class:

https://github.com/Esri/arcgis-runtime-demos-dotnet/blob/master/src/TurnByTurn/RoutingSample.Shared/CommandBinder.cs

Re: how to get MapView in ViewModel Using MVVM

marceloctorres — Sat, 11 Dec 2021 20:01:19 GMT

My approach is a little different I use a behavior like this:

using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.UI.Controls;
using System.Diagnostics;
using System.Windows;
using System.Windows.Interactivity;

namespace GeonetPost.WPF.Behaviors
{
  public class SetMapViewViewportBehavior : Behavior<MapView>
  {
    /// <summary>
    /// 
    /// </summary>
    public static readonly DependencyProperty ViewpointProperty =
      DependencyProperty.Register(nameof(Viewpoint), typeof(Viewpoint), typeof(SetMapViewViewportBehavior));

    /// <summary>
    /// 
    /// </summary>
    public Viewpoint Viewpoint
    {
      get { return (Viewpoint)GetValue(ViewpointProperty); }
      set { SetValue(ViewpointProperty, value); }
    }

    public SetMapViewViewportBehavior()
    {
      Debug.WriteLine("Hola");
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="e"></param>
    protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
    {
      base.OnPropertyChanged(e);
      if(e.Property.Name == nameof(Viewpoint))
      {
        SetViewpoint(this.Viewpoint);
      }
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="vp"></param>
    private async void SetViewpoint(Viewpoint vp)
    {
      if (vp != null)
      {
        var actualVp = this.AssociatedObject.GetCurrentViewpoint(ViewpointType.BoundingGeometry);
        if (actualVp == null || (actualVp != null && !actualVp.Equals(vp)))
        {
          Debug.WriteLine("SetViewpoint");
          await this.AssociatedObject.SetViewpointAsync(vp);
        }
      }
    }

  }
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then I add to ViewModel class: 1) a property

    private Viewpoint _viewpoint;

    /// <summary>
    /// 
    /// </summary>
    public Viewpoint Viewpoint
    {
      get { return _viewpoint; }
      set { SetProperty(ref _viewpoint, value); }
    }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

2) A command:

    /// <summary>
    /// 
    /// </summary>
    public ICommand ButtonClickCommand { get; private set; }

    /// <summary>
    /// 
    /// </summary>
    public ICommand ZoomCommand { get; private set; }

    public MapWindowViewModel()
    {
      MyMap = new Map(Basemap.CreateStreets());
      GraphicsOverlays = new GraphicsOverlayCollection();
      ButtonClickCommand = new DelegateCommand(ButtonClickAction);
      ZoomCommand = new DelegateCommand(ZoomAction);

      GraphicsOverlay go = new GraphicsOverlay()
      {
        Id = "MyGraphicOverlay"
      };
      GraphicsOverlays.Add(go);
    }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

3) And an action:

    /// <summary>
    /// 
    /// </summary>
    private void ZoomAction()
    {
      Viewpoint = new Viewpoint(4, -74, 5000000);
    }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Finally, we modify the View to looks like this:

<Window x:Class="GeonetPost.WPF.Views.MapWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:bh="clr-namespace:GeonetPost.WPF.Behaviors"
        xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <esri:MapView Map="{Binding MyMap}"
                  GraphicsOverlays="{Binding GraphicsOverlays}">
      <ei:Interaction.Behaviors>
        <bh:SetMapViewViewportBehavior Viewpoint="{Binding Viewpoint}" />
      </ei:Interaction.Behaviors>
    </esri:MapView>
    <StackPanel Grid.Row="1"
                Orientation="Horizontal">
      <Button Margin="5"
              Width="100"
              Content="Click Me!"
              Background="Black"
              Foreground="White"
              Command="{Binding ButtonClickCommand}" />
      <Button Margin="5"
              Width="100"
              Content="Zoom to point!"
              Background="Black"
              Foreground="White"
              Command="{Binding ZoomCommand}" />
    </StackPanel>
  </Grid>
</Window>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You can find the complete code in this github site: https://github.com/marceloctorres/GeonetPost.WPF.

Re: how to get MapView in ViewModel Using MVVM

marceloctorres — Thu, 01 Jun 2017 20:01:57 GMT

I just add a MapViewViewpointChangedBehavior to handle ViewpointChanged event of the MapView and a Converter to show Envelope coordinates of the Viewpoint in DMS format.... please check here https://github.com/marceloctorres/GeonetPost.WPF

Re: how to get MapView in ViewModel Using MVVM

NadirHussain — Wed, 07 Jun 2017 10:58:49 GMT

Dear Marcelo Cesar Torres,

Your code is in WPF.I ma using Xamarin forms.i am facing problem converting form WPF to xamarin form.

Can you help.

Thanks in advance.

Re: how to get MapView in ViewModel Using MVVM

marceloctorres — Fri, 09 Jun 2017 18:31:57 GMT

I'm working on translate the sample to Xamarin.Forms...

Re: how to get MapView in ViewModel Using MVVM

NadirHussain — Sun, 11 Jun 2017 17:54:45 GMT

Dear Marcelo,

Actually i want to calculate the distance from start to end point.and draw route.When draw route it should zoom to that route.i cant zoom to that path.

Thanks in advance.I am waiting for the sample code.

Re: how to get MapView in ViewModel Using MVVM

NagmaYasmin — Mon, 12 Jun 2017 15:36:58 GMT

Hi Nadir,

I assumed you already created the route and would like to zoom to the extent of that route. Below is the code that zooms to that extent:

await MyMapView.SetViewpointAsync(new Viewpoint(route.Extent));

Hope that helps.

Nagma

Re: how to get MapView in ViewModel Using MVVM

marceloctorres — Sat, 11 Dec 2021 20:01:23 GMT

I'm back. Here I'll explain the solution that I made to WPF now to Xamarin.Forms. First, no implement MVVM pattern easly I used nuget package Prism.Forms from Brian Lagunas. I made the ViewModel class in C# and the View code using XAML in a similar way that in the WPF Project:

This is the ViewModel code:

using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Symbology;
using Esri.ArcGISRuntime.UI;
using Prism.Commands;
using Prism.Mvvm;
using System.Windows.Input;

#if WINDOWS_UWP
using Colors = Windows.UI.Colors;
#else
using Colors = System.Drawing.Color;
#endif


namespace GeonetPost.Xamarin.ViewModels
{
  public class MapPageViewModel : BindableBase
  {
    private Map _myMap;

    /// <summary>
    /// 
    /// </summary>
    public Map MyMap
    {
      get { return _myMap; }
      set { SetProperty(ref _myMap, value); }
    }

    private GraphicsOverlayCollection _grapchicsOverlays;

    /// <summary>
    /// 
    /// </summary>
    public GraphicsOverlayCollection GraphicsOverlays
    {
      get { return _grapchicsOverlays; }
      set { SetProperty(ref _grapchicsOverlays, value); }
    }

    private Viewpoint _viewpoint;

    /// <summary>
    /// 
    /// </summary>
    public Viewpoint Viewpoint
    {
      get { return _viewpoint; }
      set { SetProperty(ref _viewpoint, value); }
    }

    private Viewpoint _updatedViewpoint;

    /// <summary>
    /// 
    /// </summary>
    public Viewpoint UpdatedViewpoint
    {
      get { return _updatedViewpoint; }
      set { SetProperty(ref _updatedViewpoint, value); }
    }

    /// <summary>
    /// 
    /// </summary>
    public ICommand ButtonClickCommand { get; private set; }

    /// <summary>
    /// 
    /// </summary>
    public ICommand ZoomCommand { get; private set; }

    /// <summary>
    /// 
    /// </summary>
    public ICommand UpdateViewpointCommand { get; private set; }


    /// <summary>
    /// 
    /// </summary>
    public MapPageViewModel()
    {
      MyMap = new Map(Basemap.CreateStreets());
      GraphicsOverlays = new GraphicsOverlayCollection();
      ButtonClickCommand = new DelegateCommand(ButtonClickAction);
      ZoomCommand = new DelegateCommand(ZoomAction);
      UpdateViewpointCommand = new DelegateCommand<Viewpoint>(UpdateViewpointAction);


      GraphicsOverlay go = new GraphicsOverlay()
      {
        Id = "MyGraphicOverlay"
      };
      GraphicsOverlays.Add(go);
    }

    /// <summary>
    /// 
    /// </summary>
    private void ButtonClickAction()
    {
      var g = new Graphic()
      {
        Geometry = new MapPoint(-74, 4, SpatialReferences.Wgs84),
        Symbol = new SimpleMarkerSymbol() { Color = Colors.Green, Style = SimpleMarkerSymbolStyle.Circle, Size = 10 }
      };
      GraphicsOverlays[0].Graphics.Clear();
      GraphicsOverlays[0].Graphics.Add(g);
    }

    /// <summary>
    /// 
    /// </summary>
    private void ZoomAction()
    {
      Viewpoint = new Viewpoint(4, -74, 5000000);
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="vp"></param>
    private void UpdateViewpointAction(Viewpoint vp)
    {
      var projectedVp = new Viewpoint(GeometryEngine.Project(vp.TargetGeometry, SpatialReferences.Wgs84), vp.Camera);
      if (UpdatedViewpoint == null || projectedVp.ToJson() != UpdatedViewpoint.ToJson())
      {
        UpdatedViewpoint = projectedVp;
      }
    }


  }
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is the View code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:bh="clr-namespace:GeonetPost.Xamarin.Behaviors"
             xmlns:cv="clr-namespace:GeonetPost.Xamarin.Converters"
             xmlns:esri="clr-namespace:Esri.ArcGISRuntime.Xamarin.Forms;assembly=Esri.ArcGISRuntime.Xamarin.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="GeonetPost.Xamarin.Views.MapPage">
  <ContentPage.Resources>
    <ResourceDictionary>
      <cv:GeographicCoordinateConverter x:Key="GeoCoorConverter" />
    </ResourceDictionary>
  </ContentPage.Resources>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <esri:MapView Map="{Binding MyMap}"
                  GraphicsOverlays="{Binding GraphicsOverlays}">
      <esri:MapView.Behaviors>
        <bh:SetMapViewViewportBehavior Viewpoint="{Binding Viewpoint}" />
        <bh:MapViewViewpointChangedBehavior Command="{Binding UpdateViewpointCommand}" />
      </esri:MapView.Behaviors>
    </esri:MapView>
    <Grid Margin="10"
          HorizontalOptions="Start"
          VerticalOptions="Start"
          BackgroundColor="Beige">
      <StackLayout Orientation="Vertical"
                   Margin="10"
                   HeightRequest="100">
        <Label Text="{Binding UpdatedViewpoint.TargetGeometry.XMin, Converter={StaticResource GeoCoorConverter}, ConverterParameter='X', StringFormat='XMin = {0}'}" />
        <Label Text="{Binding UpdatedViewpoint.TargetGeometry.YMin, Converter={StaticResource GeoCoorConverter}, ConverterParameter='Y', StringFormat='YMin = {0}'}" />
        <Label Text="{Binding UpdatedViewpoint.TargetGeometry.XMax, Converter={StaticResource GeoCoorConverter}, ConverterParameter='X', StringFormat='XMax = {0}'}" />
        <Label Text="{Binding UpdatedViewpoint.TargetGeometry.YMax, Converter={StaticResource GeoCoorConverter}, ConverterParameter='Y', StringFormat='YMax = {0}'}" />
      </StackLayout>
    </Grid>
    <StackLayout Grid.Row="1"
                 Orientation="Horizontal">
      <Button Margin="5"
              Text="Click me!"
              WidthRequest="150"
              BackgroundColor="Black"
              TextColor="White"
              Command="{Binding ButtonClickCommand}" />
      <Button Margin="5"
              Text="Zoom to Point"
              WidthRequest="150"
              BackgroundColor="Black"
              TextColor="White"
              Command="{Binding ZoomCommand}" />
    </StackLayout>
  </Grid>
</ContentPage>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And this is the code of the SetMapViewViewportBehavior:

using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Xamarin.Forms;
using System.Diagnostics;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace GeonetPost.Xamarin.Behaviors
{
  public class SetMapViewViewportBehavior : BehaviorBase<MapView>
  {
    /// <summary>
    /// 
    /// </summary>
    public static readonly BindableProperty ViewpointProperty =
      BindableProperty.Create(nameof(Viewpoint), typeof(Viewpoint), typeof(SetMapViewViewportBehavior));

    /// <summary>
    /// 
    /// </summary>
    public Viewpoint Viewpoint
    {
      get { return (Viewpoint)GetValue(ViewpointProperty); }
      set { SetValue(ViewpointProperty, value); }
    }

    /// <summary>
    /// 
    /// </summary>
    public SetMapViewViewportBehavior()
    {
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="propertyName"></param>
    protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
      base.OnPropertyChanged(propertyName);
      if (propertyName == nameof(this.Viewpoint))
      {
        SetViewpoint(this.Viewpoint);
      }
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="vp"></param>
    private async void SetViewpoint(Viewpoint vp)
    {
      if (vp != null)
      {
        var actualVp = this.AssociatedObject.GetCurrentViewpoint(ViewpointType.BoundingGeometry);
        if (actualVp == null || (actualVp != null && !actualVp.Equals(vp)))
        {
          Debug.WriteLine("SetViewpoint");
          await this.AssociatedObject.SetViewpointAsync(vp);
        }
      }
    }
  }
}


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note that I had to wrote a BehaviorBase class to implement a Behavior code that in WPF already exits. Now this that the Xamarin.Forms looks like in Windows and Android:

To see the complete solution go to this github repo https://github.com/marceloctorres/GeonetPost.Xamarin

Finally, no make a zoom to your trace route, only set the Viewport property in the MapPageViewModel class with a new Viewport using your polyline extent geometry. For example:

 ViewPoint = new Viewpoint(route.Extent);‍‍

And the SetMapViewViewportBehavior does the rest.

Marcelo

Re: how to get MapView in ViewModel Using MVVM

NadirHussain — Sun, 16 Jul 2017 16:33:35 GMT

Dear Marcelo,

I implement the code like you suggest.Its working great.I am facing other issue.I want to implement the mapview GeoViewTapped event.how to apply this in MVVM.

waiting for reply.

Thanks for your kind cooperation.

Re: how to get MapView in ViewModel Using MVVM

NadirHussain — Mon, 17 Jul 2017 08:37:54 GMT

Dear Marcelo,

I implement the code below for GeoViewTapped event.Behaviour class for tabbed event.

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Input;
using Esri.ArcGISRuntime.Xamarin.Forms;
using Xamarin.Forms;
using System.Diagnostics;
using Esri.ArcGISRuntime.Geometry;

namespace MasterDetail.Behaviors
{
class ClsCustomBehviour : BehaviorBase<MapView>
{
public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(ClsCustomBehviour));

public ICommand Command
{
get { return (ICommand)GetValue(CommandProperty); }
set
{
SetValue(CommandProperty, value);
}
}

protected override void OnAttachedTo(MapView bindable)
{
base.OnAttachedTo(bindable);
bindable.GeoViewTapped += this.TabbedPointAction;

}

/// <summary>
///
/// </summary>
/// <param name="bindable"></param>
protected override void OnDetachingFrom(MapView bindable)
{
base.OnDetachingFrom(bindable);
bindable.GeoViewTapped -= this.TabbedPointAction;
}

private void TabbedPointAction(object sender, Esri.ArcGISRuntime.Xamarin.Forms.GeoViewInputEventArgs e)
{
if (this.Command != null)
{
var mapClickPoint = e.Location;
if (this.Command.CanExecute(mapClickPoint))
{
this.Command.Execute(mapClickPoint);
}
}
}

}
}

////View XAML////

<esriUI:MapView Map="{Binding MyMap}"
GraphicsOverlays="{Binding GraphicsOverlays}">
<esriUI:MapView.Behaviors>
<bh:SetMapViewViewportBehavior Viewpoint="{Binding Viewpoint}" />
<bh:MapViewViewpointChangedBehavior Command="{Binding UpdateViewpointCommand}" />
<bh:ClsCustomBehviour Command="{Binding TabbedClickCommand}" />
</esriUI:MapView.Behaviors>

</esriUI:MapView>

above is my view.

///View MODEL CLASS

// TabbedClickCommand = new DelegateCommand<MapPoint>(tabbedPoint);
TabbedClickCommand = new DelegateCommand(tabbedPoint);

private void tabbedPoint()
{
Debug.WriteLine("Hello");
throw new NotImplementedException();
}

when i click on the map the code run it comes into tabbedpoint event.and print hello.But when i execute like

TabbedClickCommand = new DelegateCommand<MapPoint>(tabbedPoint);

private void tabbedPoint(MapPoint obj)
{
throw new NotImplementedException();
}

my code not execute.i could not find the way how to execute the below function.Because i need clicked location point for further process.Please help me.how to solve.

Thanks again.

Waiting........................