WPF 2010 Static map

Question

Hi All,

I am creating a WPF application in .net 4.0.

Basically I want to have a map of the world (2d) where by I can place images on, depending on their country location. This map can be an image however, it would be hard to determine the co-ordinates for the location right?

Can someone provide me with the simplest way of doing this?

Thanks!

Chris

Answer 1

I would do this by placing the image/shape object in Canvas Panel (panel with coordinates system) also I would add a wpf toolkit zoomviewer to get nice panning and zooming of the map.

Then I would make a Dictionary where key is a name of the country and value is a Point where pictures should be placed.

Answer 2

There are many solutions to this, all depending on your design (and tastes).

In all cases, the thing to remember is that the placement of the items on the map will always be relative to the size of the map, and will need to be recalculated whenever the size of the background map is changed. This calculation will be depend on the map itself (i.e. is it a rectangle or round, is the latitude/longitude a fixed and equal grid, the layout of the map, etc.).

One possible way to set up the main window is something like this:

This assumes that there is a folder called "Resources" that contains an image called "world-map.jpg", with its Build Action set to Resource.

Then, in your code behind, you would have to have something that actually adds a new image to the map in the appropriate place.

Personally, I would probably create a class (perhaps a custom or user control) to hold the image information, including the latitude/longitude, an Image object, etc. The main window (or ViewModel) would have a collection of these objects, which would make it easier to put them in the right places when a resize occurred. For example:

public partial class Window1 : Window 
{
    ObservableCollection<MyMapImageClass> mapImages = new ObservableCollection<MyMapImageClass>();

    public Window1()
    {
        InitializeComponent();
        layout.SizeChanged += new SizeChangedEventHandler(layout_SizeChanged);
    }

    void layout_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        foreach (MyMapImageClass mapImage in mapImages)
        {
             Point point = CalculateImagePosition(mapImage.latitude, mapImage.longitude);
             mapImage.Image.SetValue(Canvas.LeftProperty, point.X);
             mapImage.Image.SetValue(Canvas.TopProperty, point.Y);
        }
    }

    Point CalculateImagePlacement(double latitude, double longitude)
    {
        Point point = new Point();

        // Do the calculations appropriate to your map
        point.X = LongCalculation(longitude);
        point.Y = LatCalculation(latitude);
    }


    void PlaceImage(double latitude, double longitude)
    {
        Image img = new Image();
        ImageSourceConverter converter = new ImageSourceConverter();
        string path = "pack://application:,,,/Resources/SomeImage.png";
        ImageSource source = (ImageSource)converter.ConvertFromString(path);
        img.Source = source;
        img.Width = 10d;

        Point point = CalculateImagePlacement(latitude, longitude);

        img.SetValue(Canvas.LeftProperty, point.X);
        img.SetValue(Canvas.TopProperty, point.Y);

        layout.Children.Add(img);

        MyMapImageClass mapImage = new MyMapImageClass();
        mapImage.Latitude = latitude;
        mapImage.Longitude = longitude;
        mapImage.Image = img;
        mapImages.Add(mapImage);
    }
}