Customise map pins (#100)

* MauiMaps

* Add Android

* net7.0

* iOS/MacCatalyst maps

.github/workflows/dotnet.yml

@@ -20,7 +20,7 @@ jobs:
     - name: Setup .NET
       uses: actions/setup-dotnet@v2
       with:
-        dotnet-version: 6.0.x
+        dotnet-version: 7.0.x
         include-prerelease: true
     - name: Install dependencies
       run: dotnet workload install maui

Auth/AuthServices/AuthServices.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
 	<PropertyGroup>
-		<TargetFrameworks>$(TargetFrameworks);net6.0</TargetFrameworks>
+		<TargetFrameworks>$(TargetFrameworks);net7.0</TargetFrameworks>
 	</PropertyGroup>
 
 	<ItemGroup>

CardLayout/CardLayout.csproj

@@ -25,7 +25,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
-		<PackageReference Include="M.BindableProperty.Generator" Version="0.9.0" />
+		<PackageReference Include="M.BindableProperty.Generator" Version="0.9.1" />
 		<PackageReference Include="CommunityToolkit.Mvvm" Version="8.0.0" />
 	</ItemGroup>
 

Directory.Build.props

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Project>
 	<PropertyGroup>
-		<TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
-		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
-		<!--<TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks>-->
+		<TargetFrameworks>net7.0-android;net7.0-ios;net7.0-maccatalyst</TargetFrameworks>
+		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net7.0-windows10.0.19041.0</TargetFrameworks>
+		<!--<TargetFrameworks>$(TargetFrameworks);net7.0-tizen</TargetFrameworks>-->
 		<UseMaui>true</UseMaui>
 		<SingleProject>true</SingleProject>
 		<Nullable>enable</Nullable>

KanbanBoard/MainPage.xaml

@@ -4,7 +4,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="KanbanBoard.MainPage">
 	<ContentPage.Resources>
-		<Color x:Key="ColumnBackgroundColor">DimGray</Color>
 		<Color x:Key="ColumnWipReachedBackgroundColor">IndianRed</Color>
 		<x:Double x:Key="BoardTitleSize">20</x:Double>
 		<x:Double x:Key="CardTitleSize">14</x:Double>

KanbanBoard/README.md

@@ -6,10 +6,10 @@ Article: https://vladislavantonyuk.azurewebsites.net/articles/Creating-Kanban-Bo
 
 ## Build
 ```pwsh
-dotnet build KanbanBoard.csproj -t:Run -f net6.0-android
-dotnet build KanbanBoard.csproj -t:Run -f net6.0-ios
-dotnet build KanbanBoard.csproj -t:Run -f net6.0-maccatalyst
-dotnet build KanbanBoard.csproj -t:Run -f net6.0-windows10.0.19041.0
+dotnet build KanbanBoard.csproj -t:Run -f net7.0-android
+dotnet build KanbanBoard.csproj -t:Run -f net7.0-ios
+dotnet build KanbanBoard.csproj -t:Run -f net7.0-maccatalyst
+dotnet build KanbanBoard.csproj -t:Run -f net7.0-windows10.0.19041.0
 ```
 
 ## Images

MauiImageEffects/MauiImageEffects.csproj

@@ -27,14 +27,14 @@
 		<MauiImage Include="Resources\Images\*" />
 	</ItemGroup>
 
-	<ItemGroup Condition="$(TargetFramework.StartsWith('net6.0-android')) != true">
+	<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-android')) != true">
 		<Compile Remove="**\**\*.Android.cs" />
 		<None Include="**\**\*.Android.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
 		<Compile Remove="**\Android\**\*.cs" />
 		<None Include="**\Android\**\*.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
 	</ItemGroup>
 
-	<ItemGroup Condition="$(TargetFramework.StartsWith('net6.0-ios')) != true AND $(TargetFramework.StartsWith('net6.0-maccatalyst')) != true">
+	<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-ios')) != true AND $(TargetFramework.StartsWith('net7.0-maccatalyst')) != true">
 		<Compile Remove="**\**\*.iOS.cs" />
 		<None Include="**\**\*.iOS.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
 		<Compile Remove="**\iOS\**\*.cs" />

MauiMaps/App.xaml

@@ -0,0 +1,14 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:MauiMaps"
+             x:Class="MauiMaps.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

MauiMaps/App.xaml.cs

@@ -0,0 +1,11 @@
+namespace MauiMaps;
+
+public partial class App : Application
+{
+	public App()
+	{
+		InitializeComponent();
+
+		MainPage = new AppShell();
+	}
+}

MauiMaps/AppShell.xaml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="MauiMaps.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:MauiMaps"
+    Shell.FlyoutBehavior="Disabled">
+
+    <ShellContent
+        Title="Home"
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>

MauiMaps/AppShell.xaml.cs

@@ -0,0 +1,9 @@
+namespace MauiMaps;
+
+public partial class AppShell : Shell
+{
+	public AppShell()
+	{
+		InitializeComponent();
+	}
+}

MauiMaps/CustomPin.cs

@@ -0,0 +1,53 @@
+namespace MauiMaps;
+
+using Microsoft.Maui.Controls.Maps;
+
+public class CustomPin : Pin
+{
+	public static readonly BindableProperty ImageSourceProperty =
+		BindableProperty.Create(nameof(ImageSource), typeof(ImageSource), typeof(CustomPin), propertyChanged:OnImageSourceChanged);
+
+	public ImageSource? ImageSource
+	{
+		get => (ImageSource?)GetValue(ImageSourceProperty);
+		set => SetValue(ImageSourceProperty, value);
+	}
+
+	public Microsoft.Maui.Maps.IMap? Map { get; set; }
+
+	static async void OnImageSourceChanged(BindableObject bindable, object oldValue, object newValue)
+	{
+		var control = (CustomPin)bindable;
+		var imageSource = control.ImageSource;
+
+		if (control.Handler?.PlatformView is null)
+		{
+			// Workaround for when this executes the Handler and PlatformView is null
+			control.HandlerChanged += OnHandlerChanged;
+			return;
+		}
+
+		if (imageSource is not null)
+		{
+#if ANDROID || IOS || MACCATALYST
+			await control.AddAnnotation();
+#else
+			await Task.CompletedTask;
+#endif
+		}
+		else
+		{
+#if ANDROID
+
+#elif IOS
+
+#endif
+		}
+
+		void OnHandlerChanged(object? s, EventArgs e)
+		{
+			OnImageSourceChanged(control, oldValue, newValue);
+			control.HandlerChanged -= OnHandlerChanged;
+		}
+	}
+}

MauiMaps/MainPage.xaml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="MauiMaps.MainPage">
+
+    <Grid>
+            <Map x:Name="MyMap"/>
+
+    </Grid>
+
+</ContentPage>

MauiMaps/MainPage.xaml.cs

@@ -0,0 +1,30 @@
+namespace MauiMaps;
+
+using Microsoft.Maui.Maps;
+
+public partial class MainPage : ContentPage
+{
+	public MainPage()
+	{
+		InitializeComponent();
+		var customPin1 = new CustomPin()
+		{
+			Label = "label",
+			Location = new Location(10, 10),
+			Address = "Address",
+			ImageSource = ImageSource.FromUri(new Uri("https://picsum.photos/50")),
+			Map = MyMap
+		};
+		var customPin2 = new CustomPin()
+		{
+			Label = "label2",
+			Location = new Location(11, 11),
+			Address = "Address2",
+			ImageSource = ImageSource.FromUri(new Uri("https://picsum.photos/60")),
+			Map = MyMap
+		};
+		MyMap.Pins.Add(customPin1);
+		MyMap.Pins.Add(customPin2);
+		MyMap.MoveToRegion(new MapSpan(new Location(10,10), 10, 10));
+	}
+}

MauiMaps/MauiMaps.App.sln

@@ -0,0 +1,27 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.0.31611.283
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MauiMaps", "MauiMaps.csproj", "{FDF55EA0-A4E1-4E6E-89D2-70B8F08EB018}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{FDF55EA0-A4E1-4E6E-89D2-70B8F08EB018}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{FDF55EA0-A4E1-4E6E-89D2-70B8F08EB018}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{FDF55EA0-A4E1-4E6E-89D2-70B8F08EB018}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{FDF55EA0-A4E1-4E6E-89D2-70B8F08EB018}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{FDF55EA0-A4E1-4E6E-89D2-70B8F08EB018}.Release|Any CPU.Build.0 = Release|Any CPU
+		{FDF55EA0-A4E1-4E6E-89D2-70B8F08EB018}.Release|Any CPU.Deploy.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {61F7FB11-1E47-470C-91E2-47F8143E1572}
+	EndGlobalSection
+EndGlobal

MauiMaps/MauiMaps.csproj

@@ -0,0 +1,34 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+    <PropertyGroup>
+        <OutputType>Exe</OutputType>
+        <RootNamespace>MauiMaps</RootNamespace>
+
+		<!-- Display name -->
+        <ApplicationTitle>MauiMaps</ApplicationTitle>
+
+        <!-- App Identifier -->
+        <ApplicationId>com.vladislavantonyuk.mauimaps</ApplicationId>
+        <ApplicationIdGuid>1761D471-B6ED-41DB-8307-708EEEF95479</ApplicationIdGuid>
+
+        <!-- Versions -->
+        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
+        <ApplicationVersion>1</ApplicationVersion>
+	</PropertyGroup>
+
+    <ItemGroup>
+        <!-- App Icon -->
+        <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
+
+        <!-- Splash Screen -->
+        <MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
+
+        <!-- Images -->
+        <MauiImage Include="Resources\Images\*" />
+    </ItemGroup>
+
+	<ItemGroup>
+		<PackageReference Include="Microsoft.Maui.Controls.Maps" Version="7.0.0-rc.1.6683" />
+	</ItemGroup>
+
+</Project>

MauiMaps/MauiProgram.cs

@@ -0,0 +1,18 @@
+namespace MauiMaps;
+
+public static class MauiProgram
+{
+	public static MauiApp CreateMauiApp()
+	{
+		var builder = MauiApp.CreateBuilder();
+		builder.UseMauiApp<App>().UseMauiMaps();
+		builder.ConfigureMauiHandlers(handlers=>
+		{
+#if IOS || MACCATALYST
+			handlers.AddHandler<CustomPin, CustomPinHandler>();
+#endif
+		});
+
+		return builder.Build();
+	}
+}

MauiMaps/Platforms/Android/AndroidManifest.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true">
+		<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_KEY_HERE"/>
+	</application>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+	<uses-permission android:name="android.permission.INTERNET" />
+	<queries>
+		<intent>
+			<action android:name="android.intent.action.VIEW" />
+			<data android:scheme="geo"/>
+		</intent>
+	</queries>
+</manifest>

MauiMaps/Platforms/Android/MainActivity.cs

@@ -0,0 +1,15 @@
+using Android.App;
+using Android.Content.PM;
+
+namespace MauiMaps;
+
+[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true,
+          ConfigurationChanges = ConfigChanges.ScreenSize |
+                                 ConfigChanges.Orientation |
+                                 ConfigChanges.UiMode |
+                                 ConfigChanges.ScreenLayout |
+                                 ConfigChanges.SmallestScreenSize |
+                                 ConfigChanges.Density)]
+public class MainActivity : MauiAppCompatActivity
+{
+}

