# How to use Mapbox in your .NET MAUI app

## Overview

[Mapbox](https://www.mapbox.com/) is a well-known service for maps and location and it provides its SDKs for multiple platforms from the web to the mobile. Within the mobile, there are prebuilt SDKs for ReactNative and Flutter, but none for Xamarin.Forms/.NET MAUI.

Recently, I successfully created and published [the NuGet package](https://www.nuget.org/packages/Mapbox.Maui/) for integrating Mapbox SDKs to a Xamarin.Forms and/or .NET MAUI app.

```bash
dotnet add package Mapbox.Maui --version 11.4.0-alpha01
```

In this blog, I will guide you through the steps to use that mentioned NuGet package in a .NET MAUI app.

> TLTR; You can access the full quickstart example from [this GitHub repo](https://github.com/tuyen-vuduc/dotnet-mapbox-quickstart).

## Prerequisites

* Visual Studio for Mac or Visual Studio on Windows (VS Code)
    
* .NET 8.0.100
    
* .NET workloads for Android, iOS, MAUI
    

## Steps

> Assumption: We will start with a totally new, empty .NET MAUI app.

### 1/ Config your `MAPBOX_DOWNLOADS_TOKEN`

At the moment, this setup for iOS and Android is a little bit different, so we have to do it twice, differently for each platform. You can read my blog posts [for .NET Android](https://tuyen-vuduc.tech/how-to-use-mapbox-for-your-dotnet-android-app) and [for .NET iOS](https://tuyen-vuduc.tech/how-to-use-mapbox-in-your-net-ios-app) for further details.

* Grab your MAPBOX\_DOWNLOADS\_TOKEN from [your Mapbox account](https://account.mapbox.com/) page
    
* Put that token `~/.gradle/gradle.properties` from the terminal (Replace YOUR\_MAPBOX\_DOWNLOADS\_TOKEN with yours)
    

```xml
echo "MAPBOX_DOWNLOADS_TOKEN=YOUR_MAPBOX_DOWNLOADS_TOKEN" >> ~/.gradle/gradle.properties
```

* Amend your `.csproj` file with the following lines (Replace YOUR\_MAPBOX\_DOWNLOADS\_TOKEN with yours)
    

```csharp
<PropertyGroup>
    <MAPBOX_DOWNLOADS_TOKEN>YOUR_MAPBOX_DOWNLOADS_TOKEN</MAPBOX_DOWNLOADS_TOKEN>
</PropertyGroup>
<ItemGroup>
	<GradleRepository Include="https://api.mapbox.com/downloads/v2/releases/maven">
	  <Repository>
	  maven {
         url = uri("https://api.mapbox.com/downloads/v2/releases/maven")
         authentication {
         	create&lt;BasicAuthentication&gt;("basic")
         }
         credentials {
             // Do not change the username below.
             // This should always be `mapbox` (not your username).
             username = "mapbox"
             // Use the secret token you stored in gradle.properties as the password
             password = providers.gradleProperty("MAPBOX_DOWNLOADS_TOKEN").get()
         }
      }
	  </Repository>
	</GradleRepository>
</ItemGroup>
```

> ***NOTE:***`MAPBOX_DOWNLOADS_TOKEN`***is a sensitive data item, it shouldn't be committed to our git repository. We should put it in an ignored file, but still understandable by the compiler.***

### 2/ Add `Mapbox MAUI for .NET` to your project

* Open NuGet Package Manager
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689663257376/077015ea-1c75-4711-87c0-049d1dc3d525.png align="left")
    
* Search for the package `Mapbox.Maui`
    
* Add it to your project
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689664059675/7ad2d37a-1db8-4ead-87f3-c47187a8c6eb.png align="left")
    
* Check the result
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689664102834/854819e3-0876-46b3-aa80-884bbd2c51bc.png align="left")
    
* Try to build the project
    
    > A successful build means you did it well by far
    

### 4/ Configure `mapbox_access_token`

To work with Mapbox APIs, we have to generate a personalized access token from [our Mapbox account page](https://account.mapbox.com/) and then put it into our project to use

* Generate/grab the access token
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689629809872/bee32c30-7025-4533-b653-eb5f227dbb59.png align="center")
    
    > You can use *the default public token* for this tutorial. If you want more control over what scopes to be used, please create a new token
    
* Amend `MauiProgram.cs` as the below code snippet
    
    ```csharp
    public static class MauiProgram
    {
        // Please put your MAPBOX_ACCESS_TOKEN here
    	const string ACCESS_TOKEN = "YOUR_MAPBOX_ACCESS_TOKEN";
    
    	public static MauiApp CreateMauiApp()
    	{
            // ...
    		builder
    			// ...
    			.UseMapbox(ACCESS_TOKEN);
            // ...
    ```
    
    > NOTE: `mapbox_access_token` is a sensitive data item, it shouldn't be committed to our git repository. We should put it in an ignored file, but still understandable by the compiler.
    

### 5/ Add `MapView` control to your app

* In XAML `MainPage.xaml`
    

```xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    ...
    xmlns:mb="clr-namespace:MapboxMaui;assembly=Mapbox.Maui"
    ...>

    <mb:MapboxView />
</ContentPage>
```

* Remove all old logic in `MainPage.xaml.cs`
    

```csharp
public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();
	}
}
```

* Check out the result
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1689668550455/a54ac427-939e-470c-884a-218e85cd5215.png align="center")

> **NOTE**: You can also initialize `MapView` instance directly from C#.

## Wrap up

I just guided you on how to use Mapbox in a .NET MAUI project.

I already ported 10 out of 66 iOS examples to .NET MAUI. You can check out [Mapbox SDK for .NET MAUI repository](https://github.com/tuyen-vuduc/mapbox-maui).

I want to port all the rest to .NET MAUI, but it'll be a time-consuming task. Single me will last for a very long time. I hope the community can contribute to [this GitHub repo](https://github.com/tuyen-vuduc/dotnet-mapbox-quickstart) and/or to their repos.