[BUG] Setting MapType to MapType.Hybrid for Windows does not display street labels with the map

jfversluis commented 3 months ago

Issue moved from dotnet/maui#21163

Please respond to @anotherlab.

From @anotherlab on Tuesday, March 12, 2024 8:16:49 PM

Description

The .NET MAUI Map supports three MapTypes

public enum MapType
{
    Street,
    Satellite,
    Hybrid
}

On Android and iOS, setting Map.MapType to any of the values will change the map to the appropriate type. On Windows, setting Map.MapType to MapType.Hybrid performs the same as setting it to MapType.Satellite.

The embedded Javascript in MapHandler.Windows.cs has the following method that gets invoked when you set MapType

function setMapType(mauiMapType)
{
    var mapTypeID = Microsoft.Maps.MapTypeId.road;
    switch(mauiMapType) {
        case 'Street':
        mapTypeID = Microsoft.Maps.MapTypeId.road;
        break;
        case 'Satellite':
        mapTypeID = Microsoft.Maps.MapTypeId.aerial;
        break;
        case 'Hybrid':
        mapTypeID = Microsoft.Maps.MapTypeId.aerial;
        break;
        default:
        mapTypeID = Microsoft.Maps.MapTypeId.road;
    }
    map.setView({
        mapTypeId: mapTypeID
    });
}

Setting MapType to Satellite or Hybrid uses the Bing Maps setting of Microsoft.Maps.MapTypeIdaerial. Bing Maps doesn't have a "Hybrid" view. I think Bing Maps uses the Satellite view with the LayerOption set to visible. I think you would need to add one of the following when setting mapTypeId.

map.setView({ labelOverlay: Microsoft.Maps.LabelOverlay.visible}); or map.setView({ labelOverlay: Microsoft.Maps.LabelOverlay.visible});

Steps to Reproduce

Take the sample project
Open either map page
Add MapType="Hybrid" to the map control on the page
Target Windows

What you should see A satellite map with road labels

What you see A Satellite map without road labels

Link to public reproduction project repository

https://github.com/CommunityToolkit/Maui/tree/main/samples/CommunityToolkit.Maui.Sample/Pages/Views/Maps

Version with bug

8.0.6 SR1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 10 SDK 10.0.22621

Did you find any workaround?

No response

Relevant log output

No response

jfversluis commented 3 months ago

Issue moved from dotnet/maui#21163

Please respond to @QianaJiao.

From @QianaJiao on Wednesday, March 13, 2024 9:14:48 AM

I verified on 17.10.0 Preview 2.0, I can repro the issue on Windows platform with sample project with a liite different. I setting Map.MapType to MapType.Satellite performs the same as setting it to MapType.Street.

edwardmiller-mesirow commented 3 months ago

Bing doesn't natively support a Hybrid mode, but can support it via adding custom layers. It would likely be quite non-trivial.

Adding a warning message to users that Hybrid isn't supported on Bing/Windows could be a stop-gap.

Bing Copilot says:

The Bing Maps V8 Web Control offers several options for changing the map type. Let's explore them:

Aerial/Satellite View: This view provides a high-resolution, bird's-eye perspective of the Earth's surface. It displays imagery captured from satellites or aerial photography. You can enable this view by selecting the appropriate map type.

Street View: While Bing Maps primarily focuses on aerial imagery, it also includes street-level views. However, it's essential to note that Bing Maps does not have a dedicated "Street View" feature like Google Maps. Instead, it offers a combination of aerial imagery and road labels to provide context.

Hybrid View: Unfortunately, Bing Maps V8 does not directly support a hybrid view that combines both aerial imagery and street labels. However, you can achieve a similar effect by overlaying custom map styles or additional layers on the base map.

Additional Supported Map Types: Besides aerial and street views, Bing Maps V8 supports additional map types such as canvasDark, canvasLight, and grayscale. These can be added to the navigation bar for specialized use cases.

To customize the map type, you can use the setMapType function or other relevant methods. For most scenarios, using the setView method is recommended, as it allows you to specify other view settings (such as center and zoom level) along with the map type¹².

For more detailed information and examples, you can refer to the Bing Maps V8 Web Control documentation and explore the various concepts and options available³⁴.

Source: Conversation with Bing, 3/13/2024 (1) MapOptions Object - Bing Maps | Microsoft Learn. https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/mapoptions-object. (2) Change the Map View - Bing Maps | Microsoft Learn. https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/map/change-the-map-view. (3) Map Control Concepts and Examples - Bing Maps | Microsoft Learn. https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/. (4) Bing Maps V8 Web Control - Bing Maps | Microsoft Learn. https://learn.microsoft.com/en-us/bingmaps/v8-web-control/.

anotherlab commented 3 months ago

You shouldn't need to add a layer to simulate a hybrid mode.

A combination of setting Aerial and map.setView({ labelOverlay: Microsoft.Maps.LabelOverlay.visible}); should be sufficient. Conversely map.setView({ labelOverlay: Microsoft.Maps.LabelOverlay.hidden}); should be set for MAUI's Satellite map type.

CommunityToolkit / Maui