MauiMaps/Platforms/Android/MainApplication.cs

@@ -0,0 +1,14 @@
+using Android.App;
+using Android.Runtime;
+
+namespace MauiMaps;
+
+[Application]
+public class MainApplication : MauiApplication
+{
+	public MainApplication(IntPtr handle, JniHandleOwnership ownership) : base(handle, ownership)
+	{
+	}
+
+	protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+}

MauiMaps/Platforms/Android/MapExtensions.cs

@@ -0,0 +1,28 @@
+namespace MauiMaps;
+
+using Android.App;
+using Android.Gms.Maps.Model;
+using Microsoft.Maui.Controls.Compatibility.Platform.Android;
+using Microsoft.Maui.Maps.Handlers;
+
+public static class MapExtensions
+{
+	public static async Task AddAnnotation(this CustomPin pin)
+	{
+		var googleMap = ((IMapHandler?)pin.Map?.Handler)?.Map;
+		if (googleMap is not null)
+		{
+			var markerWithIcon = new MarkerOptions();
+			markerWithIcon.SetPosition(new LatLng(pin.Location.Latitude, pin.Location.Longitude));
+			markerWithIcon.SetTitle(pin.Label);
+			markerWithIcon.SetSnippet(pin.Address);
+			var imageSourceHandler = new ImageLoaderSourceHandler();
+			var bitmap = await imageSourceHandler.LoadImageAsync(pin.ImageSource, Application.Context);
+			markerWithIcon.SetIcon(bitmap is null
+				                       ? BitmapDescriptorFactory.DefaultMarker()
+				                       : BitmapDescriptorFactory.FromBitmap(bitmap));
+
+			googleMap.AddMarker(markerWithIcon);
+		}
+	}
+}