Photoshop Question posted in
The official user guide can be found here.

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

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 5720×5720 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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    If you use MapTiler (http://www.maptiler.com) to create the tiles you have two ways how to achieve what you want:

    A) Map your game map to the artificial world with Lat/Lon coordinates

    In this case you will map the world coordinates to your pixel coordinates. The tiles must be prepared in a correct way, same as those for real world maps.

    To create the tiles with MapTiler you should follow this steps:

    1. Choose “Mercator tiles” in the first step
    2. Drop in your image file
    3. Choose “Web mercator (EPSG:3857)” in the dropdown in the “Coordinate system” dialog – it is a square image of the whole world and you don’t want to deform it.
    4. Choose “Bounding box (West South East North)” in the dialog “Geographical location” and copy&paste in the input the world coordinates: “-20037508.342789244 -20037508.342789244 20037508.342789244 20037508.342789244”
    5. Render the tiles

    With this approach you can load the tiles in your Bing Maps WPF control and position the markers or other data by using Lat/Lon coordinates.
    The point [0,0] is going to be center of the image, and you can calculate the other lat/lon coordinates appropriately.
    See this page and source code down on the page:
    http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/
    The globalmaptiles.py code embedded in the page is available in different languages including C# (.cs) if you need it. It has been ported by other people from our code.

    B) Stay in raster coordinates

    A different approach – where you create the map tiles in the original raster coordinates of the input file. There are no Lat/Lon involved, coordinate system is in pixels and you can draw markers and polygons in pixel coordinates as well. MapTiler gives you sample JavaScript viewer in Leaflet and in OpenLayers. Other viewers you have to patch yourself for using with pixel coordinates. To generate the tiles just choose “Raster tiles” – as in this tutorial: http://youtu.be/9iYKmRsGoxg?list=PLGHe6Moaz52PiQd1mO-S9QrCjqSn1v-ay
    I expect the tiles made with your Photoshop plugin are going to be similar to the raster coordinates made with MapTiler.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search