Implementing MVVM with ArcGIS Runtime local server

Question

I am trying to setup a ESRI Local Server for displaying .mpk. I have a Model like

public class Model
{
    private string basemapLayerUri = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
    private string mapPackage = "D:\\App\\Data\\Canada.mpk";
    public Model() { }

    public string BasemapLayerUri
    {
        get { return this.basemapLayerUri; }
        set
        {
            if (value != this.basemapLayerUri)
            {
                this.basemapLayerUri = value;
            }
        }
    }

    public string MapPackage
    {
        get { return this.mapPackage; }
        set
        {
            if (value != this.mapPackage)
            {
                this.mapPackage = value;
            }
        }
    }
}

in ViewModel.cs Class I have

public class ViewModel : INotifyPropertyChanged
{
    public Model myModel { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;

    public ViewModel()
    {
        myModel = new Model();
        this.CreateLocalServiceAndDynamicLayer();
    }

    public string BasemapUri
    {
        get { return myModel.BasemapLayerUri; }
        set
        {
            this.myModel.BasemapLayerUri = value;
            OnPropertyChanged("BasemapUri");
        }
    }

    public async void CreateLocalServiceAndDynamicLayer()
    {
        LocalMapService localMapService = new LocalMapService(this.MAPKMap);
        await localMapService.StartAsync();

        ArcGISDynamicMapServiceLayer arcGISDynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer()
        {
            ID = "mpklayer",
            ServiceUri = localMapService.UrlMapService,
        };

        //myModel.Map.Layers.Add(arcGISDynamicMapServiceLayer);
    }

    public string MAPKMap
    {
        get { return myModel.MapPackage; }
        set
        {
            this.myModel.MapPackage = value;
            OnPropertyChanged("MAPKMap");
        }
    }

    protected void OnPropertyChanged([CallerMemberName] string member = "")
    {
        var eventHandler = PropertyChanged;
        if (eventHandler != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(member));
        }
    }
}

As you can see I am trying to implement the local server and dynamic layer in ViewModel.cs like

public async void CreateLocalServiceAndDynamicLayer()
{
    LocalMapService localMapService = new LocalMapService(this.MAPKMap);
    await localMapService.StartAsync();

    ArcGISDynamicMapServiceLayer arcGISDynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer()
    {
        ID = "mpklayer",
        ServiceUri = localMapService.UrlMapService,
    };

    //myModel.Map.Layers.Add(arcGISDynamicMapServiceLayer);
}

but I do not know how to bind this service to the Model ? I tried

myModel.Map.Layers.Add(arcGISDynamicMapServiceLayer);

but as you know the myModel doesn't have any Map object.

Update

using M_PK2.Models;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using Esri.ArcGISRuntime.LocalServices;
using Esri.ArcGISRuntime.Controls;
using Esri.ArcGISRuntime.Layers;

namespace M_PK2.ViewModels
{
    class ViewModel : ViewModelBase
    {
        private readonly LocalMapService localMapService;
        private readonly Model myModel;
        private LayerCollection layers;

        public ViewModel()
        {
            myModel = new Model();
            layers = new LayerCollection();
            localMapService = new LocalMapService(myModel.MapPackage);
            starting += onStarting;
            starting(this, EventArgs.Empty);
        }

        private event EventHandler starting = delegate { };
        private async void onStarting(object sender, EventArgs args)
        {
            starting -= onStarting; //optional

            // the following runs on background thread
            await localMapService.StartAsync();

            // returned to the UI thread

            var serviceLayer = new ArcGISDynamicMapServiceLayer()
            {
                ID = "mpklayer",
                ServiceUri = localMapService.UrlMapService,
            };

            Layers.Add(serviceLayer);
            OnPropertyChanged(nameof(Layers)); //Notify UI
        }


        public LayerCollection Layers
        {
            get
            {
                return layers;
            }
        }
    }
    public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged = delegate { };

        protected void OnPropertyChanged([CallerMemberName] string member = "")
        {
            PropertyChanged(this, new PropertyChangedEventArgs(member));
        }
    }
}

