How to use an Resource image (defined in my project) in the html file for a bing map as a icon

I'm trying to use custom icons in my bingmap solution. The default icon works (ofcourse) and I can use a url for an icon. icon: "https://example.com/assets/images/my_custom_pin.png" But I want to use an image from my projects resources.

I just can't find the way to do this.

Solution

Using Bing Maps JavaScript SDK in WebBrowser or WebVeiw2

Assuming you are using a WebBrowser control or a WebVeiw2 control to show the map using Bing Maps JavaScript SDK, it supports data uri base64 images for pushpin icon.

So having an image in your resources, you can convert it to data uri using the following function:

public static string GetDataURL(Image image)
{
    var bytes = (byte[])new ImageConverter().ConvertTo(image, typeof(byte[]));
    return $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
}

And use it as pushpin icon.

Example

In the following example, I suppose you have an WebView2 on your form and you also ave an image called Pin in Properties.Reseources and also you have set your map key in mapKey:

string mapKey = "YOUR MAP KEY";
private async void Form1_Load(object sender, EventArgs e)
{
    var html = $@"
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset=""utf-8"" />
        <script type=""text/javascript"">
        function GetMap() {{
            var map = new Microsoft.Maps.Map('#myMap', {{}});

            var center = new Microsoft.Maps.Location(3.155681, 101.714622);
            map.setView({{
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                center: center,
                zoom: 16
            }});
            //Create custom Pushpin
            var pin = new Microsoft.Maps.Pushpin(center, {{
                icon: '{GetDataURL(Properties.Resources.Pin)}',
                anchor: new Microsoft.Maps.Point(12, 39)
            }});

            //Add the pushpin to the map
            map.entities.push(pin);
        }}
        </script>
        <script type=""text/javascript"" 
          src=""https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={mapKey}""
          async defer></script>
    </head>
    <body>
        <div id=""myMap"" style=""position:relative;width:400px;height:300px;""></div>
    </body>
    </html>";

    await webView21.EnsureCoreWebView2Async();
    webView21.NavigateToString(html);
}
public static string GetDataURL(Image image)
{
    var bytes = (byte[])new ImageConverter().ConvertTo(image, typeof(byte[]));
    return $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
}

And you will see:

And this is the pin image: