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.
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:
Assuming you are using WPF Bing Maps control, you need to convert your resource image to a WPF BitmapImage, then create a WPF Image control and add it to a MapLayer and then show on the map.
Assuming you have already followed the steps to use WPF Bing Maps in Windows Forms, also assuming you have an image file called for example Logo.png in Resources.Resx, then you can use the following code to add the image to the map:
//using Microsoft.Maps.MapControl.WPF;
//using System;
//using System.IO;
//using System.Windows.Controls;
//using System.Windows.Forms;
//using System.Windows.Media.Imaging;
private void Form1_Load(object sender, EventArgs e)
{
this.userControl11.myMap.AnimationLevel = AnimationLevel.Full;
this.userControl11.myMap.Loaded += MyMap_Loaded;
}
private void MyMap_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
MapLayer imageLayer = new MapLayer();
var resxImage = Properties.Resources.Pin;
var image = new Image() { Width = resxImage.Width, Height = resxImage.Height };
var bmp = new BitmapImage();
using (var ms = new MemoryStream())
{
resxImage.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
ms.Position = 0;
bmp.BeginInit();
bmp.StreamSource = ms;
bmp.CacheOption = BitmapCacheOption.OnLoad;
bmp.EndInit();
bmp.Freeze();
}
image.Source = bmp;
var location = new Location(3.155681, 101.714622);
PositionOrigin position = PositionOrigin.BottomLeft;
imageLayer.AddChild(image, location, position);
this.userControl11.myMap.SetView(location, 16);
this.userControl11.myMap.Children.Add(imageLayer);
}
And this is the result:
Here is the image that I have in resources:
