Plot graphics based on map coordinates

[stianbl]

Hi there,

Long time since I've been playing around with flash, but now I've got to help a friend out with something.

Basically he have a lot of ships, that he need to plot on a map. The map is just a picture of europe, but the information for each ship is given in coordinates (longitude and latitude), and he want to know if there is a way to plot each ship (represented by a small red dot) on the picture map of europe using the coordinates already given.

Otherwise he would have to go into google earth and locate each position, and then add it, which would be pretty time consuming after a couple hundred ships.

If there are no easy way to do this, would there then be another way to convert the longitude/latitude coordinates into a x/y coordinate system for the picture of the map? (if we know what area the picture covers on the map)

Thanks in advance,

[5TonsOfFlax]

Mapping the lat/long to the image's x/y coordinates IS the easy way. Do you know what sort of projection the map image is? If so, you can find how to turn the lat/long into x/y. Otherwise, just get the lat/long of each corner of the map and interpolate. It'll probably be close enough.

[stianbl]

Thanks for a fast reply

Yes, I'll have to figure out a way to get the lat/long coordinates over to x/y, but that shouldn't be too difficult I think.

The problem then is to get a way to actually plot all these ships.

I think it's around 350 ships that needs to be placed on the map (as red dots on the right coordinate), but I also need a way to sort them according to the year they where taken down.

So:

1. Find a way to put all the ships on the map, given you've already have the coordinates. This should be a function to place them on the map.

2. Somehow keep a system of all the ships and the year they where sunk, so that when I choose the year 1940 it will display only the ships from that year.

How would I do that? Got any simple example of the same thing, but maybe simplified a bit just for me to understand?

It's been quite a long time since I've coded AS3, but when I start to look at it again I'll be able to pick it up pretty quickly I think. But I haven't been using databases like this much before. Or arrays, or what would be the best way to do this function.

Thanks a lot

[stianbl]

I'm not even sure how I'd go ahead to add parameters to the red dots (indicating a ship) to tell it what year it's from. If I could give each ship some more data to work with when doing the sorting it would be much easier. But it's been way too long since last time, and I don't know what to search for.

Also, I'm norwegian, so I might not know the proper functions I need to search for

Any help would be appreciated!

EDIT: Going to read up on arrays, as this is probably the way to go. But any other feedback would be great

[5TonsOfFlax]

"where" != "were".

Sounds like you need a Ship class and an array of these Ships.

public class Ship {
  public var yearSunk:int;
  public var latlong:Point;

  public function Ship(sunk:int = 0, lat:Number = 0, long:Number = 0){
    this.yearSunk = sunk;
    this.latlong = new Point(lat, long);
  }
}

And if you had an array of them, you could sort by year sunk.

//example only.  You should build these from data, probably stored in xml
var ship1:Ship = new Ship(1943, 30, 40.2);
var ship2:Ship = new Ship(1945, 31.7, 41);
var ship1:Ship = new Ship(1946, 32.007, 43.1);

var ships:Array = [ship1, ship2, ship3];

ships.sort(sortByYear);

function sortByYear(a:Ship, b:Ship):int{
  return a.yearSunk - b.yearSunk;
}

The ship class above manages data only. If you wanted to also have it be the display object you put on the screen, it would need to extend Sprite or Shape, and draw itself somehow.

[stianbl]

Ahhh, thanks a lot. I understand now that it's been a while since I've coded AS3, as I totally forgot about defining a class.. :S

Thanks a lot. This really helps me get a better understanding of what I have to do.

Now lets just hope I can manage to get this to work

-

Another question, while we're at it:
If I make all the classes, how can I then sort the ships to only show ships sunk in 1940? If I'm not using an array. Is there a way to select all ships from year 1940, and hide all the others? I bet there are, but I've forgotten :P

Either way, I'll jump straight into it and see if I can get it to work

[5TonsOfFlax]

You need to use some sort of collection. An array or vector is the natural choice. Otherwise you'll end up with a lot of independent variables which just makes it difficult to do things like processing all the ships to find certain ones, or draw them all.

[stianbl]

If it's not too much to ask, could you point me to a tutorial regarding drawing instances or shapes from the position of the ships in my array? Or if it's simple, put up a small code explaining how to do it?

I know this is asking a lot, so I'm not expecting anything. But I had to ask

Either way, thanks a lot for your help! I'll do some more reading..

[5TonsOfFlax]

For simplicity, I will assume that the method of mapping latitude/longitude to screen coordinates is simply the identity function, but I'll isolate it so that you can easily replace that.

Let's make the ships Sprites, so they are DisplayObjects.

public class Ship extends Sprite {
  public var yearSunk:int;
  public var latlong:Point;

  public function Ship(sunk:int = 0, lat:Number = 0, long:Number = 0){
    this.yearSunk = sunk;
    this.latlong = new Point(lat, long);
    this.graphics.beginFill(0xff0000); //red.
    this.graphics.drawCircle(0,0, 5);
    this.graphics.endFill();
  }
  
}

Now, let's put them on the screen.

//example only.  You should build these from data, probably stored in xml
var ship1:Ship = new Ship(1943, 30, 40.2);
var ship2:Ship = new Ship(1945, 31.7, 41);
var ship1:Ship = new Ship(1946, 32.007, 43.1);

var ships:Array = [ship1, ship2, ship3];

ships.sort(sortByYear);

function sortByYear(a:Ship, b:Ship):int{
  return a.yearSunk - b.yearSunk;
}

for (var i:int = 0; i < ships.length; i++){
  var ship:Ship = ships[i];
  setShipXY(ship);
  addChild(ship);
}

//this maps the ships latitude and longitude to screen coordinates and sets its x and y properties.
//If you are doing more sophisticated equations (and you should be), this is where they go.
function setShipXY(s:Ship):void{
  s.x = s.latlong.x;
  s.y = s.latlong.y;
}

[stianbl]

I cant thank you enough for this help. I'd buy you a beer or two if I where in your town mate, but I'll have to keep that for a time in the future if we bump into each other

Thanks again, I'll go though this information and see what I can come up with

[stianbl]

Hmmm, quick question here again

When adding the year to the ship instances, how do I then go and display only ships that where sunk a certain year? :P

Yeah, I really need to read up on AS3 again :S

But thanks for any help

[5TonsOfFlax]

Clear all the ships by removing them with removeChild. Then loop through all the ships and use addChild on all the ships that pass your criteria.

[stianbl]

I will try and write a code for that. I know it's simple, I just don't remember how I did it before, or what to search for. But I'll do my research

Thanks a lot mate