CODEWITHSUNDEEP
c#uwpopenstreetmapbitmapimageopenmaptiles
Vishal O
Vishal O

Reputation: 1

The OpenStreetMap tile layer image was not displayed when added in Image control in UWP

I was trying to display the image of tile layer for OpenStreetMap using the Image control in the UWP platform, but the tile layer was displayed or displayed blank.

Here is my code.

In the MainPage.xaml file, I have created a simple Image control.

<Page
    x:Class="BitmapImageDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BitmapImageDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Image x:Name="image"
               Stretch="Uniform" />
    </Grid>
</Page>

In the MainPage.xaml.cs file, I have initialized a new BitMapImage control and set the OSM tilelayer’s URI to its UriSource property. Later set the bitMapImage to the Image.Source.

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        BitmapImage bitmapImage = new BitmapImage();
        bitmapImage.UriSource = new Uri("https://tile.openstreetmap.org/1/1/0.png", UriKind.RelativeOrAbsolute);
        image.Width = bitmapImage.DecodePixelWidth = 256;
        image.Height = bitmapImage.DecodePixelHeight = 256;
        image.Source = bitmapImage;
    }
}

You can find/download the example sample from the following github link.

I have checked with Uri's of some other images and it got displayed, but the OSM tile layer image was not displayed.

Any help would be appreciated.

Upvotes: 0

Views: 271

Answers (1)

Junjie Zhu - MSFT
Junjie Zhu - MSFT

Reputation: 3034

Openstreetmap tiles can be used in Mapcontrol with HttpMapTileDataSource. If you want to display tiles in Image control, you need to download them in advance. The following code sample uses HttpClient to download image in the image_Loaded event.

<Image x:Name="image" Stretch="Uniform" Loaded="image_Loaded"/>

private async void image_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    Image image = sender as Image;
    var bitmapImage = new BitmapImage();
    image.Source = bitmapImage;

    using (HttpClient client = new HttpClient())
    {
        try
        {
            var httpResponse = await client.GetAsync(new Uri("https://tile.openstreetmap.org/1/1/0.png"));

            if (httpResponse.IsSuccessStatusCode)
            {
                using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
                {
                    var inputStream = await httpResponse.Content.ReadAsBufferAsync();
                    await stream.WriteAsync(inputStream);
                    stream.Seek(0);
                    await bitmapImage.SetSourceAsync(stream);
                }
            }
        }
        catch (Exception ex)
        {

        }
    }
}

Upvotes: 0

Related Questions