Creating a POI map in Windows Forms C#. How can I put icon (image) over a map (existing image in picturebox)?

Question

I'm working on a school project and there is a task where I need to create a POI map. This is how would I do it: I need to load a picture (map of some place, it can be just an image of stadium from bird perspective) in picturebox control, then have a click event on picturebox to take coordinates, and put on that coordinates another image (like some small custom icon, etc.).

Of course, while putting that image, I don't want to replace existing image (map) in picturebox, but to make one image over existing one. Also, I will need to remember where I put those "POI icons" later in the database, but that's not the part of this problem question. What do you guys think, is it possible to do that (image, with specific coordinates, over another image that already filled picturebox) or I need to make another "idea" how to solve my problem? If is possible, how can I do it (code with the example would be much appreciated)? If isn't possible, can you give me some advice how to do it different maybe (other WinForms controls, other events, etc.)? Thank you in advance and pardon the grammatical mistakes.

Answer 1

Try this (sorry for my bad English):

public partial class Form1 : Form
{
    public Form1()
    {
        //InitializeComponent();
        Width = 800;
        Height = 600;

        pictureBox = new PictureBox { Parent = this, Dock = DockStyle.Top, Height = 500 };
        pictureBox.ImageLocation = "pic.jpg";

        pictureBox.Click += PictureBox_Click;
    }

    PictureBox pictureBox;
    List<Point> points = new List<Point>();

    private void PictureBox_Click(object sender, EventArgs e)
    {
        var point = pictureBox.PointToClient(MousePosition);
        points.Add(point);
        var iconBox = new PictureBox { Parent = pictureBox, Location = point, Size = new Size(32, 32) };
        iconBox.Image = SystemIcons.Hand.ToBitmap();
        iconBox.Click += IconBox_Click;
    }

    private void IconBox_Click(object sender, EventArgs e)
    {
        var pb = (PictureBox)sender;
        points.Remove(pb.Location);
        pb.Parent = null;
        pb.Click -= IconBox_Click;
        pb.Dispose();
    }
}

In the Click event handler we create a new PictureBox and put it on the main PictureBox. Set him the desired image (I used the system icon for simplicity).

Also add a click handler for each new PictureBox, that to remove it with mouse click. In its handler, we remove became unnecessary PictureBox from the list and from the parent control. Unsubscribe from the event. Then dispose it.

You can save a list of points into a database or a file.