Pada tutorial kali ini kita akan mencoba untuk mengintegrasikan ArcGIS kedalam MAUI Project untuk menampilkan Map untuk pertama kali, dan kemudian menggambar point, line, dan polygon.
Sebelum bisa menggunakan layanan ArcGIS online, anda perlu untuk mendaftar sebagai developer di https://developers.arcgis.com/. Lisensi ini khusus hanya dapat digunakan untuk keperluan pengembangan, jika akan digunakan secara komersial, anda harus membeli lisensi tersendiri.
Kemudian buat project .NET MAUI, dan tambahkan library berikut:
Setelah itu tambahkan class dengan nama MapViewModel.cs
using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Map = Esri.ArcGISRuntime.Mapping.Map;
namespace BelajarMAUI.MobileApp.MVVM.ViewModels
{
public class MapViewModel : INotifyPropertyChanged
{
public MapViewModel()
{
SetupMap();
}
private Map _map = null!;
public Map Map
{
get => _map;
set
{
_map = value;
OnPropertyChanged();
}
}
private void SetupMap()
{
Map = new Map(BasemapStyle.ArcGISTopographic);
var mapCenterPoint = new MapPoint(110.370529, -7.797068, SpatialReferences.Wgs84);
Map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);
}
public event PropertyChangedEventHandler? PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Untuk menampilkan Map pada komponen View, tambahkan kode berikut pada halaman DisplayMapPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BelajarMAUI.MobileApp.MVVM.Views.DisplayMapPage"
xmlns:local="clr-namespace:BelajarMAUI.MobileApp.MVVM.ViewModels"
xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
Title="DisplayMapPage">
<ContentPage.Resources>
<local:MapViewModel x:Key="MapViewModel" />
</ContentPage.Resources>
<esri:MapView x:Name="MainMapView" Map="{Binding Map,Source={StaticResource MapViewModel}}" />
</ContentPage>
Setelah melakukan binding komponen ViewModel ke View, jalankan aplikasi untuk melihat hasilnya.
Menampilkan Point, Line, dan Polygon
Untuk menampilkan point, line, dan polygon, pada MapViewModel.cs yang sudah dibuat sebelumnya tambahkan kode berikut:
private GraphicsOverlayCollection? _graphicsOverlays;
public GraphicsOverlayCollection? GraphicsOverlays
{
get => _graphicsOverlays;
set
{
_graphicsOverlays = value;
OnPropertyChanged();
}
}
private void CreateGraphics()
{
var jogjaGraphicOverlay = new GraphicsOverlay();
GraphicsOverlayCollection overlays = new GraphicsOverlayCollection()
{
jogjaGraphicOverlay
};
this.GraphicsOverlays = overlays;
var trainingLocation = new MapPoint(110.37800926757623, -7.7416761403281225, SpatialReferences.Wgs84);
var pointSymbol = new SimpleMarkerSymbol
{
Style = SimpleMarkerSymbolStyle.Circle,
Color = System.Drawing.Color.Orange,
Size = 10.0
};
pointSymbol.Outline = new SimpleLineSymbol
{
Style = SimpleLineSymbolStyle.Solid,
Color = System.Drawing.Color.Blue,
Width = 2.0
};
var pointGraphic = new Graphic(trainingLocation, pointSymbol);
jogjaGraphicOverlay.Graphics.Add(pointGraphic);
}
Kode diatas digunakan untuk menambahkan layer kedalam map, dan menambahkan titik/point yang sudah ditentukan.
Tambahkan juga pada DisplayMapPage.xaml untuk menampilkan titik point yang dibuat pada map.
<esri:MapView x:Name="MainMapView" Map="{Binding Map,Source={StaticResource MapViewModel}}"
GraphicsOverlays="{Binding GraphicsOverlays,Source={StaticResource MapViewModel}}" />
Hasil tampilan map dapat dilihat sebagai berikut:
Menambahkan Line Graphic
Line grafik dapat dibuat menggunakan objek polyline dan line symbol. Tambahkan kode berikut pada MapViewModel.cs
List<MapPoint> linePoints = new List<MapPoint>
{
new MapPoint(110.37800926757623, -7.7516761403281225, SpatialReferences.Wgs84),
new MapPoint(110.3800926757623, -7.7616761403281225, SpatialReferences.Wgs84),
new MapPoint(110.39800926757623, -7.7716761403281225, SpatialReferences.Wgs84),
new MapPoint(110.40800926757623, -7.7816761403281225, SpatialReferences.Wgs84),
new MapPoint(110.41800926757623, -7.7916761403281225, SpatialReferences.Wgs84)
};
var jogjaPolyline = new Polyline(linePoints);
var polylineSymbol = new SimpleLineSymbol
{
Style = SimpleLineSymbolStyle.Solid,
Color = System.Drawing.Color.Blue,
Width = 3.0
};
var polylineGraphic = new Graphic(jogjaPolyline, polylineSymbol);
jogjaGraphicOverlay.Graphics.Add(polylineGraphic);
Maka pada peta akan digambar sebuah garis seperti contoh berikut:
Menambahkan Polygon
Sama dengan langkah sebelumnya, sekarang kita akan mencoba untuk menambahkan objek polygon.
Pada tutorial selanjutanya tentang .NET MAUI dan ArcGis akan dibahas bagaimana menampilkan posisi lokasi dari device pada map.
Erick Kurniawan 
Leave a comment