Looking at the [code example](https://developers.arcgis.com/net/10-2/store/api-reference/html/c864d5f8-94a4-4892-a8d8-4973008d5de6.htm) and the [docs](https://developers.arcgis.com/net/10-2/store/api-reference/html/T_Esri_ArcGISRuntime_Layers_ArcGISDynamicMapServiceLayer.htm) tells us `ArcGISDynamicMapServiceLayer` is a UI component and belongs in the view. Only `ID` and `ServiceUri` should be provided by the viewmodel. — Funk, Dec 05 '18 at 20:07
Thanks Funk but this is more about loading the `ArcGISDynamicMapServiceLayer` not the service layer by itself! the problem is where to populate this dervice in Model or viewmodel without breaking the MVVM roles — Mona Coder, Dec 05 '18 at 21:09

Nkosi · Accepted Answer · 2018-12-08T00:21:43.133

Avoid using async void except for event handlers,

Reference Async/Await - Best Practices in Asynchronous Programming

In your case you are mixing UI concerns that belong in view. The view model should expose what the view needs in order to perform its function.

Because of the async nature of the used dependency LocalMapService, you should create an async event handler to manage getting the service URI and notify the UI when that task is completed via a bound property change event.

For example

public class ViewModel : ViewModelBase {
    private readonly LocalMapService localMapService;
    private readonly Model myModel;
    private string serviceUri;

    public ViewModel() {
        myModel = new Model();
        localMapService = new LocalMapService(myModel.MapPackage);
        starting += onStarting;
        starting(this, EventArgs.Empty);
    }

    private event EventHandler starting = delegate { };
    private async void onStarting(object sender, EventArgs args) {
        starting -= onStarting; //optional

        // the following runs on background thread
        await localMapService.StartAsync(); 

        // returned to the UI thread
        ServiceUri = localMapService.UrlMapService; //notifies UI
    }

    public string ServiceUri {
        get { return serviceUri; }
        set {
            serviceUri = value;
            OnPropertyChanged();
        }
    }
}

public class ViewModelBase : INotifyPropertyChanged {
    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    protected void OnPropertyChanged([CallerMemberName] string member = "") {
        PropertyChanged(this, new PropertyChangedEventArgs(member));
    }
}

That way after the async starting of the service, the UI will get notified of the change.

<!-- Add a MapView Control. -->
<esriControls:MapView x:Name="MapView1">

    <!-- Add a Map. -->
    <esriControls:Map>

        <!-- Add an ArcGISDynamicMapServiceLayer via XAML. -->
        <esriLayers:ArcGISDynamicMapServiceLayer ID="mpklayer" 
          ServiceUri="{Bind ServiceUri}"/>
    </esriControls:Map>
</esriControls:MapView>

If the goal is to be able to manipulate multiple layers then I would suggest binding to the Map.Layers Property to be able to have direct access to the layers collection in the view model.

The view model could end up looking like

public class ViewModel : ViewModelBase {
    private readonly LocalMapService localMapService;
    private readonly Model myModel;
    private LayerCollection layers;

    public ViewModel() {
        myModel = new Model();
        layers = new LayerCollection();
        localMapService = new LocalMapService(myModel.MapPackage);
        starting += onStarting;
        starting(this, EventArgs.Empty);
    }

    private event EventHandler starting = delegate { };
    private async void onStarting(object sender, EventArgs args) {
        starting -= onStarting; //optional

        // the following runs on background thread
        await localMapService.StartAsync(); 

        // returned to the UI thread

        var serviceLayer = new ArcGISDynamicMapServiceLayer() {
            ID = "mpklayer",
            ServiceUri = localMapService.UrlMapService,
        };

        Layers.Add(serviceLayer);
    }

    public LayerCollection Layers {
        get {
            return layers;
        }
    }
}

And the view

<!-- Add a MapView Control. -->
<esriControls:MapView x:Name="MapView1">

    <!-- Add a Map. with layers via binding-->
    <esriControls:Map Layers="{Bind Layers, Mode=OneWay}" />
</esriControls:MapView>

You can now manipulate layers via code as needed

Thanks Nkosi, I like you idea with `LayerCollection` but looks like this is not adding anything to the map! looks like the `async void onStarting()` is not hitting at all because when I try to debug it nothing is happening on putting breakpoint there — Mona Coder, Dec 07 '18 at 19:00
Thanks but one more question what the `starting += onStarting; starting(this, EventArgs.Empty);` is doing exactly? — Mona Coder, Dec 08 '18 at 00:14
`starting += onStarting;` subscribes the event to the event handler. `starting(this, EventArgs.Empty);` is actually raising the event. — Nkosi, Dec 08 '18 at 00:15
@MonaCoder all of that as I indicated in the answer is to allow you to properly invoke the async API of the `LocalMapService` — Nkosi, Dec 08 '18 at 00:20

score 0 · Answer 2 · answered Dec 05 '18 at 21:49

I don't have SDK available to try, but following code should work:

View Model:

private readonly LocalMapService localMapService;

// initialize localMapService instance in the constructor 

public string UrlMapService
{
    get { return localMapService.UrlMapService; }
}

XAML:

<!-- A Map ControlView to display various GIS layers. -->
<esriControls:MapView x:Name="MapView1" Width="448" Height="480" VerticalAlignment="Top" Margin="2,2,2,2">

    <!-- A Map. -->
    <esriControls:Map  x:Name="Map1" >

        <!-- Add an ArcGISDynamicMapServiceLayer via Xaml. Set the ID and ImageFormat properties. -->
        <esriLayers:ArcGISDynamicMapServiceLayer ID="serviceLayer" ImageFormat="PNG24" 
                ServiceUri="{Binding UrlMapService, Mode=OneWay}"/>
    </esriControls:Map>
</esriControls:MapView>

Thanks Dipen I am able to see the ` localMapService.UrlMapService;` in the debugging mode but still getting empty white page on map on runtime. No error — Mona Coder, Dec 05 '18 at 22:59
@MonaCoder make sure to call `localMapService.StartAsync()`. You can either call it manually on the vm in code behind r can bind a command to window loaded event. — Dipen Shah, Dec 05 '18 at 23:26

Implementing MVVM with ArcGIS Runtime local server

2 Answers2