how to get MapView in ViewModel Using MVVM

[NadirHussain]

Dear All,

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

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" RowSpacing="0" ColumnSpacing="0" BackgroundColor="Transparent">
<esriUI:MapView x:Name="MyMapView" Map="{Binding myMap}" BackgroundColor="GreenYellow" />
</Grid>
<Grid Grid.Row="1" RowSpacing="0" ColumnSpacing="0" BackgroundColor="Transparent">
    <Button Text="Direction" BackgroundColor="Black" TextColor="White" Command="{Binding Hello}" />
</Grid>
</Grid>

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

[dotMorten_esri]

> 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}" />‍

[NadirHussain]

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.

[marceloctorres]

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.

[NadirHussain]

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.

[dotMorten_esri]

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.Univers...

by is using this common class:

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

[marceloctorres]

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.

[marceloctorres]

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

[NadirHussain]

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.

[marceloctorres]

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