Plot a known pixel (x,y) from original image using custom Bing Maps WPF tiles

Question

I am trying to use the Bing Maps WPF control to render custom map tiles from an image of a fictional game world map, but I also need to plot X,Y values on the map from the original world image (sort of like an in-world GPS).

The image is 5720x5720 and I already have working (in a different application) a function that manually crops, scales and redraws sections of the image and plots the pixelX and pixelY coordinates in a PictureBox. I would like to get the same functionality working using the map control.

I used this Photoshop plugin to cut the tiles from the original custom image (works like maptiler for google mapes) https://github.com/bramus/photoshop-google-maps-tile-cutter/

The problem is I know the X,Y values to plot from the original image, but I'm not not quite sure how to calculate Lat/Long for drawing a point in the custom tile system.

<m:Map Name="Map">
        <m:Map.Mode>
            <!-- set empty map mode, i.e. remove default map layer -->
            <m:MercatorMode/>
        </m:Map.Mode>
        <local:MyTileLayer UriFormat="file:///C:/map_tiles/{z}_{x}_{y}.jpg"/>
</m:Map>

The map is displaying great and everything looks fine using the custom map tiles. I found this link that provides a class for converting PixelXY to LatLong in the TileSystem, but they are all for realistic world points.

https://msdn.microsoft.com/en-us/library/bb259689.aspx

My custom map tiles are actually for a fictional map for a game so I don't believe the projection and earth-curvature calculations are needed in my situation.

How might I go about plotting a point accurately in the Bing Maps WPF control if I only know the X,Y pixel coordinates from the original untiled image?

When the Bing Maps control displays your custom map tiles without distortion, it seems obvious that your map also uses a Mercator transform. There is no need to use any other than the built-in coordinate transforms. — Clemens
I have tried using "ArielMode" and "Road" as well but all of them are giving the wrong point at which I know the pixel X,Y is on the original image. I've tried every mode with Map.ViewportPointToLocation as well as TileSystem.PixelXYToLatLong. TileSystem.PixelXYToLatLong is at least plotting a point that is on the map (still wrong though), the Map.ViewPortPointToLocation is not even giving a coordinate location on the map. — Josh

Clemens Clemens · Accepted Answer · 2015-02-01T23:34:16

Given that your 5720x5720px map image covers the standard Bing Maps (or Google Maps or OpenStreetMap) coordinate range of longitude = -180..180 and latitude = -85.0511..85.0511, the following method would convert from image pixel coordinates to lat/lon according to the Mercator projection:

public static void PixelXYToLatLon(
    double pixelX, double pixelY, out double latitude, out double longitude)
{
    var imageSize = 5720d;
    var maxLatitude = 85.05112878; // = Math.Atan(Math.Sinh(Math.PI)) / Math.PI * 180d;
    var y = (0.5 - pixelY / imageSize) * (2d * maxLatitude);
    latitude = Math.Atan(Math.Sinh(y * Math.PI / 180d)) / Math.PI * 180d;
    longitude = (pixelX / imageSize - 0.5) * 360d;
}

The imageSize variable might of course also be a method parameter.

Plot a known pixel (x,y) from original image using custom Bing Maps WPF tiles

2 Answers