This guide uses Visual Studio 2022, but you can follow similar steps in other IDEs, such as JetBrains Rider.

Quick Start Guide¶

In this section, we'll show you how to create a visually appealing map with ThinkGeo Cloud Maps as the background. We highly recommend that you also take a look at the How Do I Samples on Gitlab, which has over 90 examples covering virtually everything you can do with the control.

Step 1: Create a Maui Project¶

Create a C# Maui project with .NET 8.0. For the best experience and latest MAUI support, ensure your Visual Studio is updated to the most recent version.

Step 2: Add the ThinkGeo MAUI Nuget Package:¶

Install the ThinkGeo.UI.Maui NuGet package through NuGet package manager.

NOTE: You can switch between the Beta Branch and Release Branch by checking/unchecking the "Include prerelease" checkbox. The Beta Branch contains the latest features/bug fixes, while the Release Branch is more stable and better tested. Check out this guide for more details.

Step 3: Add the Map Control to MainPage.xaml¶

Add the ThinkGeo.UI.Maui namespace to MainPage.xaml

xmlns:thinkgeo="clr-namespace:ThinkGeo.UI.Maui;assembly=ThinkGeo.UI.Maui"

Add the map control within Grid element in MainPage.xaml file.

 <ContentPage.Content>
     <Grid>
         <thinkgeo:MapView x:Name="MapView"/>
     </Grid>
 </ContentPage.Content>

In this example, we are configuring the MapUnit, SizeChanged event, and ZoomMapTool in XAML. These settings can also be implemented in the code-behind.

 <ContentPage.Content>
     <Grid>
         <thinkgeo:MapView x:Name="MapView" 
            MapUnit="Meter" SizeChanged="MapView_OnSizeChanged">
             <thinkgeo:MapView.MapTools>
                 <thinkgeo:ZoomMapTool/>
             </thinkgeo:MapView.MapTools>
         </thinkgeo:MapView>
     </Grid>
 </ContentPage.Content>

Step 4: Add the ThinkGeo Cloud Base Map Overlay¶

Import the namespace at the top of 'MainPage.xaml.cs` file.

using ThinkGeo.Core;
using ThinkGeo.UI.Maui;

Add the following code to the MapView_OnSizeChanged event. Using the _initialized flag, this code will run once when the map is fully loaded and ready for use. (The key passed in ThinkGeoVectorOverlay is for test only, you can apply for your own key from ThinkGeo Cloud)

We have established a tile cache for the base overlay to enhance performance. The code snippet FileSystem.Current.CacheDirectory retrieves the cache directory for the app across all platforms.

private bool _initialized = false;

private async void MapView_OnSizeChanged(object sender, EventArgs e)
{
    if (_initialized)
        return;
    _initialized = true;

    // Add ThinkGeo Cloud Maps as the background 
    var backgroundOverlay = new ThinkGeoVectorOverlay
    {
        ClientId = "9ap16imkD_V7fsvDW9I8r8ULxgAB50BX_BnafMEBcKg~",
        ClientSecret = "vtVao9zAcOj00UlGcK7U-efLANfeJKzlPuDB9nw7Bp4K4UxU_PdRDg~~",
        MapType = ThinkGeoCloudVectorMapsMapType.Light,
        TileCache = new FileRasterTileCache(FileSystem.Current.CacheDirectory, "ThinkGeoVectorLight_RasterCache")
    };
    MapView.Overlays.Add(backgroundOverlay);

    MapView.IsRotationEnabled = true;

    // set up the map extent and refresh
    MapView.CenterPoint = new PointShape(450061, 1074668);
    MapView.MapScale = 74000000;

    await MapView.RefreshAsync();
}

Step 5: Run the Sample & Register for Your Free Evaluation¶

The first time you run your application, if you have not installed a license, you may encounter a 'licenses not installed' exception.

You can open the ThinkGeo's Registration Website, where you can create an account to begin a 30-day free evaluation. From there, you can download and install the Product Center and manage licenses for ThinkGeo products, please refer to the ThinkGeo UI Maui License Guide for additional details.

Once you activate the 'ThinkGeo UI Maui' license to start your evaluation, you should be able to see a working map with the ThinkGeo Cloud base map!

On Windows, you can double-click to zoom in, use the Plus/Minus buttons to adjust zoom, and perform track zoom by holding the Shift key while dragging the map. Additionally, rotate the map by holding the Alt key and dragging.

On both Android and iOS, you can double-click to zoom in, use the Plus/Minus buttons to zoom in or out, and rotate the map by holding a control key (such as Ctrl, Alt, or Option, depending on the operating system and emulator) and dragging within the Android Emulator, or by pinching on a real device

NOTE: When debugging your application in an Android or iOS/MacCatalyst emulator, you will need to follow Step 2 of the Licensing Guide to generate a license for the emulator.

Summary¶

You now have a basic understanding of how to use the ThinkGeo UI Maui controls and can begin adding functionality to your own applications. Let's review what we've learned about the object relationships and how the pieces of ThinkGeo UI Maui work together:

1. A MapView is the fundamental control that contains all the other objects used to determine how the map is rendered.
2. A MapView has multiple Overlays, and each Overlay corresponds to a tier of images displayed on the map control.
3. The MapUnit, CenterPoint and MapScale need to be correctly set for the map control.

Congratulations, you are now in an excellent position to review the How Do I Sample and explore other features.