First drawing project, plotting points on UK map

[Mondeo]

This is the first time ive done anything with the drawing classes so bear with me!

Basically I have a jpeg of a map of the UK, I want to display this on a windows form, thats the first thing.

Then in a database I have loads of members details, for each member there is also "easting" and "northing" which are ordanance survey grid references and relate I believe to the number of metres north and east from a point somewhere in the sea to the bottom left of the map.

For example 37570 E and 42860 N refers to Accrington, Lancashire.

Basically im looking to do a function that takes the northing and easting values and plots a point on the jpeg map.

How would I go about something like this, im not looking for the code to do it (although that would be nice lol), just the correct basic steps and ill work it out as a learning exercise.

Many thanks
Ben

 

[snarfblam]

Not sure if you are looking for help with graphics or with math, so here is both.

Basically you are converting between two Cartesian coordinate systems. This isnt exactly true, because the earth is not flat and traveling north 100 miles then east 100 miles will get you to a different place than traveling east 100 miles then north 100 miles, but if the map is a small enough scale, this shouldnt be a big problem.

You need to figure out the scale and offset. How many pixels equals how many meters (this may be different for horizontal coordinates and vertical coordinates), and where is the "northing"/"easting" point 0,0 on the map image? Once you know these things you can use a standard Cartesian coordinate conversion formula.

Say you determine that each pixel equals one kilometer. The scale is 1 pixel = 1000 meters (but since "northing" counts up going north and pixel coordinates count down going "north" the Y scale is 1 pixel = -1000 meters). And say the "northing"/"easting" location of 0,0 appears on pixel 0, 200 on your map. Your scale is 1,1 : 1000,-1000 and your offset is 0, 200.

So, say you have the easting = 20,000 meters and northing = 25,000 meters. First you multiply by the scale (see image... algebra rocks). Of course, you dont need to use the units when you do the math in your program, but on paper it helps you sort out what gets multiplied by what and what gets divided by what.

Then you take the scaled coordinate (20, -25) and you add the offset (0, 200) and you get (20, 175). Your physical location (20000, 25000) translates into screen coordinates (20, 175).

You want to load the image (of course). This is simple enough (C#: Image myImage = new Image(filename). Like I said, the earth is round, so you might need to modify the math a little, but once you get the coordinates, you just create a graphics object (use Graphics.FromImage(myImage)) and use that to draw your dot. Say you want to draw a red circle at 20, 175 with a radius of 5. You would do this:

C#

int x = 20;
int y = 175;
[COLOR="Green"]// Note that you offset the coordinate in
// order to center the dot.[/COLOR]
myGraphics.FillCircle(Brushes.Red, x - 2, y - 2, 5, 5);
[COLOR="Green"]// Color, x, y, width, height[/COLOR]

Hope that helps, rather than confusing you. For me math and graphics come very easily, but not everyone is me.

 

[Mondeo]

Thanks a lot.

Works a treat!