Merge branch 'develop' into 1124_Mark_Sequence_From_RaceXML

# Conflicts:
#	src/main/java/seng302/gameServer/GameState.java
#	src/main/java/seng302/gameServer/server/simulator/Simulator.java
#	src/main/java/seng302/models/mark/Mark.java
#	src/main/java/seng302/visualiser/map/CanvasMap.java

src/main/java/seng302/visualiser/ClientToServerThread.java

@@ -0,0 +1,255 @@
+package seng302.visualiser;
+
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.OutputStream;
+import java.net.Socket;
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Queue;
+import java.util.concurrent.ConcurrentLinkedQueue;
+import java.util.zip.CRC32;
+import java.util.zip.Checksum;
+import javafx.application.Platform;
+import javafx.scene.control.Alert;
+import javafx.scene.control.Alert.AlertType;
+import seng302.model.stream.packets.StreamPacket;
+import seng302.gameServer.server.messages.BoatActionMessage;
+import seng302.gameServer.server.messages.Message;
+
+/**
+ * A class describing a single connection to a Server for the purposes of sending and receiving on
+ * its own thread.
+ */
+public class ClientToServerThread implements Runnable {
+
+    /**
+     * Functional interface for receiving packets from client socket.
+     */
+    @FunctionalInterface
+    public interface ClientSocketListener {
+        void newPacket();
+    }
+
+    private class ByteReadException extends Exception {
+        private ByteReadException(String message) {
+            super(message);
+        }
+    }
+
+    private static final int LOG_LEVEL = 1;
+
+    private Queue<StreamPacket> streamPackets = new ConcurrentLinkedQueue<>();
+    private List<ClientSocketListener> listeners = new ArrayList<>();
+    private Thread thread;
+
+    private Socket socket;
+    private InputStream is;
+    private OutputStream os;
+
+    private int clientId;
+
+//    private Boolean updateClient = true;
+    private ByteArrayOutputStream crcBuffer;
+    private boolean socketOpen = true;
+
+    /**
+     * Constructor for ClientToServerThread which takes in ipAddress and portNumber and attempts to
+     * connect to the specified ipAddress and port.
+     *
+     * Upon successful socket connection, threeWayHandshake will be preformed and the instance will
+     * be put on a thread and run immediately.
+     *
+     * @param ipAddress a string of ip address to be connected to
+     * @param portNumber an integer port number
+     * @throws IOException SocketConnection if fail to connect to ip address and port number
+     * combination
+     */
+    public ClientToServerThread(String ipAddress, Integer portNumber) throws IOException {
+        socket = new Socket(ipAddress, portNumber);
+        is = socket.getInputStream();
+        os = socket.getOutputStream();
+        Integer allocatedID = threeWayHandshake();
+        if (allocatedID != null) {
+            clientId = allocatedID;
+            clientLog("Successful handshake. Allocated ID: " + clientId, 1);
+        } else {
+            clientLog("Unsuccessful handshake", 1);
+            closeSocket();
+            return;
+        }
+
+        thread = new Thread(this);
+        thread.start();
+    }
+
+    /**
+     * Prints out log messages and the time happened.
+     * Only perform task if log level is below LOG_LEVEL variable.
+     *
+     * @param message a string of message to be printed out
+     * @param logLevel an int for log level
+     */
+    static void clientLog(String message, int logLevel) {
+        if (logLevel <= LOG_LEVEL) {
+            System.out.println(
+                "[CLIENT " + LocalDateTime.now().toLocalTime().toString() + "] " + message);
+        }
+    }
+
+    /**
+     * Perform the thread loop. It exits the loop if ClientState connected to host
+     * variable is false.
+     */
+    public void run() {
+        int sync1;
+        int sync2;
+        // TODO: 14/07/17 wmu16 - Work out how to fix this while loop
+        while(socketOpen) {
+            try {
+                crcBuffer = new ByteArrayOutputStream();
+                sync1 = readByte();
+                sync2 = readByte();
+                //checking if it is the start of the packet
+                if (sync1 == 0x47 && sync2 == 0x83) {
+                    int type = readByte();
+                    //No. of milliseconds since Jan 1st 1970
+                    long timeStamp = Message.bytesToLong(getBytes(6));
+                    skipBytes(4);
+                    long payloadLength = Message.bytesToLong(getBytes(2));
+                    byte[] payload = getBytes((int) payloadLength);
+                    Checksum checksum = new CRC32();
+                    checksum.update(crcBuffer.toByteArray(), 0, crcBuffer.size());
+                    long computedCrc = checksum.getValue();
+                    long packetCrc = Message.bytesToLong(getBytes(4));
+                    if (computedCrc == packetCrc) {
+                        if (streamPackets.size() > 0) {
+                            streamPackets.add(new StreamPacket(type, payloadLength, timeStamp, payload));
+                        } else {
+                            streamPackets.add(new StreamPacket(type, payloadLength, timeStamp, payload));
+                            for (ClientSocketListener csl : listeners)
+                                csl.newPacket();
+                        }
+                    } else {
+                        clientLog("Packet has been dropped", 1);
+                    }
+                }
+            } catch (ByteReadException e) {
+                closeSocket();
+                Platform.runLater(() -> {
+                    Alert alert = new Alert(AlertType.ERROR);
+                    alert.setHeaderText("Host has disconnected");
+                    alert.setContentText("Cannot find Server");
+                    alert.showAndWait();
+                });
+                clientLog(e.getMessage(), 1);
+                return;
+            }
+//            System.out.println("streamPackets = " + streamPackets.size());
+        }
+        closeSocket();
+        clientLog("Closed connection to Server", 0);
+    }
+
+
+    /**
+     * Listens for an allocated sourceID and returns it to the server
+     *
+     * @return the sourceID allocated to us by the server
+     */
+    private Integer threeWayHandshake() {
+        Integer ourSourceID = null;
+        while (true) {
+            try {
+                ourSourceID = is.read();
+            } catch (IOException e) {
+                clientLog("Three way handshake failed", 1);
+            }
+            if (ourSourceID != null) {
+                try {
+                    os.write(ourSourceID);
+                    return ourSourceID;
+                } catch (IOException e) {
+                    clientLog("Three way handshake failed", 1);
+                    return null;
+                }
+            }
+        }
+    }
+
+
+    /**
+     * Send the post-start race course information
+     * @param boatActionMessage The message to send
+     */
+    public void sendBoatActionMessage(BoatActionMessage boatActionMessage) {
+        try {
+            os.write(boatActionMessage.getBuffer());
+        } catch (IOException e) {
+            clientLog("Could not write to server", 1);
+        }
+    }
+
+
+    private void closeSocket() {
+        try {
+            socket.close();
+        } catch (IOException e) {
+            clientLog("Failed to close the socket", 1);
+        }
+    }
+
+    public void setSocketToClose () {
+        socketOpen = false;
+    }
+
+    public Queue<StreamPacket> getPacketQueue () {
+        return streamPackets;
+    }
+
+    public void addStreamObserver (ClientSocketListener streamListener) {
+        listeners.add(streamListener);
+    }
+
+    public void removeStreamObserver (ClientSocketListener streamListener) {
+        listeners.remove(streamListener);
+    }
+
+    private int readByte() throws ByteReadException {
+        int currentByte = -1;
+        try {
+            currentByte = is.read();
+            crcBuffer.write(currentByte);
+        } catch (IOException e) {
+            clientLog("Read byte failed", 1);
+        }
+        if (currentByte == -1) {
+            throw new ByteReadException("InputStream reach end of stream");
+        }
+        return currentByte;
+    }
+
+    private byte[] getBytes(int n) throws ByteReadException {
+        byte[] bytes = new byte[n];
+        for (int i = 0; i < n; i++) {
+            bytes[i] = (byte) readByte();
+        }
+        return bytes;
+    }
+
+    private void skipBytes(long n) throws ByteReadException {
+        for (int i = 0; i < n; i++) {
+            readByte();
+        }
+    }
+
+    public Thread getThread() {
+        return thread;
+    }
+
+    public int getClientId () {
+        return clientId;
+    }
+}

src/main/java/seng302/visualiser/GameClient.java

@@ -0,0 +1,325 @@
+package seng302.visualiser;
+
+import java.io.IOException;
+import java.time.ZoneId;
+import java.time.ZoneOffset;
+import java.util.Map;
+import java.util.TimeZone;
+import javafx.application.Platform;
+import javafx.collections.FXCollections;
+import javafx.collections.ObservableList;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Node;
+import javafx.scene.input.KeyEvent;
+import javafx.scene.layout.Pane;
+import seng302.gameServer.MainServerThread;
+import seng302.model.RaceState;
+import seng302.model.Yacht;
+import seng302.model.stream.packets.StreamPacket;
+import seng302.model.stream.parser.MarkRoundingData;
+import seng302.model.stream.parser.PositionUpdateData;
+import seng302.model.stream.parser.PositionUpdateData.DeviceType;
+import seng302.model.stream.parser.RaceStatusData;
+import seng302.model.stream.xml.parser.RaceXMLData;
+import seng302.model.stream.xml.parser.RegattaXMLData;
+import seng302.gameServer.server.messages.BoatActionMessage;
+import seng302.gameServer.server.messages.BoatActionType;
+import seng302.utilities.StreamParser;
+import seng302.utilities.XMLParser;
+import seng302.visualiser.controllers.LobbyController;
+import seng302.visualiser.controllers.LobbyController.CloseStatus;
+import seng302.visualiser.controllers.RaceViewController;
+
+/**
+ * Created by cir27 on 20/07/17.
+ */
+public class GameClient {
+
+    private Pane holderPane;
+    private ClientToServerThread socketThread;
+    private MainServerThread server;
+
+    private RaceViewController raceView;
+
+    private Map<Integer, Yacht> allBoatsMap;
+    private RegattaXMLData regattaData;
+    private RaceXMLData courseData;
+    private RaceState raceState = new RaceState();
+
+    private ObservableList<String> clientLobbyList = FXCollections.observableArrayList();
+
+    private long lastSendingTime;
+    private int KEY_STROKE_SENDING_FREQUENCY = 50;
+
+    public GameClient(Pane holder) {
+        this.holderPane = holder;
+    }
+
+    public void runAsClient(String ipAddress, Integer portNumber) {
+        try {
+            socketThread = new ClientToServerThread(ipAddress, portNumber);
+        } catch (IOException ioe) {
+            ioe.printStackTrace();
+            System.out.println("Unable to connect to host...");
+        }
+        socketThread.addStreamObserver(this::parsePackets);
+        LobbyController lobbyController = loadLobby();
+        lobbyController.setPlayerListSource(clientLobbyList);
+        lobbyController.disableReadyButton();
+        lobbyController.setTitle("Connected to host - IP : " + ipAddress + " Port : " + portNumber);
+        lobbyController.addCloseListener((exitCause) -> this.loadStartScreen());
+    }
+
+    public void runAsHost(String ipAddress, Integer portNumber) {
+        server = new MainServerThread();
+        try {
+            socketThread = new ClientToServerThread(ipAddress, portNumber);
+        } catch (IOException ioe) {
+            ioe.printStackTrace();
+            System.out.println("Unable to make local connection to host...");
+        }
+        socketThread.addStreamObserver(this::parsePackets);
+        LobbyController lobbyController = loadLobby();
+        lobbyController.setPlayerListSource(clientLobbyList);
+        lobbyController.setTitle("Hosting Lobby - IP : " + ipAddress + " Port : " + portNumber);
+        lobbyController.addCloseListener(exitCause -> {
+            if (exitCause == CloseStatus.READY) {
+                server.startGame();
+            } else if (exitCause == CloseStatus.LEAVE) {
+                loadStartScreen();
+            }
+        });
+    }
+
+    private void loadStartScreen() {
+        socketThread.setSocketToClose();
+        socketThread = null;
+        if (server != null) {
+            // TODO: 26/07/17 cir27 - handle disconnecting
+//            server.shutDown();
+            server = null;
+        }
+        FXMLLoader fxmlLoader = new FXMLLoader(
+            getClass().getResource("/views/StartScreenView.fxml"));
+        try {
+            holderPane.getChildren().clear();
+            holderPane.getChildren().add(fxmlLoader.load());
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }
+
+    /**
+     * Loads a view of the lobby into the clients pane
+     *
+     * @return the lobby controller.
+     */
+    private LobbyController loadLobby() {
+        FXMLLoader fxmlLoader = new FXMLLoader(GameClient.class.getResource("/views/LobbyView.fxml"));
+        try {
+            holderPane.getChildren().clear();
+            holderPane.getChildren().add(fxmlLoader.load());
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+        return fxmlLoader.getController();
+    }
+
+    private void loadRaceView() {
+        FXMLLoader fxmlLoader = new FXMLLoader(
+            RaceViewController.class.getResource("/views/RaceView.fxml"));
+        try {
+            final Node node = fxmlLoader.load();
+            Platform.runLater(() -> {
+                holderPane.getChildren().clear();
+                holderPane.getChildren().add(node);
+            });
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+        holderPane.getScene().setOnKeyPressed(this::keyPressed);
+        holderPane.getScene().setOnKeyReleased(this::keyReleased);
+        raceView = fxmlLoader.getController();
+        Yacht player = allBoatsMap.get(socketThread.getClientId());
+        raceView.loadRace(allBoatsMap, courseData, raceState, player);
+    }
+
+    private void parsePackets() {
+        while (socketThread.getPacketQueue().peek() != null) {
+            StreamPacket packet = socketThread.getPacketQueue().poll();
+            switch (packet.getType()) {
+                case RACE_STATUS:
+                    processRaceStatusUpdate(StreamParser.extractRaceStatus(packet));
+                    startRaceIfAllDataReceived();
+                    break;
+
+                case REGATTA_XML:
+                    regattaData = XMLParser.parseRegatta(
+                        StreamParser.extractXmlMessage(packet)
+                    );
+                    raceState.setTimeZone(
+                        TimeZone.getTimeZone(
+                            ZoneId.ofOffset("UTC", ZoneOffset.ofHours(regattaData.getUtcOffset()))
+                        )
+                    );
+                    break;
+
+                case RACE_XML:
+                    courseData = XMLParser.parseRace(
+                        StreamParser.extractXmlMessage(packet)
+                    );
+                    if (raceView != null) {
+                        raceView.updateRaceData(courseData);
+                    }
+                    break;
+
+                case BOAT_XML:
+                    System.out.println("GOT SUM BOATS YAY :)");
+                    allBoatsMap = XMLParser.parseBoats(
+                        StreamParser.extractXmlMessage(packet)
+                    );
+                    clientLobbyList.clear();
+                    allBoatsMap.forEach((id, boat) -> {
+                        clientLobbyList.add(id + " " + boat.getBoatName());
+//                        System.out.println(id + " " + boat.getBoatName());
+
+                    });
+//                    startRaceIfAllDataReceived();
+                    break;
+
+                case RACE_START_STATUS:
+                    raceState.updateState(StreamParser.extractRaceStartStatus(packet));
+                    break;
+
+                case BOAT_LOCATION:
+                    updatePosition(StreamParser.extractBoatLocation(packet));
+                    break;
+
+                case MARK_ROUNDING:
+                    updateMarkRounding(StreamParser.extractMarkRounding(packet));
+                    break;
+            }
+        }
+    }
+
+    private void startRaceIfAllDataReceived() {
+        if (allXMLReceived() && raceView == null)
+            loadRaceView();
+    }
+
+    private boolean allXMLReceived() {
+        return courseData != null && allBoatsMap != null && regattaData != null;
+    }
+
+    /**
+     * Updates the position of a boat. Boat and position are given in the provided data.
+     */
+    private void updatePosition(PositionUpdateData positionData) {
+        if (positionData.getType() == DeviceType.YACHT_TYPE) {
+            if (allXMLReceived() && allBoatsMap.containsKey(positionData.getDeviceId())) {
+                Yacht yacht = allBoatsMap.get(positionData.getDeviceId());
+                yacht.updateLocation(positionData.getLat(),
+                    positionData.getLon(), positionData.getHeading(),
+                    positionData.getGroundSpeed());
+            }
+        } else if (positionData.getType() == DeviceType.MARK_TYPE) {
+            //CompoundMark mark = courseData.getCompoundMarks().get(positionData.getDeviceId());
+        }
+    }
+
+    /**
+     * Updates the boat as having passed the mark. Boat and mark are given by the ids in the
+     * provided data.
+     *
+     * @param roundingData Contains data for the rounding of a mark.
+     */
+    private void updateMarkRounding(MarkRoundingData roundingData) {
+        if (allXMLReceived()) {
+            Yacht yacht = allBoatsMap.get(roundingData.getBoatId());
+            yacht.setMarkRoundingTime(roundingData.getTimeStamp());
+            yacht.updateTimeSinceLastMarkProperty(
+                raceState.getRaceTime() - roundingData.getTimeStamp());
+            yacht.setLastMarkRounded(
+                courseData.getCompoundMarks().get(
+                    roundingData.getMarkId()
+                )
+            );
+        }
+    }
+
+    private void processRaceStatusUpdate(RaceStatusData data) {
+        if (allXMLReceived()) {
+            raceState.updateState(data);
+            for (long[] boatData : data.getBoatData()) {
+                Yacht yacht = allBoatsMap.get((int) boatData[0]);
+                yacht.setEstimateTimeTillNextMark(raceState.getRaceTime() - boatData[1]);
+                yacht.setEstimateTimeAtFinish(boatData[2]);
+                int legNumber = (int) boatData[3];
+                yacht.setLegNumber(legNumber);
+                yacht.setBoatStatus((int) boatData[4]);
+                if (legNumber != yacht.getLegNumber()) {
+                    int placing = 1;
+                    for (Yacht otherYacht : allBoatsMap.values()) {
+                        if (otherYacht.getSourceId() != boatData[0] &&
+                            yacht.getLegNumber() <= otherYacht.getLegNumber())
+                            placing++;
+                    }
+                    yacht.setPositionInteger(placing);
+                }
+            }
+        }
+    }
+
+    private void close() {
+        socketThread.setSocketToClose();
+    }
+
+
+    /**
+     * Handle the key-pressed event from the text field.
+     * @param e The key event triggering this call
+     */
+    public void keyPressed(KeyEvent e) {
+        BoatActionMessage boatActionMessage;
+        long currentTime = System.currentTimeMillis();
+        if (currentTime - lastSendingTime > KEY_STROKE_SENDING_FREQUENCY) {
+            lastSendingTime = currentTime;
+            switch (e.getCode()) {
+                case SPACE: // align with vmg
+                    boatActionMessage = new BoatActionMessage(BoatActionType.VMG);
+                    socketThread.sendBoatActionMessage(boatActionMessage);
+                    break;
+                case PAGE_UP: // upwind
+                    boatActionMessage = new BoatActionMessage(BoatActionType.UPWIND);
+                    socketThread.sendBoatActionMessage(boatActionMessage);
+                    break;
+                case PAGE_DOWN: // downwind
+                    boatActionMessage = new BoatActionMessage(BoatActionType.DOWNWIND);
+                    socketThread.sendBoatActionMessage(boatActionMessage);
+                    break;
+                case ENTER: // tack/gybe
+                    boatActionMessage = new BoatActionMessage(BoatActionType.TACK_GYBE);
+                    socketThread.sendBoatActionMessage(boatActionMessage);
+                    break;
+                //TODO Allow a zoom in and zoom out methods
+                case Z:  // zoom in
+                    System.out.println("Zoom in");
+                    break;
+                case X:  // zoom out
+                    System.out.println("Zoom out");
+                    break;
+            }
+        }
+    }
+
+    public void keyReleased(KeyEvent e) {
+        switch (e.getCode()) {
+            //TODO 12/07/17 Determine the sail state and send the appropriate packet (eg. if sails are in, send a sail out packet)
+            case SHIFT:  // sails in/sails out
+                BoatActionMessage boatActionMessage = new BoatActionMessage(
+                    BoatActionType.SAILS_IN);
+                socketThread.sendBoatActionMessage(boatActionMessage);
+                break;
+        }
+    }
+}

src/main/java/seng302/visualiser/GameView.java

@@ -0,0 +1,586 @@
+package seng302.visualiser;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Comparator;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import javafx.animation.AnimationTimer;
+import javafx.application.Platform;
+import javafx.collections.ObservableList;
+import javafx.geometry.Point2D;
+import javafx.scene.Group;
+import javafx.scene.Node;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.Pane;
+import javafx.scene.paint.Color;
+import javafx.scene.paint.Paint;
+import javafx.scene.shape.Polygon;
+import javafx.scene.text.Text;
+import seng302.model.Colors;
+import seng302.model.GeoPoint;
+import seng302.model.Limit;
+import seng302.model.Yacht;
+import seng302.model.mark.CompoundMark;
+import seng302.model.mark.Corner;
+import seng302.model.mark.Mark;
+import seng302.utilities.GeoUtility;
+import seng302.visualiser.fxObjects.AnnotationBox;
+import seng302.visualiser.fxObjects.BoatObject;
+import seng302.visualiser.fxObjects.CourseBoundary;
+import seng302.visualiser.fxObjects.Gate;
+import seng302.visualiser.fxObjects.Marker;
+import seng302.visualiser.map.Boundary;
+import seng302.visualiser.map.CanvasMap;
+
+/**
+ * Created by cir27 on 20/07/17.
+ */
+public class GameView extends Pane {
+
+    private double bufferSize   = 50;
+    private double panelWidth   = 1260; // it should be 1280 but, minors 40 to cancel the bias.
+    private double panelHeight  = 960;
+    private double canvasWidth  = 1100;
+    private double canvasHeight = 920;
+    private boolean horizontalInversion = false;
+
+    private double distanceScaleFactor;
+    private ScaleDirection scaleDirection;
+    private GeoPoint minLatPoint, minLonPoint, maxLatPoint, maxLonPoint;
+    private double referencePointX, referencePointY;
+    private double metersPerPixelX, metersPerPixelY;
+
+    private Text fpsDisplay = new Text();
+    private Polygon raceBorder = new CourseBoundary();
+
+    /* Note that if either of these is null then values for it have not been added and the other
+       should be used as the limits of the map. */
+    private List<Limit> borderPoints;
+    private Map<Mark, Marker> markerObjects;
+
+    private Map<Yacht, BoatObject> boatObjects = new HashMap<>();
+    private Map<Yacht, AnnotationBox> annotations = new HashMap<>();
+    private ObservableList<Node> gameObjects;
+    private Group annotationsGroup = new Group();
+    private Group wakesGroup = new Group();
+    private Group boatObjectGroup = new Group();
+    private Group trails = new Group();
+    private Group markers = new Group();
+
+    private ImageView mapImage = new ImageView();
+
+    //FRAME RATE
+
+    private AnimationTimer timer;
+    private int NUM_SAMPLES = 10;
+    private final long[] frameTimes = new long[NUM_SAMPLES];
+    private Double frameRate = 60.0;
+    private int frameTimeIndex = 0;
+    private boolean arrayFilled = false;
+
+    private enum ScaleDirection {
+        HORIZONTAL,
+        VERTICAL
+    }
+
+    public GameView () {
+        gameObjects = this.getChildren();
+        // create image view for map, bind panel size to image
+        gameObjects.add(mapImage);
+        fpsDisplay.setLayoutX(5);
+        fpsDisplay.setLayoutY(20);
+        fpsDisplay.setStrokeWidth(2);
+        gameObjects.add(fpsDisplay);
+        gameObjects.add(raceBorder);
+        gameObjects.add(markers);
+        initializeTimer();
+    }
+
+    private void initializeTimer () {
+        Arrays.fill(frameTimes, 1_000_000_000 / 60);
+        timer = new AnimationTimer() {
+            private long lastTime = 0;
+            private int FPSCount = 30;
+            private Double frameRate = 60.0;
+            private int index = 0;
+            private boolean arrayFilled = false;
+            private long sum = 1_000_000_000 / 3;
+
+            @Override
+            public void handle(long now) {
+                if (lastTime == 0) {
+                    lastTime = now;
+                } else {
+                    if (now - lastTime >= (1e8 / 60)) { //Fix for framerate going above 60 when minimized
+                        long oldFrameTime = frameTimes[frameTimeIndex];
+                        frameTimes[frameTimeIndex] = now;
+                        frameTimeIndex = (frameTimeIndex + 1) % frameTimes.length;
+                        if (frameTimeIndex == 0) {
+                            arrayFilled = true;
+                        }
+                        long elapsedNanos;
+                        if (arrayFilled) {
+                            elapsedNanos = now - oldFrameTime;
+                            long elapsedNanosPerFrame = elapsedNanos / frameTimes.length;
+                            frameRate = 1_000_000_000.0 / elapsedNanosPerFrame;
+                            if (FPSCount-- == 0) {
+                                FPSCount = 30;
+                                drawFps(frameRate);
+                            }
+                        }
+                        lastTime = now;
+                    }
+                }
+//                Platform.runLater(() ->
+//                    boatObjects.forEach((boat, boatObject) -> boatObject.updateLocation())
+//                );
+            }
+        };
+    }
+
+    /**
+     * First find the top right and bottom left points' geo locations, then retrieve
+     * map from google to display on image view.  - Haoming 22/5/2017
+     */
+    private void drawGoogleMap() {
+        findMetersPerPixel();
+        Point2D topLeftPoint = findScaledXY(maxLatPoint.getLat(), minLonPoint.getLng());
+        // distance from top left extreme to panel origin (top left corner)
+        double distanceFromTopLeftToOrigin = Math.sqrt(
+            Math.pow(topLeftPoint.getX() * metersPerPixelX, 2) + Math
+                .pow(topLeftPoint.getY() * metersPerPixelY, 2));
+        // angle from top left extreme to panel origin
+        double bearingFromTopLeftToOrigin = Math
+            .toDegrees(Math.atan2(-topLeftPoint.getX(), topLeftPoint.getY()));
+        // the top left extreme
+        GeoPoint topLeftPos = new GeoPoint(maxLatPoint.getLat(), minLonPoint.getLng());
+        GeoPoint originPos = GeoUtility
+            .getGeoCoordinate(topLeftPos, bearingFromTopLeftToOrigin, distanceFromTopLeftToOrigin);
+
+        // distance from origin corner to bottom right corner of the panel
+        double distanceFromOriginToBottomRight = Math.sqrt(
+            Math.pow(panelHeight * metersPerPixelY, 2) + Math
+                .pow(panelWidth * metersPerPixelX, 2));
+        double bearingFromOriginToBottomRight = Math
+            .toDegrees(Math.atan2(panelWidth, -panelHeight));
+        GeoPoint bottomRightPos = GeoUtility
+            .getGeoCoordinate(originPos, bearingFromOriginToBottomRight,
+                distanceFromOriginToBottomRight);
+
+        Boundary boundary = new Boundary(originPos.getLat(), bottomRightPos.getLng(),
+            bottomRightPos.getLat(), originPos.getLng());
+        CanvasMap canvasMap = new CanvasMap(boundary);
+        mapImage.setImage(canvasMap.getMapImage());
+        mapImage.fitWidthProperty().bind(((AnchorPane) this.getParent()).heightProperty());
+        mapImage.fitHeightProperty().bind(((AnchorPane) this.getParent()).heightProperty());
+    }
+
+    /**
+     * Adds a course to the GameView. The view is scaled accordingly unless a border is set in which
+     * case the course is added relative ot the border.
+     *
+     * @param newCourse the mark objects that make up the course.
+     * @param sequence The sequence the marks travel through
+     */
+    public void updateCourse(List<CompoundMark> newCourse, List<Corner> sequence) {
+        markerObjects = new HashMap<>();
+        final List<Gate> gates = new ArrayList<>();
+        Paint colour = Color.BLACK;
+        //Creates new markers
+        for (CompoundMark cMark : newCourse) {
+            //Set start and end colour
+            if (cMark.getId() == sequence.get(0).getCompoundMarkID()) {
+                colour = Color.GREEN;
+            } else if (cMark.getId() == sequence.get(sequence.size() - 1).getCompoundMarkID()) {
+                colour = Color.RED;
+            }
+            //Create mark dots
+            for (Mark mark : cMark.getMarks()) {
+                makeAndBindMarker(mark, colour);
+            }
+            //Create gate line
+            if (cMark.isGate()) {
+                for (int i = 1; i < cMark.getMarks().size(); i++) {
+                    gates.add(
+                        makeAndBindGate(
+                            markerObjects.get(cMark.getSubMark(i)),
+                            markerObjects.get(cMark.getSubMark(i+1)),
+                            colour
+                        )
+                    );
+                }
+            }
+            colour = Color.BLACK;
+        }
+        //Scale race to markers if there is no border.
+        if (borderPoints == null) {
+            rescaleRace(new ArrayList<>(markerObjects.keySet()));
+        }
+        //Move the Markers to initial position.
+        markerObjects.forEach(((mark, marker) -> {
+            Point2D p2d = findScaledXY(mark.getLat(), mark.getLng());
+            marker.setCenterX(p2d.getX());
+            marker.setCenterY(p2d.getY());
+        }));
+        Platform.runLater(() -> {
+            markers.getChildren().clear();
+            markers.getChildren().addAll(gates);
+            markers.getChildren().addAll(markerObjects.values());
+        });
+    }
+
+    /**
+     * Creates a new Marker and binds it's position to the given Mark.
+     *
+     * @param observableMark The mark to bind the marker to.
+     * @param colour The desired colour of the mark
+     */
+    private void makeAndBindMarker(Mark observableMark, Paint colour) {
+        Marker marker = new Marker(colour);
+        markerObjects.put(observableMark, marker);
+        observableMark.addPositionListener((mark, lat, lon) -> {
+            Point2D p2d = findScaledXY(lat, lon);
+            markerObjects.get(mark).setCenterX(p2d.getX());
+            markerObjects.get(mark).setCenterY(p2d.getY());
+        });
+    }
+
+    /**
+     * Creates a new gate connecting the given marks.
+     *
+     * @param m1 The first Mark of the gate.
+     * @param m2 The second Mark of the gate.
+     * @param colour The desired colour of the gate.
+     * @return the new gate.
+     */
+    private Gate makeAndBindGate(Marker m1, Marker m2, Paint colour) {
+        Gate gate = new Gate(colour);
+        gate.startXProperty().bind(
+            m1.centerXProperty()
+        );
+        gate.startYProperty().bind(
+            m1.centerYProperty()
+        );
+        gate.endXProperty().bind(
+            m2.centerXProperty()
+        );
+        gate.endYProperty().bind(
+            m2.centerYProperty()
+        );
+        return  gate;
+    }
+
+    /**
+     * Adds a border to the GameView and rescales to the size of the border, does not rescale if a
+     * border already exists. Assumes the border is larger than the course.
+     *
+     * @param border the race border to be drawn.
+     */
+    public void updateBorder(List<Limit> border) {
+        if (borderPoints == null) {
+            borderPoints = border;
+            rescaleRace(new ArrayList<>(borderPoints));
+        }
+        List<Double> boundaryPoints = new ArrayList<>();
+        for (Limit limit : border) {
+            Point2D location = findScaledXY(limit.getLat(), limit.getLng());
+            boundaryPoints.add(location.getX());
+            boundaryPoints.add(location.getY());
+        }
+        raceBorder.getPoints().setAll(boundaryPoints);
+    }
+
+    /**
+     * Rescales the race to the size of the window.
+     *
+     * @param limitingCoordinates the set of geo points that contains the extremities of the race.
+     */
+    private void rescaleRace(List<GeoPoint> limitingCoordinates) {
+        //Check is called once to avoid unnecessarily change the course limits once the race is running
+        findMinMaxPoint(limitingCoordinates);
+        double minLonToMaxLon = scaleRaceExtremities();
+        calculateReferencePointLocation(minLonToMaxLon);
+//        drawGoogleMap();
+    }
+
+    /**
+     * Draws all the boats.
+     * @param  yachts The yachts to set in the race
+     */
+    public void setBoats(List<Yacht> yachts) {
+        BoatObject newBoat;
+        final List<Group> wakes = new ArrayList<>();
+        for (Yacht yacht : yachts) {
+            Paint colour = Colors.getColor();
+            newBoat = new BoatObject();
+            newBoat.setFill(colour);
+            boatObjects.put(yacht, newBoat);
+            createAndBindAnnotationBox(yacht, colour);
+//            wakesGroup.getChildren().add(newBoat.getWake());
+            wakes.add(newBoat.getWake());
+            boatObjectGroup.getChildren().add(newBoat);
+            trails.getChildren().add(newBoat.getTrail());
+            // TODO: 1/08/17 Make this less vile to look at.
+            yacht.addLocationListener((boat, lat, lon, heading, velocity) ->{
+                BoatObject bo = boatObjects.get(boat);
+                Point2D p2d = findScaledXY(lat, lon);
+                bo.moveTo(p2d.getX(), p2d.getY(), heading, velocity);
+//                annotations.get(boat).setLayoutX(p2d.getX());
+//                annotations.get(boat).setLayoutY(p2d.getY());
+//                annotations.get(boat).setLocation(100d, 100d);
+                annotations.get(boat).setLocation(p2d.getX(), p2d.getY());
+                bo.setTrajectory(
+                    heading,
+                    velocity,
+                    metersPerPixelX,
+                    metersPerPixelY);
+            });
+        }
+        annotationsGroup.getChildren().addAll(annotations.values());
+        Platform.runLater(() -> {
+            gameObjects.addAll(trails);
+            gameObjects.addAll(wakes);
+            gameObjects.addAll(annotationsGroup);
+            gameObjects.addAll(boatObjectGroup);
+        });
+    }
+
+    private void createAndBindAnnotationBox (Yacht yacht, Paint colour) {
+        AnnotationBox newAnnotation = new AnnotationBox();
+        newAnnotation.setFill(colour);
+        newAnnotation.addAnnotation(
+            "name", "Player: " + yacht.getShortName()
+        );
+//        newAnnotation.addAnnotation(
+//            "velocity",
+//            yacht.getVelocityProperty(),
+//            (velocity) -> String.format("Speed: %.2f ms", velocity.doubleValue())
+//        );
+//        newAnnotation.addAnnotation(
+//            "nextMark",
+//            yacht.timeTillNextProperty(),
+//            (time) -> {
+//                DateFormat format = new SimpleDateFormat("mm:ss");
+//                return format.format(time);
+//            }
+//        );
+//        newAnnotation.addAnnotation(
+//            "lastMark",
+//            yacht.timeTillNextProperty(),
+//            (time) -> {
+//                DateFormat format = new SimpleDateFormat("mm:ss");
+//                return format.format(time);
+//            }
+//        );
+        annotations.put(yacht, newAnnotation);
+    }
+
+    private void drawFps(Double fps){
+        Platform.runLater(() -> fpsDisplay.setText(String.format("%d FPS", Math.round(fps))));
+    }
+
+    /**
+     * Sets the class variables minLatPoint, maxLatPoint, minLonPoint, maxLonPoint to the point
+     * with the leftmost point, rightmost point, southern most point and northern most point
+     * respectively.
+     */
+    private void findMinMaxPoint(List<GeoPoint> points) {
+        List<GeoPoint> sortedPoints = new ArrayList<>(points);
+        sortedPoints.sort(Comparator.comparingDouble(GeoPoint::getLat));
+        minLatPoint = new GeoPoint(sortedPoints.get(0).getLat(), sortedPoints.get(0).getLng());
+        GeoPoint maxLat = sortedPoints.get(sortedPoints.size()-1);
+        maxLatPoint = new GeoPoint(maxLat.getLat(), maxLat.getLng());
+
+        sortedPoints.sort(Comparator.comparingDouble(GeoPoint::getLng));
+        minLonPoint = new GeoPoint(sortedPoints.get(0).getLat(), sortedPoints.get(0).getLng());
+        GeoPoint maxLon = sortedPoints.get(sortedPoints.size()-1);
+        maxLonPoint = new GeoPoint(maxLon.getLat(), maxLon.getLng());
+        if (maxLonPoint.getLng() - minLonPoint.getLng() > 180) {
+            horizontalInversion = true;
+        }
+    }
+
+    /**
+     * Calculates the location of a reference point, this is always the point with minimum latitude,
+     * in relation to the canvas.
+     *
+     * @param minLonToMaxLon The horizontal distance between the point of minimum longitude to
+     * maximum longitude.
+     */
+    private void calculateReferencePointLocation(double minLonToMaxLon) {
+        GeoPoint referencePoint = minLatPoint;
+        double referenceAngle;
+
+        if (scaleDirection == ScaleDirection.HORIZONTAL) {
+            referenceAngle = Math.abs(
+                    GeoUtility.getBearingRad(referencePoint, minLonPoint)
+            );
+            referencePointX = bufferSize + distanceScaleFactor * Math.sin(referenceAngle) * GeoUtility.getDistance(referencePoint, minLonPoint);
+            referenceAngle = Math.abs(GeoUtility.getDistance(referencePoint, maxLatPoint));
+            referencePointY  = canvasHeight - (bufferSize + bufferSize);
+            referencePointY -= distanceScaleFactor * Math.cos(referenceAngle) * GeoUtility.getDistance(referencePoint, maxLatPoint);
+            referencePointY  = referencePointY / 2;
+            referencePointY += bufferSize;
+            referencePointY += distanceScaleFactor * Math.cos(referenceAngle) * GeoUtility.getDistance(referencePoint, maxLatPoint);
+        } else {
+            referencePointY = canvasHeight - bufferSize;
+            referenceAngle = Math.abs(
+                Math.toRadians(
+                    GeoUtility.getDistance(referencePoint, minLonPoint)
+                )
+            );
+            referencePointX  = bufferSize;
+            referencePointX += distanceScaleFactor * Math.sin(referenceAngle) * GeoUtility.getDistance(referencePoint, minLonPoint);
+            referencePointX += ((canvasWidth - (bufferSize + bufferSize)) - (minLonToMaxLon * distanceScaleFactor)) / 2;
+        }
+        if(horizontalInversion) {
+            referencePointX = canvasWidth - bufferSize - (referencePointX - bufferSize);
+        }
+    }
+
+
+    /**
+     * Finds the scale factor necessary to fit all race markers within the onscreen map and assigns
+     * it to distanceScaleFactor Returns the max horizontal distance of the map.
+     */
+    private double scaleRaceExtremities() {
+
+        double vertAngle = Math.abs(
+                GeoUtility.getBearingRad(minLatPoint, maxLatPoint)
+        );
+        double vertDistance =
+            Math.cos(vertAngle) * GeoUtility.getDistance(minLatPoint, maxLatPoint);
+        double horiAngle = Math.abs(
+                GeoUtility.getBearingRad(minLonPoint, maxLonPoint)
+        );
+        if (horiAngle <= (Math.PI / 2)) {
+            horiAngle = (Math.PI / 2) - horiAngle;
+        } else {
+            horiAngle = horiAngle - (Math.PI / 2);
+        }
+        double horiDistance =
+            Math.cos(horiAngle) * GeoUtility.getDistance(minLonPoint, maxLonPoint);
+
+        double vertScale = (canvasHeight - (bufferSize + bufferSize)) / vertDistance;
+
+        if ((horiDistance * vertScale) > (canvasWidth - (bufferSize + bufferSize))) {
+            distanceScaleFactor = (canvasWidth - (bufferSize + bufferSize)) / horiDistance;
+            scaleDirection = ScaleDirection.HORIZONTAL;
+        } else {
+            distanceScaleFactor = vertScale;
+            scaleDirection = ScaleDirection.VERTICAL;
+        }
+        return horiDistance;
+    }
+
+    private Point2D findScaledXY(GeoPoint unscaled) {
+        return findScaledXY(unscaled.getLat(), unscaled.getLng());
+    }
+
+    private Point2D findScaledXY (double unscaledLat, double unscaledLon) {
+        double distanceFromReference;
+        double angleFromReference;
+        double xAxisLocation = referencePointX;
+        double yAxisLocation = referencePointY;
+
+        angleFromReference = GeoUtility.getBearingRad(
+                minLatPoint, new GeoPoint(unscaledLat, unscaledLon)
+        );
+        distanceFromReference = GeoUtility.getDistance(
+            minLatPoint, new GeoPoint(unscaledLat, unscaledLon)
+        );
+//        System.out.println("distanceFromReference = " + distanceFromReference);
+        if (angleFromReference >= 0 && angleFromReference <= Math.PI / 2) {
+            xAxisLocation += Math.round(distanceScaleFactor * Math.sin(angleFromReference) * distanceFromReference);
+            yAxisLocation -= Math.round(distanceScaleFactor * Math.cos(angleFromReference) * distanceFromReference);
+        } else if (angleFromReference >= 0) {
+            angleFromReference = angleFromReference - Math.PI / 2;
+            xAxisLocation += Math.round(distanceScaleFactor * Math.cos(angleFromReference) * distanceFromReference);
+            yAxisLocation += Math.round(distanceScaleFactor * Math.sin(angleFromReference) * distanceFromReference);
+        } else if (angleFromReference < 0 && angleFromReference >= -Math.PI / 2) {
+            angleFromReference = Math.abs(angleFromReference);
+            xAxisLocation -= Math.round(distanceScaleFactor * Math.sin(angleFromReference) * distanceFromReference);
+            yAxisLocation -= Math.round(distanceScaleFactor * Math.cos(angleFromReference) * distanceFromReference);
+        } else {
+            angleFromReference = Math.abs(angleFromReference) - Math.PI / 2;
+            xAxisLocation -= Math.round(distanceScaleFactor * Math.cos(angleFromReference) * distanceFromReference);
+            yAxisLocation += Math.round(distanceScaleFactor * Math.sin(angleFromReference) * distanceFromReference);
+        }
+        if(horizontalInversion) {
+            xAxisLocation = canvasWidth - bufferSize - (xAxisLocation - bufferSize);
+        }
+//        System.out.println("yAxisLocation = " + yAxisLocation + " " + unscaledLat);
+//        System.out.println("xAxisLocation = " + xAxisLocation + " " + unscaledLon);
+        return new Point2D(xAxisLocation, yAxisLocation);
+    }
+
+    /**
+     * Find the number of meters per pixel.
+     */
+    private void findMetersPerPixel() {
+        Point2D p1, p2;
+        GeoPoint g1, g2;
+        double theta, distance, dx, dy, dHorizontal, dVertical;
+        g1 = new GeoPoint(maxLatPoint.getLat(), minLonPoint.getLng());
+        g2 = new GeoPoint(minLatPoint.getLat(), maxLatPoint.getLng());
+        p1 = findScaledXY(new GeoPoint(maxLatPoint.getLat(), minLonPoint.getLng()));
+        p2 = findScaledXY(new GeoPoint(minLatPoint.getLat(), maxLatPoint.getLng()));
+        theta = GeoUtility.getBearingRad(g1, g2);
+        distance = GeoUtility.getDistance(g1, g2);
+        dHorizontal = Math.abs(Math.sin(theta) * distance);
+        dVertical = Math.abs(Math.cos(theta) * distance);
+        dx = Math.abs(p1.getX() - p2.getX());
+        dy = Math.abs(p1.getY() - p2.getY());
+        metersPerPixelX = dHorizontal / dx;
+        metersPerPixelY = dVertical / dy;
+    }
+
+    public void setAnnotationVisibilities (boolean teamName, boolean velocity, boolean estTime,
+        boolean legTime, boolean trail, boolean wake) {
+        for (BoatObject boatObject : boatObjects.values()) {
+            boatObject.setVisibility(teamName, velocity, estTime, legTime, trail, wake);
+        }
+        for (AnnotationBox ag : annotations.values()) {
+            ag.setAnnotationVisibility("name", teamName);
+            ag.setAnnotationVisibility("velocity", velocity);
+            ag.setAnnotationVisibility("nextMark", estTime);
+            ag.setAnnotationVisibility("lastMark", legTime);
+        }
+    }
+
+    public void setFPSVisibility (boolean visibility) {
+        fpsDisplay.setVisible(visibility);
+    }
+
+    public void selectBoat (Yacht selectedYacht) {
+        boatObjects.forEach((boat, group) ->
+            group.setIsSelected(boat == selectedYacht)
+        );
+    }
+
+    public void pauseRace () {
+        timer.stop();
+    }
+
+    public void startRace () {
+        timer.start();
+    }
+
+    public void setBoatAsPlayer (Yacht playerYacht) {
+        boatObjects.get(playerYacht).setAsPlayer();
+        annotations.get(playerYacht).addAnnotation(
+            "velocity",
+            playerYacht.getVelocityProperty(),
+            (velocity) -> String.format("Speed: %.2f ms", velocity.doubleValue())
+        );
+        Platform.runLater(() -> {
+            boatObjectGroup.getChildren().remove(boatObjects.get(playerYacht));
+            gameObjects.add(boatObjects.get(playerYacht));
+            annotationsGroup.getChildren().remove(annotations.get(playerYacht));
+            gameObjects.add(annotations.get(playerYacht));
+        });
+    }
+}

src/main/java/seng302/visualiser/controllers/FinishScreenViewController.java

@@ -0,0 +1,89 @@
+package seng302.visualiser.controllers;
+
+import java.io.IOException;
+import java.net.URL;
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.List;
+import java.util.ResourceBundle;
+import javafx.collections.FXCollections;
+import javafx.collections.ObservableList;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.fxml.Initializable;
+import javafx.scene.control.TableColumn;
+import javafx.scene.control.TableView;
+import javafx.scene.control.cell.PropertyValueFactory;
+import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.GridPane;
+import javafx.scene.layout.Pane;
+import seng302.model.Yacht;
+
+public class FinishScreenViewController implements Initializable {
+
+    @FXML
+    private GridPane finishScreenGridPane;
+    @FXML
+    private TableView<Yacht> finishOrderTable;
+    @FXML
+    private TableColumn<Yacht, String> posCol;
+    @FXML
+    private TableColumn<Yacht, String> boatNameCol;
+    @FXML
+    private TableColumn<Yacht, String> shortNameCol;
+    @FXML
+    private TableColumn<Yacht, String> countryCol;
+
+    ObservableList<Yacht> data = FXCollections.observableArrayList();
+
+    @Override
+    public void initialize(URL location, ResourceBundle resources) {
+        finishScreenGridPane.getStylesheets()
+            .add(getClass().getResource("/css/master.css").toString());
+        finishOrderTable.getStylesheets().add(getClass().getResource("/css/master.css").toString());
+
+        // set up data for table
+        finishOrderTable.setItems(data);
+
+        // setting table col data
+        posCol.setCellValueFactory(
+            new PropertyValueFactory<>("position")
+        );
+        boatNameCol.setCellValueFactory(
+            new PropertyValueFactory<>("boatName")
+        );
+        shortNameCol.setCellValueFactory(
+            new PropertyValueFactory<>("shortName")
+        );
+        countryCol.setCellValueFactory(
+            new PropertyValueFactory<>("country")
+        );
+        finishOrderTable.refresh();
+    }
+
+    public void setFinishers (List<Yacht> participants) {
+        List<Yacht> sorted = new ArrayList<>(participants);
+        sorted.sort(Comparator.comparingInt(Yacht::getPositionInteger));
+        finishOrderTable.getItems().setAll(sorted);
+    }
+
+    private void setContentPane(String jfxUrl) {
+        try {
+            // get the main controller anchor pane (FinishView -> MainView)
+            AnchorPane contentPane = (AnchorPane) finishScreenGridPane.getParent();
+            contentPane.getChildren().removeAll();
+            contentPane.getChildren().clear();
+            contentPane.getStylesheets().add(getClass().getResource("/css/master.css").toString());
+            contentPane.getChildren()
+                .addAll((Pane) FXMLLoader.load(getClass().getResource(jfxUrl)));
+        } catch (javafx.fxml.LoadException e) {
+            System.out.println("[Controller] FXML load exception");
+        } catch (IOException e) {
+            System.out.println("[Controller] IO exception");
+        }
+    }
+
+    public void switchToStartScreenView() {
+        setContentPane("/views/StartScreenView.fxml");
+    }
+}

src/main/java/seng302/visualiser/controllers/LobbyController.java

@@ -0,0 +1,202 @@
+package seng302.visualiser.controllers;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+import javafx.application.Platform;
+import javafx.collections.FXCollections;
+import javafx.collections.ListChangeListener;
+import javafx.collections.ObservableList;
+import javafx.fxml.FXML;
+import javafx.scene.control.Button;
+import javafx.scene.control.ListView;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.GridPane;
+import javafx.scene.text.Text;
+import seng302.gameServer.GameStages;
+import seng302.gameServer.GameState;
+
+/**
+ * A class describing the actions of the lobby screen
+ * Created by wmu16 on 10/07/17.
+ */
+public class LobbyController {
+
+    public enum CloseStatus {
+        LEAVE,
+        READY
+    }
+
+    @FunctionalInterface
+    public interface LobbyCloseListener {
+        void notify(CloseStatus exitCause);
+    }
+
+    @FXML
+    private GridPane lobbyScreen;
+    @FXML
+    private Text lobbyIpText;
+    @FXML
+    private Button readyButton;
+    @FXML
+    private ListView<String> firstListView;
+    @FXML
+    private ListView secondListView;
+    @FXML
+    private ListView thirdListView;
+    @FXML
+    private ListView fourthListView;
+    @FXML
+    private ListView fifthListView;
+    @FXML
+    private ListView sixthListView;
+    @FXML
+    private ListView seventhListView;
+    @FXML
+    private ListView eighthListView;
+    @FXML
+    private ImageView firstImageView;
+    @FXML
+    private ImageView secondImageView;
+    @FXML
+    private ImageView thirdImageView;
+    @FXML
+    private ImageView fourthImageView;
+    @FXML
+    private ImageView fifthImageView;
+    @FXML
+    private ImageView sixthImageView;
+    @FXML
+    private ImageView seventhImageView;
+    @FXML
+    private ImageView eighthImageView;
+
+    private List<ObservableList<String>> competitors = new ArrayList<>();
+    private ObservableList<String> firstCompetitor = FXCollections.observableArrayList();
+    private ObservableList<String> secondCompetitor = FXCollections.observableArrayList();
+    private ObservableList<String> thirdCompetitor = FXCollections.observableArrayList();
+    private ObservableList<String> fourthCompetitor = FXCollections.observableArrayList();
+    private ObservableList<String> fifthCompetitor = FXCollections.observableArrayList();
+    private ObservableList<String> sixthCompetitor = FXCollections.observableArrayList();
+    private ObservableList<String> seventhCompetitor = FXCollections.observableArrayList();
+    private ObservableList<String> eighthCompetitor = FXCollections.observableArrayList();
+
+    private List<ImageView> imageViews = new ArrayList<>();
+    private List<ListView> listViews;
+
+    private int MAX_NUM_PLAYERS = 8;
+
+    private List<LobbyCloseListener> lobbyListeners = new ArrayList<>();
+    private ObservableList<String> players = FXCollections.observableArrayList();
+
+    public void initialize() {
+        imageViews = new ArrayList<>();
+        Collections
+            .addAll(imageViews, firstImageView, secondImageView, thirdImageView, fourthImageView,
+                fifthImageView, sixthImageView, seventhImageView, eighthImageView);
+        listViews = new ArrayList<>();
+        Collections.addAll(listViews, firstListView, secondListView, thirdListView, fourthListView, fifthListView,
+            sixthListView, seventhListView, eighthListView);
+        competitors = new ArrayList<>();
+        Collections.addAll(competitors, firstCompetitor, secondCompetitor, thirdCompetitor,
+            fourthCompetitor, fifthCompetitor, sixthCompetitor, seventhCompetitor, eighthCompetitor);
+
+        initialiseImageView();
+    }
+
+    private void initialiseListView() {
+        listViews.forEach(listView -> listView.getItems().clear());
+        imageViews.forEach(gif -> gif.setVisible(false));
+        competitors.forEach(ol -> ol.removeAll());
+        for (int i = 0; i < players.size(); i++) {
+            competitors.get(i).add(players.get(i));
+            listViews.get(i).setItems(competitors.get(i));
+            imageViews.get(i).setVisible(true);
+        }
+    }
+
+    private void initialiseImageView() {
+        imageViews.add(firstImageView);
+        imageViews.add(secondImageView);
+        imageViews.add(thirdImageView);
+        imageViews.add(fourthImageView);
+        imageViews.add(fifthImageView);
+        imageViews.add(sixthImageView);
+        imageViews.add(seventhImageView);
+        imageViews.add(eighthImageView);
+        for (int i = 0; i < MAX_NUM_PLAYERS; i++) {
+            imageViews.get(i).setImage(
+                new Image(
+                    RaceViewController.class.getResourceAsStream(
+                        "/pics/sail.png")
+                )
+            );
+        }
+    }
+
+    @FXML
+    public void leaveLobbyButtonPressed() {
+        // TODO: 10/07/17 wmu16 - Finish function!
+//        setContentPane("/views/StartScreenView.fxml");
+        GameState.setCurrentStage(GameStages.CANCELLED);
+        // TODO: 20/07/17 wmu16 - Implement some way of terminating the game
+//        ClientState.setConnectedToHost(false);
+        for (LobbyCloseListener readyListener : lobbyListeners)
+            readyListener.notify(CloseStatus.LEAVE);
+
+    }
+
+    @FXML
+    public void readyButtonPressed() {
+        GameState.setCurrentStage(GameStages.RACING);
+        for (LobbyCloseListener readyListener : lobbyListeners)
+            readyListener.notify(CloseStatus.READY);
+    }
+
+
+//    private static MediaPlayer mediaPlayer;
+//
+//    private void playTheme() {
+//        Random random = new Random(System.currentTimeMillis());
+//        Integer rand = random.nextInt();
+//        if(rand == 10) {
+//            URL file = getClass().getResource("/music/Disturbed - down with the sickness.mp3");
+//            Media hit = new Media(file.toString());
+//            mediaPlayer = new MediaPlayer(hit);
+//            mediaPlayer.play();
+//        } else if(rand == 9) {
+//            URL file = getClass().getResource("/music/Owl City - Fireflies.mp3");
+//            Media hit = new Media(file.toString());
+//            mediaPlayer = new MediaPlayer(hit);
+//            mediaPlayer.play();
+//        }
+//    }
+
+//    private void switchToRaceView() {
+//        if (!switchedPane) {
+//            switchedPane = true;
+//            setContentPane("/views/RaceView.fxml");
+//        }
+//    }
+// TODO: 26/07/17 cir27 - Could probably be done in a cleaner way.
+    public void setTitle (String title) {
+        lobbyIpText.setText(title);
+    }
+
+    public void addCloseListener(LobbyCloseListener listener) {
+        lobbyListeners.add(listener);
+    }
+
+    public void setPlayerListSource (ObservableList<String> players) {
+        this.players = players;
+        players.addListener((ListChangeListener<? super String>) (lcl) ->
+            Platform.runLater(this::initialiseListView)
+        );
+        Platform.runLater(this::initialiseListView);
+    }
+
+    public void disableReadyButton () {
+        readyButton.setDisable(true);
+    }
+}

src/main/java/seng302/visualiser/controllers/RaceViewController.java

@@ -0,0 +1,598 @@
+package seng302.visualiser.controllers;
+
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.List;
+import java.util.Map;
+import java.util.Timer;
+import java.util.TimerTask;
+import java.util.concurrent.TimeUnit;
+import javafx.animation.Timeline;
+import javafx.application.Platform;
+import javafx.collections.FXCollections;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.geometry.Point2D;
+import javafx.scene.Scene;
+import javafx.scene.chart.LineChart;
+import javafx.scene.chart.NumberAxis;
+import javafx.scene.chart.XYChart;
+import javafx.scene.chart.XYChart.Data;
+import javafx.scene.chart.XYChart.Series;
+import javafx.scene.control.Button;
+import javafx.scene.control.CheckBox;
+import javafx.scene.control.ComboBox;
+import javafx.scene.control.Slider;
+import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.VBox;
+import javafx.scene.paint.Color;
+import javafx.scene.paint.Paint;
+import javafx.scene.shape.Line;
+import javafx.scene.text.Text;
+import javafx.stage.Stage;
+import javafx.stage.StageStyle;
+import javafx.util.StringConverter;
+import seng302.model.RaceState;
+import seng302.model.Yacht;
+import seng302.model.mark.CompoundMark;
+import seng302.model.mark.Mark;
+import seng302.model.stream.xml.parser.RaceXMLData;
+import seng302.visualiser.GameView;
+import seng302.visualiser.controllers.annotations.Annotation;
+import seng302.visualiser.controllers.annotations.ImportantAnnotationController;
+import seng302.visualiser.controllers.annotations.ImportantAnnotationDelegate;
+import seng302.visualiser.controllers.annotations.ImportantAnnotationsState;
+import seng302.visualiser.fxObjects.BoatObject;
+
+/**
+ * Controller class that manages the display of a race
+ */
+public class RaceViewController extends Thread implements ImportantAnnotationDelegate {
+
+    @FXML
+    private LineChart<String, Double> raceSparkLine;
+    @FXML
+    private NumberAxis sparklineYAxis;
+    @FXML
+    private VBox positionVbox;
+    @FXML
+    private CheckBox toggleFps;
+    @FXML
+    private Text timerLabel;
+    @FXML
+    private AnchorPane contentAnchorPane;
+    @FXML
+    private Text windArrowText, windDirectionText;
+    @FXML
+    private Slider annotationSlider;
+    @FXML
+    private Button selectAnnotationBtn;
+    @FXML
+    private ComboBox<Yacht> yachtSelectionComboBox;
+
+    //Race Data
+    private Map<Integer, Yacht> participants;
+    private Map<Integer, CompoundMark> markers;
+    private RaceXMLData courseData;
+    private GameView gameView;
+    private RaceState raceState;
+
+    private Timeline timerTimeline;
+    private Timer timer = new Timer();
+    private List<Series<String, Double>> sparkLineData = new ArrayList<>();
+    private ImportantAnnotationsState importantAnnotations;
+
+    public void initialize() {
+        // Load a default important annotation state
+        importantAnnotations = new ImportantAnnotationsState();
+
+        //Formatting the y axis of the sparkline
+        raceSparkLine.getYAxis().setRotate(180);
+        raceSparkLine.getYAxis().setTickLabelRotation(180);
+        raceSparkLine.getYAxis().setTranslateX(-5);
+        raceSparkLine.getYAxis().setAutoRanging(false);
+        sparklineYAxis.setTickMarkVisible(false);
+
+        positionVbox.getStylesheets().add(getClass().getResource("/css/master.css").toString());
+
+        selectAnnotationBtn.setOnAction(event -> loadSelectAnnotationView());
+    }
+
+    public void loadRace (
+        Map<Integer, Yacht> participants, RaceXMLData raceData, RaceState raceState, Yacht player
+    ) {
+        this.participants = participants;
+        this.courseData = raceData;
+        this.markers = raceData.getCompoundMarks();
+        this.raceState = raceState;
+
+        initializeUpdateTimer();
+        initialiseFPSCheckBox();
+        initialiseAnnotationSlider();
+        initialiseBoatSelectionComboBox();
+        initialiseSparkLine();
+
+        gameView = new GameView();
+        Platform.runLater(() -> contentAnchorPane.getChildren().add(gameView));
+        gameView.setBoats(new ArrayList<>(participants.values()));
+        gameView.updateBorder(raceData.getCourseLimit());
+        gameView.updateCourse(
+            new ArrayList<>(raceData.getCompoundMarks().values()), raceData.getMarkSequence()
+        );
+        gameView.setBoatAsPlayer(player);
+        gameView.startRace();
+    }
+
+    /**
+     * The important annotations have been changed, update this view
+     *
+     * @param importantAnnotationsState The current state of the selected annotations
+     */
+    public void importantAnnotationsChanged(ImportantAnnotationsState importantAnnotationsState) {
+        this.importantAnnotations = importantAnnotationsState;
+        setAnnotations((int) annotationSlider.getValue()); // Refresh the displayed annotations
+    }
+
+
+    /**
+     * Loads the "select annotations" view in a new window
+     */
+    private void loadSelectAnnotationView() {
+        try {
+            FXMLLoader fxmlLoader = new FXMLLoader();
+            Stage stage = new Stage();
+            // Set controller
+            ImportantAnnotationController controller = new ImportantAnnotationController(
+                this, stage
+            );
+            fxmlLoader.setController(controller);
+            // Load FXML and set CSS
+            fxmlLoader.setLocation(
+                getClass().getResource("/views/importantAnnotationSelectView.fxml")
+            );
+            Scene scene = new Scene(fxmlLoader.load(), 469, 298);
+            scene.getStylesheets().add(getClass().getResource("/css/master.css").toString());
+            stage.initStyle(StageStyle.UNDECORATED);
+            stage.setScene(scene);
+            stage.show();
+            controller.loadState(importantAnnotations);
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }
+
+    private void initialiseFPSCheckBox() {
+        toggleFps.selectedProperty().addListener((obs, oldVal, newVal) ->
+            gameView.setFPSVisibility(toggleFps.isSelected())
+        );
+    }
+
+    private void initialiseAnnotationSlider() {
+        annotationSlider.setLabelFormatter(new StringConverter<Double>() {
+            @Override
+            public String toString(Double n) {
+                if (n == 0) {
+                    return "None";
+                }
+                if (n == 1) {
+                    return "Important";
+                }
+                if (n == 2) {
+                    return "All";
+                }
+                return "All";
+            }
+
+            @Override
+            public Double fromString(String s) {
+                switch (s) {
+                    case "None":
+                        return 0d;
+                    case "Important":
+                        return 1d;
+                    case "All":
+                        return 2d;
+
+                    default:
+                        return 2d;
+                }
+            }
+        });
+        annotationSlider.setValue(2);
+        annotationSlider.valueProperty().addListener((obs, oldVal, newVal) ->
+            setAnnotations((int) annotationSlider.getValue())
+        );
+    }
+
+
+    /**
+     * Used to add any new yachts into the race that may have started late or not have had data received yet
+     */
+    private void updateSparkLine(){
+        // TODO: 2/08/17 there is about 0 chance of this working. Once we are keeping track of boat positions it can be fixed.
+        // Collect the racing yachts that aren't already in the chart
+        sparkLineData.clear();
+        List<Yacht> sparkLineCandidates = new ArrayList<>(participants.values());
+        // Create a new data series for new yachts
+        sparkLineCandidates
+            .stream()
+            .filter(yacht -> yacht.getPositionInteger() != null)
+            .forEach(yacht -> {
+                Series<String, Double> yachtData = new Series<>();
+                yachtData.setName(yacht.getSourceId().toString());
+                yachtData.getData().add(
+                    new XYChart.Data<>(
+                        Integer.toString(yacht.getLegNumber()),
+                        1.0 + participants.size() - yacht.getPositionInteger()
+                    )
+                );
+            sparkLineData.add(yachtData);
+            });
+
+        // Lambda function to sort the series in order of leg (later legs shown more to the right)
+        sparkLineData.sort((o1, o2) -> {
+            Integer leg1 =  Integer.parseInt(o1.getData().get(o1.getData().size()-1).getXValue());
+            Integer leg2 =  Integer.parseInt(o2.getData().get(o2.getData().size()-1).getXValue());
+            if (leg2 < leg1){
+                return 1;
+            } else {
+                return -1;
+            }
+        });
+        // Adds the new data series to the sparkline (and set the colour of the series)
+        Platform.runLater(() -> {
+            sparkLineData
+                .stream()
+                .filter(spark -> !raceSparkLine.getData().contains(spark))
+                .forEach(spark -> {
+                    raceSparkLine.getData().add(spark);
+                    spark.getNode().lookup(".chart-series-line").setStyle("-fx-stroke:" + getBoatColorAsRGB(spark.getName()));
+                });
+        });
+    }
+
+    private void initialiseSparkLine() {
+        sparklineYAxis.setUpperBound(participants.size() + 1);
+        raceSparkLine.setCreateSymbols(false);
+    }
+
+    /**
+     * Updates the yachts sparkline of the desired yacht and using the new leg number
+     * @param yacht The yacht to be updated on the sparkline
+     * @param legNumber the leg number that the position will be assigned to
+     */
+    void updateYachtPositionSparkline(Yacht yacht, Integer legNumber){
+        for (XYChart.Series<String, Double> positionData : sparkLineData) {
+            positionData.getData().add(
+                new Data<>(
+                    Integer.toString(legNumber),
+                    1.0 + participants.size() - yacht.getPositionInteger()
+                )
+            );
+        }
+//        XYChart.Series<String, Double> positionData =  sparkLineData.get(yacht.getSourceID());
+//        positionData.getData().add(
+//            new XYChart.Data<>(
+//                Integer.toString(legNumber),
+//                1.0 + participants.size() - yacht.getPosition()
+//            )
+//        );
+    }
+
+
+    /**
+     * gets the rgb string of the yachts colour to use for the chart via css
+     * @param yachtId id of yacht passed in to get the yachts colour
+     * @return the colour as an rgb string
+     */
+    private String getBoatColorAsRGB(String yachtId){
+        Color color = participants.get(Integer.valueOf(yachtId)).getColour();
+        if (color == null){
+            return String.format("#%02X%02X%02X",255,255,255);
+        }
+        return String.format( "#%02X%02X%02X",
+            (int)( color.getRed() * 255 ),
+            (int)( color.getGreen() * 255 ),
+            (int)( color.getBlue() * 255 )
+        );
+    }
+
+
+    /**
+     * Initialises a timer which updates elements of the RaceView such as wind direction, yacht
+     * orderings etc.. which are dependent on the info from the stream parser constantly.
+     * Updates of each of these attributes are called ONCE EACH SECOND
+     */
+    private void initializeUpdateTimer() {
+        timer.scheduleAtFixedRate(new TimerTask() {
+            @Override
+            public void run() {
+                updateRaceTime();
+                updateWindDirection();
+                updateOrder();
+                updateSparkLine();
+            }
+        }, 0, 1000);
+    }
+
+    /**
+     * Iterates over all corners until ones SeqID matches with the yachts current leg number.
+     * Then it gets the compoundMarkID of that corner and uses it to fetch the appropriate mark
+     * Returns null if no next mark found.
+     * @param bg The BoatGroup to find the next mark of
+     * @return The next Mark or null if none found
+     */
+    private Mark getNextMark(BoatObject bg) {
+        // TODO: 1/08/17 Move to GameView
+//
+//        Integer legNumber = bg.getYacht().getLegNumber();
+//        List<Corner> markSequence = courseData.getMarkSequence();
+//
+//        if (legNumber == 0) {
+//            return null;
+//        } else if (legNumber == markSequence.size() - 1) {
+//            return null;
+//        }
+//
+//        for (Corner corner : markSequence) {
+//            if (legNumber + 2 == corner.getSeqID()) {
+//                return courseData.getCompoundMarks().get(corner.getCompoundMarkID());
+//            }
+//        }
+//        return null;
+        return null;
+    }
+
+
+    /**
+     * Updates the wind direction arrow and text as from info from the StreamParser
+     */
+    private void updateWindDirection() {
+        windDirectionText.setText(String.format("%.1f°", raceState.getWindDirection()));
+        windArrowText.setRotate(raceState.getWindDirection());
+    }
+
+
+    /**
+     * Updates the clock for the race
+     */
+    private void updateRaceTime() {
+        if (!raceState.isRaceStarted()) {
+            timerLabel.setFill(Color.RED);
+            timerLabel.setText("Race Finished!");
+        } else {
+            timerLabel.setText(raceState.getRaceTimeStr());
+        }
+    }
+
+    /**
+     * Updates the order of the yachts as from the StreamParser and sets them in the yacht order
+     * section
+     */
+    private void updateOrder() {
+//        positionVbox.getChildren().removeAll();
+//        positionVbox.getStylesheets().add(getClass().getResource("/css/master.css").toString());
+
+        // list of racing yacht id
+        List<Yacht> sorted = new ArrayList<>(participants.values());
+        sorted.sort(Comparator.comparingInt(Yacht::getPositionInteger));
+        List<Text> vboxEntries = new ArrayList<>();
+
+        for (Yacht yacht : sorted) {
+//            System.out.println("yacht == null  " + String.valueOf(yacht == null));
+            if (yacht.getBoatStatus() == 3) {  // 3 is finish status
+                Text textToAdd = new Text(yacht.getPositionInteger() + ". " +
+                    yacht.getShortName() + " (Finished)");
+                textToAdd.setFill(Paint.valueOf("#d3d3d3"));
+                vboxEntries.add(textToAdd);
+
+            } else {
+                Text textToAdd = new Text(yacht.getPositionInteger() + ". " +
+                    yacht.getShortName() + " ");
+                textToAdd.setFill(Paint.valueOf("#d3d3d3"));
+                textToAdd.setStyle("");
+                vboxEntries.add(textToAdd);
+            }
+//            System.out.println("finished a loop :))))))))))))");
+        }
+        Platform.runLater(() ->
+            positionVbox.getChildren().setAll(vboxEntries)
+        );
+//            participants.forEach((id, yacht) ->{
+//                Text textToAdd = new Text(yacht.getPosition() + ". " +
+//                    yacht.getShortName() + " ");
+//                textToAdd.setFill(Paint.valueOf("#d3d3d3"));
+//                textToAdd.setStyle("");
+//                positionVbox.getChildren().add(textToAdd);
+//            });
+    }
+
+
+    private void updateLaylines(BoatObject bg) {
+        // TODO: 1/08/17 move to GameView
+//
+//        Mark nextMark = getNextMark(bg);
+//        Boolean isUpwind = null;
+//        // Can only calc leg direction if there is a next mark and it is a gate mark
+//        if (nextMark != null) {
+//            if (nextMark instanceof GateMark) {
+//                if (bg.isUpwindLeg(gameViewController, nextMark)) {
+//                    isUpwind = true;
+//                } else {
+//                    isUpwind = false;
+//                }
+//
+//                for(MarkObject mg : gameViewController.getMarkGroups()) {
+//
+//                    mg.removeLaylines();
+//
+//                    if (mg.getMainMark().getId() == nextMark.getId()) {
+//
+//                        SingleMark singleMark1 = ((GateMark) nextMark).getSingleMark1();
+//                        SingleMark singleMark2 = ((GateMark) nextMark).getSingleMark2();
+//                        Point2D markPoint1 = gameViewController
+//                            .findScaledXY(singleMark1.getLatitude(), singleMark1.getLongitude());
+//                        Point2D markPoint2 = gameViewController
+//                            .findScaledXY(singleMark2.getLatitude(), singleMark2.getLongitude());
+//                        HashMap<Double, Double> angleAndSpeed;
+//                        if (isUpwind) {
+//                            angleAndSpeed = PolarTable.getOptimalUpwindVMG(StreamParser.getWindSpeed());
+//                        } else {
+//                            angleAndSpeed = PolarTable.getOptimalDownwindVMG(StreamParser.getWindSpeed());
+//                        }
+//
+//                        Double resultingAngle = angleAndSpeed.keySet().iterator().next();
+//
+//
+//                        Point2D yachtCurrentPos = new Point2D(bg.getBoatLayoutX(), bg.getBoatLayoutY());
+//                        Point2D gateMidPoint = markPoint1.midpoint(markPoint2);
+//                        Integer lineFuncResult = GeoUtility.lineFunction(yachtCurrentPos, gateMidPoint, markPoint2);
+//                        Line rightLayline = new Line();
+//                        Line leftLayline = new Line();
+//                        if (lineFuncResult == 1) {
+//                            rightLayline = makeRightLayline(markPoint2, 180 - resultingAngle, StreamParser.getWindDirection());
+//                            leftLayline = makeLeftLayline(markPoint1, 180 - resultingAngle, StreamParser.getWindDirection());
+//                        } else if (lineFuncResult == -1) {
+//                            rightLayline = makeRightLayline(markPoint1, 180 - resultingAngle, StreamParser.getWindDirection());
+//                            leftLayline = makeLeftLayline(markPoint2, 180 - resultingAngle, StreamParser.getWindDirection());
+//                        }
+//
+//                        leftLayline.setStrokeWidth(0.5);
+//                        leftLayline.setStroke(bg.getBoat().getColour());
+//
+//                        rightLayline.setStrokeWidth(0.5);
+//                        rightLayline.setStroke(bg.getBoat().getColour());
+//
+//                        bg.setLaylines(leftLayline, rightLayline);
+//                        mg.addLaylines(leftLayline, rightLayline);
+//
+//                    }
+//                }
+//            }
+//        }
+    }
+
+
+    private Point2D getPointRotation(Point2D ref, Double distance, Double angle){
+        Double newX = ref.getX() + (ref.getX() + distance -ref.getX())*Math.cos(angle) - (ref.getY() + distance -ref.getY())*Math.sin(angle);
+        Double newY = ref.getY() + (ref.getX() + distance -ref.getX())*Math.sin(angle) + (ref.getY() + distance -ref.getY())*Math.cos(angle);
+
+        return new Point2D(newX, newY);
+    }
+
+
+    public Line  makeLeftLayline(Point2D startPoint, Double layLineAngle, Double baseAngle) {
+
+        Point2D ep = getPointRotation(startPoint, 50.0, baseAngle + layLineAngle);
+        Line line = new Line(startPoint.getX(), startPoint.getY(), ep.getX(), ep.getY());
+        return line;
+
+    }
+
+
+    public Line makeRightLayline(Point2D startPoint, Double layLineAngle, Double baseAngle) {
+
+        Point2D ep = getPointRotation(startPoint, 50.0, baseAngle - layLineAngle);
+        Line line = new Line(startPoint.getX(), startPoint.getY(), ep.getX(), ep.getY());
+        return line;
+
+    }
+
+
+    /**
+     * Initialised the combo box with any yachts currently in the race and adds the required listener
+     * for the combobox to take action upon selection
+     */
+    private void initialiseBoatSelectionComboBox() {
+        yachtSelectionComboBox.setItems(
+            FXCollections.observableArrayList(participants.values())
+        );
+        //Null check is if the listener is fired but nothing selected
+        yachtSelectionComboBox.valueProperty().addListener((obs, lastSelection, selectedBoat) -> {
+            if (selectedBoat != null) {
+                gameView.selectBoat(selectedBoat);
+            }
+        });
+    }
+
+    /**
+     * Display the list of yachts in the order they finished the race
+     */
+    private void loadRaceResultView() {
+        FXMLLoader loader = new FXMLLoader(getClass().getResource("/views/FinishView.fxml"));
+
+        try {
+            contentAnchorPane.getChildren().removeAll();
+            contentAnchorPane.getChildren().clear();
+            contentAnchorPane.getChildren().addAll((Pane) loader.load());
+
+        } catch (javafx.fxml.LoadException e) {
+            System.err.println(e.getCause().toString());
+        } catch (IOException e) {
+            System.err.println(e.toString());
+        }
+    }
+
+    private String getMillisToFormattedTime(long milliseconds) {
+        return String.format("%02d:%02d:%02d",
+            TimeUnit.MILLISECONDS.toHours(milliseconds),
+            TimeUnit.MILLISECONDS.toMinutes(milliseconds) % 60, //Modulus 60 minutes per hour
+            TimeUnit.MILLISECONDS.toSeconds(milliseconds) % 60  //Modulus 60 seconds per minute
+            );
+    }
+
+    private void setAnnotations(Integer annotationLevel) {
+        switch (annotationLevel) {
+            // No Annotations
+            case 0:
+                gameView.setAnnotationVisibilities(
+                    false, false, false, false, false, false
+                );
+                break;
+            // Important Annotations
+            case 1:
+                gameView.setAnnotationVisibilities(
+                    importantAnnotations.getAnnotationState(Annotation.NAME),
+                    importantAnnotations.getAnnotationState(Annotation.SPEED),
+                    importantAnnotations.getAnnotationState(Annotation.ESTTIMETONEXTMARK),
+                    importantAnnotations.getAnnotationState(Annotation.LEGTIME),
+                    importantAnnotations.getAnnotationState(Annotation.TRACK),
+                    importantAnnotations.getAnnotationState(Annotation.WAKE)
+                );
+                break;
+            // All Annotations
+            case 2:
+                gameView.setAnnotationVisibilities(
+                    true, true, true, true, true, true
+                );
+                break;
+        }
+    }
+
+
+    /**
+     * Sets all the annotations of the selected yacht to be visible and all others to be hidden
+     *
+     * @param yacht The yacht for which we want to view all annotations
+     */
+    private void setSelectedBoat(Yacht yacht) {
+//        for (BoatObject bg : gameViewController.getBoatGroups()) {
+//            //We need to iterate over all race groups to get the matching yacht group belonging to this yacht if we
+//            //are to toggle its annotations, there is no other backwards knowledge of a yacht to its yachtgroup.
+//            if (bg.getBoat().getHullID().equals(yacht.getHullID())) {
+////                updateLaylines(bg);
+//                bg.setIsSelected(true);
+////                selectedBoat = yacht;
+//            } else {
+//                bg.setIsSelected(false);
+//            }
+//        }
+    }
+
+    public void updateRaceData (RaceXMLData raceData) {
+        this.courseData = raceData;
+        gameView.updateBorder(raceData.getCourseLimit());
+    }
+}

src/main/java/seng302/visualiser/controllers/StartScreenController.java

@@ -0,0 +1,168 @@
+package seng302.visualiser.controllers;
+
+import java.net.Inet4Address;
+import java.net.InetAddress;
+import java.net.NetworkInterface;
+import java.net.URL;
+import java.util.Enumeration;
+import java.util.ResourceBundle;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.control.TextField;
+import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.GridPane;
+import seng302.gameServer.GameState;
+import seng302.visualiser.GameClient;
+
+/**
+ * A Class describing the actions of the start screen controller
+ * Created by wmu16 on 10/07/17.
+ */
+public class StartScreenController implements Initializable {
+
+    @FXML
+    private TextField ipTextField;
+    @FXML
+    private TextField portTextField;
+    @FXML
+    private GridPane startScreen2;
+    @FXML
+    private AnchorPane holder;
+
+    GameClient gameClient;
+
+    public void initialize(URL url,  ResourceBundle resourceBundle) {
+//        gameClient = new GameClient(holder);
+    }
+//
+//    /**
+//     * Loads the fxml content into the parent pane
+//     * @param jfxUrl
+//     * @return the controller of the fxml
+//     */
+//    private Object setContentPane(String jfxUrl) {
+//        try {
+//            AnchorPane contentPane = (AnchorPane) startScreen2.getParent();
+//            contentPane.getChildren().removeAll();
+//            contentPane.getChildren().clear();
+//            contentPane.getStylesheets().add(getClass().getResource("/css/master.css").toString());
+//            FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource(jfxUrl));
+//            contentPane.getChildren().addAll((Pane) fxmlLoader.load());
+//
+//            return fxmlLoader.getController();
+//        } catch (IOException e) {
+//            e.printStackTrace();
+//        }
+//        return null;
+//    }
+
+
+    /**
+     * ATTEMPTS TO:
+     * Sets up a new game state with your IP address as designated as the host.
+     * Starts a thread to listen for incoming connections.
+     * Starts a client to server thread and connects to own ip.
+     * Switches to the lobby screen
+     */
+    @FXML
+    public void hostButtonPressed() {
+        new GameState(getLocalHostIp());
+        gameClient = new GameClient(holder);
+        gameClient.runAsHost(getLocalHostIp(), 4942);
+//        try {
+////            String ipAddress = InetAddress.getLocalHost().getHostAddress();
+////            new GameState(ipAddress);
+////            new MainServerThread();
+////            ClientToServerThread clientToServerThread = new ClientToServerThread("localhost", 4950);
+////            controller.setClientToServerThread(clientToServerThread);
+//            // get the lobby controller so that we can pass the game server thread to it
+//            new GameState(getLocalHostIp());
+//            MainServerThread mainServerThread = new MainServerThread();
+////            ClientState.setHost(true);
+//            // host will connect and handshake to itself after setting up the server
+//            // TODO: 24/07/17 wmu16 - Make port number some static global type constant?
+////            ClientToServerThread clientToServerThread = new ClientToServerThread(ClientState.getHostIp(), 4942);
+////            ClientState.setConnectedToHost(true);
+////            controller.setClientToServerThread(clientToServerThread);
+//            LobbyController lobbyController = (LobbyController) setContentPane("/views/LobbyView.fxml");
+//            lobbyController.setMainServerThread(mainServerThread);
+//        } catch (Exception e) {
+//            Alert alert = new Alert(AlertType.ERROR);
+//            alert.setHeaderText("Cannot host");
+//            alert.setContentText("Oops, failed to host, try to restart.");
+//            alert.showAndWait();
+//            e.printStackTrace();
+//        }
+    }
+
+    /**
+     * ATTEMPTS TO:
+     * Connect to an ip address and port using the ip and port specified on start screen.
+     * Starts a Client To Server Thread to maintain connection to host.
+     * Switch view to lobby view.
+     */
+    @FXML
+    public void connectButtonPressed() {
+        // TODO: 10/07/17 wmu16 - Finish function
+        gameClient = new GameClient(holder);
+        gameClient.runAsClient(ipTextField.getText().trim().toLowerCase(), 4942);
+
+//        try {
+//            String ipAddress = ipTextField.getText().trim().toLowerCase();
+//            Integer port = Integer.valueOf(portTextField.getText().trim());
+//
+////            ClientToServerThread clientToServerThread = new ClientToServerThread(ipAddress, port);
+////            ClientState.setHost(false);
+////            ClientState.setConnectedToHost(true);
+//
+////            controller.setClientToServerThread(clientToServerThread);
+////            setContentPane("/views/LobbyView.fxml");
+//        } catch (Exception e) {
+//            Alert alert = new Alert(AlertType.ERROR);
+//            alert.setHeaderText("Cannot reach the host");
+//            alert.setContentText("Please check your host IP address.");
+//            alert.showAndWait();
+//        }
+    }
+
+//    public void setController(Controller controller) {
+//        this.controller = controller;
+//    }
+
+    /**
+     * Gets the local host ip address and sets this ip to ClientState.
+     * Only runs by the host.
+     *
+     * @return the localhost ip address
+     */
+    private String getLocalHostIp() {
+        String ipAddress = null;
+        try {
+            Enumeration<NetworkInterface> e = NetworkInterface.getNetworkInterfaces();
+            while (e.hasMoreElements()) {
+                NetworkInterface ni = e.nextElement();
+                if (ni.isLoopback())
+                    continue;
+                if(ni.isPointToPoint())
+                    continue;
+                if(ni.isVirtual())
+                    continue;
+
+                Enumeration<InetAddress> addresses = ni.getInetAddresses();
+                while(addresses.hasMoreElements()) {
+                    InetAddress address = addresses.nextElement();
+                    if(address instanceof Inet4Address) {    // skip all ipv6
+                        ipAddress = address.getHostAddress();
+                    }
+                }
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        if (ipAddress == null) {
+            System.out.println("[HOST] Cannot obtain local host ip address.");
+        }
+//        ClientState.setHostIp(ipAddress);
+        return ipAddress;
+    }
+}

src/main/java/seng302/visualiser/controllers/annotations/Annotation.java

@@ -0,0 +1,13 @@
+package seng302.visualiser.controllers.annotations;
+
+/**
+ * Annotations the user can select as important
+ */
+public enum Annotation {
+    SPEED,
+    WAKE,
+    TRACK,
+    NAME,
+    ESTTIMETONEXTMARK,
+    LEGTIME
+}

src/main/java/seng302/visualiser/controllers/annotations/ImportantAnnotationController.java

@@ -0,0 +1,146 @@
+package seng302.visualiser.controllers.annotations;
+
+import java.net.URL;
+import java.util.ResourceBundle;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.control.Button;
+import javafx.scene.control.CheckBox;
+import javafx.scene.layout.AnchorPane;
+import javafx.stage.Stage;
+
+;
+
+public class ImportantAnnotationController implements Initializable {
+
+    /*
+     * JavaFX Outlets
+     */
+    @FXML
+    private CheckBox boatWakeSelect;
+
+    @FXML
+    private CheckBox boatSpeedSelect;
+
+    @FXML
+    private CheckBox boatTrackSelect;
+
+    @FXML
+    private CheckBox boatNameSelect;
+
+    @FXML
+    private CheckBox boatEstTimeToNextMarkSelect;
+
+    @FXML
+    private CheckBox boatElapsedTimeSelect;
+
+    @FXML
+    private AnchorPane annotationSelectWindow;
+
+    @FXML
+    private Button closeButton;
+
+    private ImportantAnnotationDelegate delegate;
+    private ImportantAnnotationsState importantAnnotationsState;
+    private Stage stage;
+
+    public ImportantAnnotationController(ImportantAnnotationDelegate delegate, Stage stage) {
+        this.delegate = delegate;
+        importantAnnotationsState = new ImportantAnnotationsState();
+        this.stage = stage;
+    }
+
+    /**
+     * Sets whether or not an annotation is considered important, then
+     * sends an update to the delegate
+     *
+     * @param annotation The annotation
+     * @param isSet True if annotation is important
+     */
+    private void setAnnotation(Annotation annotation, Boolean isSet) {
+        importantAnnotationsState.setAnnotationState(annotation, isSet);
+        sendUpdate();
+    }
+
+    /**
+     * Sends an update to the delegate when the important
+     * annotations have changed
+     */
+    private void sendUpdate() {
+        this.delegate.importantAnnotationsChanged(importantAnnotationsState);
+    }
+
+    /**
+     * Load the current state of the 'important annotations'
+     *
+     * @param currentState hashmap containing the states of each annotation
+     */
+    public void loadState(ImportantAnnotationsState currentState) {
+        this.importantAnnotationsState = currentState;
+
+        // Initialise checkboxes
+        for (Annotation annotation : importantAnnotationsState.getAnnotations()) {
+            switch (annotation) {
+                case WAKE:
+                    boatWakeSelect
+                        .setSelected(importantAnnotationsState.getAnnotationState(annotation));
+                    break;
+
+                case SPEED:
+                    boatSpeedSelect
+                        .setSelected(importantAnnotationsState.getAnnotationState(annotation));
+                    break;
+
+                case TRACK:
+                    boatTrackSelect
+                        .setSelected(importantAnnotationsState.getAnnotationState(annotation));
+                    break;
+
+                case NAME:
+                    boatNameSelect
+                        .setSelected(importantAnnotationsState.getAnnotationState(annotation));
+                    break;
+
+                case ESTTIMETONEXTMARK:
+                    boatEstTimeToNextMarkSelect
+                        .setSelected(importantAnnotationsState.getAnnotationState(annotation));
+                    break;
+
+                case LEGTIME:
+                    boatElapsedTimeSelect
+                        .setSelected(importantAnnotationsState.getAnnotationState(annotation));
+
+                default:
+                    break;
+            }
+        }
+    }
+
+    /**
+     * View did load
+     *
+     * @param location .
+     * @param resources .
+     */
+    @Override
+    public void initialize(URL location, ResourceBundle resources) {
+        boatWakeSelect
+            .setOnAction(event -> setAnnotation(Annotation.WAKE, boatWakeSelect.isSelected()));
+        boatSpeedSelect
+            .setOnAction(event -> setAnnotation(Annotation.SPEED, boatSpeedSelect.isSelected()));
+        boatTrackSelect
+            .setOnAction(event -> setAnnotation(Annotation.TRACK, boatTrackSelect.isSelected()));
+        boatNameSelect
+            .setOnAction(event -> setAnnotation(Annotation.NAME, boatNameSelect.isSelected()));
+        boatEstTimeToNextMarkSelect.setOnAction(event -> setAnnotation(Annotation.ESTTIMETONEXTMARK,
+            boatEstTimeToNextMarkSelect.isSelected()));
+        boatElapsedTimeSelect.setOnAction(
+            event -> setAnnotation(Annotation.LEGTIME, boatElapsedTimeSelect.isSelected()));
+        // TODO: 26/07/17 cir27 - Create a more robust fix for this when the annotation for the game are decided upon.
+        boatEstTimeToNextMarkSelect.setVisible(false);
+        boatEstTimeToNextMarkSelect.setDisable(true);
+        boatElapsedTimeSelect.setVisible(false);
+        boatElapsedTimeSelect.setDisable(true);
+        closeButton.setOnAction(event -> stage.close());
+    }
+}

src/main/java/seng302/visualiser/controllers/annotations/ImportantAnnotationDelegate.java

@@ -0,0 +1,16 @@
+package seng302.visualiser.controllers.annotations;
+
+/**
+ * An ImportantAnnotationDelegate handles updating the important annotations
+ * displayed to the user on behalf of the ImportantAnnotationController
+ */
+public interface ImportantAnnotationDelegate {
+    /**
+     * The important annotations have been changed, update the
+     * annotations displayed to the user
+     * @param importantAnnotationsState The current state of the selected annotations
+     */
+    void importantAnnotationsChanged(ImportantAnnotationsState importantAnnotationsState);
+
+
+}

src/main/java/seng302/visualiser/controllers/annotations/ImportantAnnotationsState.java

@@ -0,0 +1,52 @@
+package seng302.visualiser.controllers.annotations;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class ImportantAnnotationsState {
+    public static final Boolean DEFAULT_ANNOTATION_STATE = true;
+    private Map<Annotation, Boolean> currentState;
+
+    /**
+     * Stores the users preference for the annotations
+     * they consider to be important
+     */
+    public ImportantAnnotationsState(){
+        this.currentState = new HashMap<>();
+        initialiseState();
+    }
+
+    /**
+     * Set each annotation to the default annotation state
+     */
+    private void initialiseState(){
+        for (Annotation annotation : getAnnotations()){
+            currentState.put(annotation, DEFAULT_ANNOTATION_STATE);
+        }
+    }
+
+    /**
+     * Sets the state (visibility) of an annotation
+     * @param annotation The annotation to set
+     * @param visible Whether or not the annotation should be visible
+     */
+    public void setAnnotationState(Annotation annotation, Boolean visible){
+        this.currentState.put(annotation, visible);
+    }
+
+    /**
+     * Returns the state (visibility) of a specific annotation
+     * @param annotation The annotation to check
+     * @return True if visible, else false
+     */
+    public Boolean getAnnotationState(Annotation annotation){
+        return this.currentState.containsKey(annotation) && this.currentState.get(annotation);
+    }
+
+    /**
+     * @return Return an array containing all defined annotations
+     */
+    public Annotation[] getAnnotations(){
+        return Annotation.class.getEnumConstants();
+    }
+}

src/main/java/seng302/visualiser/fxObjects/AnnotationBox.java

@@ -0,0 +1,230 @@
+package seng302.visualiser.fxObjects;
+
+import java.util.HashMap;
+import java.util.Map;
+import javafx.application.Platform;
+import javafx.beans.value.ObservableValue;
+import javafx.scene.CacheHint;
+import javafx.scene.Group;
+import javafx.scene.paint.Color;
+import javafx.scene.paint.Paint;
+import javafx.scene.shape.Rectangle;
+import javafx.scene.text.Text;
+
+/**
+ * Grouping of string objects over a semi transparent background.
+ */
+public class AnnotationBox extends Group {
+
+    @FunctionalInterface
+    public interface AnnotationFormatter<T> {
+        String transformString (T input);
+    }
+
+    /**
+     * Class stores a text object and relationship for updating the text object if needed
+     *
+     * @param <T> The type of observable value passed to the annotation, if there is one.
+     */
+    public class Annotation<T> {
+        private Text text;
+        private ObservableValue<T> source;
+        private AnnotationFormatter<T> format;
+
+        /**
+         * Constructor for observing annotation
+         * @param textObject the javaFX text object the annotation is displayed in
+         * @param source observable value that the annotation is taken from
+         * @param formatter interface describing how to format the source data if needed
+         */
+        public Annotation (Text textObject, ObservableValue<T> source, AnnotationFormatter<T> formatter) {
+            this.text = textObject;
+            this.source = source;
+            this.format = formatter;
+            source.addListener((obs, oldVal, newVal) ->
+                Platform.runLater(() -> text.setText(format.transformString(newVal)))
+            );
+        }
+
+        /**
+         * Constructor for a static annotation
+         * @param textObject the javaFX text object the annotation is displayed in
+         * @param annotationText the static value of the test object
+         */
+        public Annotation (Text textObject, String annotationText) {
+            textObject.setText(annotationText);
+            text = textObject;
+        }
+
+        private Text getText () {
+            return text;
+        }
+    }
+
+    //Text offset constants
+    private static final double X_OFFSET_TEXT = 20d;
+    private static final double Y_OFFSET_TEXT_INIT = -35d;
+    private static final double Y_OFFSET_PER_TEXT = 12d;
+    //Background constants
+    private static final double TEXT_BUFFER = 3;
+    private static final double BACKGROUND_X = X_OFFSET_TEXT - TEXT_BUFFER;
+    private static final double BACKGROUND_Y = Y_OFFSET_TEXT_INIT - TEXT_BUFFER;
+    private static final double BACKGROUND_H_PER_TEXT = 9.5d;
+    private static final double BACKGROUND_ARC_SIZE = 10;
+
+    private int visibleAnnotations = 0;
+    private double backgroundWidth = 145d;
+
+    private Rectangle background = new Rectangle();
+    private Paint theme = Color.BLACK;
+
+    private Map<String, Annotation> annotationsByName = new HashMap<>();
+
+    /**
+     * Creates an empty annotation box. The box is offset from (0,0) by (17, -38).
+     */
+    public AnnotationBox() {
+        this.setCache(true);
+        background.setX(BACKGROUND_X);
+        background.setY(BACKGROUND_Y);
+        background.setWidth(backgroundWidth);
+        background.setHeight(Math.abs(BACKGROUND_X) + TEXT_BUFFER + BACKGROUND_H_PER_TEXT * 4);
+        background.setArcHeight(BACKGROUND_ARC_SIZE);
+        background.setArcWidth(BACKGROUND_ARC_SIZE);
+        background.setFill(new Color(1, 1, 1, 0.75));
+        background.setStroke(theme);
+        background.setStrokeWidth(2);
+        background.setCache(true);
+        background.setCacheHint(CacheHint.SPEED);
+        this.getChildren().add(background);
+    }
+
+    /**
+     * Adds an annotation to the box. Use the name to reference the annotation for removal or\
+     * changing visibility.
+     * @param annotationName the name of the annotation.
+     * @param annotation the annotation.
+     */
+    public void addAnnotation (String annotationName, Annotation annotation) {
+        annotationsByName.put(annotationName, annotation);
+        Platform.runLater(() -> {
+            this.getChildren().add(annotation.getText());
+            visibleAnnotations++;
+            update();
+        });
+    }
+
+    /**
+     * Adds an annotation with a constant text.
+     * @param annotationName The name of the annotation. Will be used to reference it later.
+     * @param annotationText The desired text.
+     */
+    public void addAnnotation (String annotationName, String annotationText) {
+        Text text = getTextObject();
+        addAnnotation(annotationName, new Annotation(text, annotationText));
+    }
+
+    /**
+     * Adds an annotation with the given name. The annotation will contain the value of the given
+     * ObservableValue. The formatter should return a String and takes an object of the same type as
+     * the ObservableValue as a parameter. The String is how you want the annotation to look.
+     * @param annotationName The annotation name.
+     * @param observable The observable value the annotation will display.
+     * @param formatter A formatting function for the observable value.
+     * @param <E> The type of ObservableValue.
+     */
+    public <E> void addAnnotation (String annotationName, ObservableValue<E> observable,
+        AnnotationFormatter<E> formatter) {
+        Text newText = getTextObject();
+        addAnnotation(annotationName, new Annotation<>(newText, observable, formatter));
+    }
+
+    /**
+     * Sets the visibility of the annotation with the given name if it exists.
+     * @param annotationName The name of the annotation
+     * @param visibility the desired visibility
+     */
+    public void setAnnotationVisibility (String annotationName, boolean visibility) {
+        if (annotationsByName.containsKey(annotationName)) {
+            Text textField = annotationsByName.get(annotationName).text;
+            boolean currentState = textField.visibleProperty().get();
+            if (visibility != currentState) {
+                if (visibility)
+                    visibleAnnotations++;
+                else
+                    visibleAnnotations--;
+            }
+            textField.setVisible(visibility);
+            update();
+        }
+    }
+
+    /**
+     * Removes the annotation with the given name if it exits.
+     * @param annotationName The name given when the annotation was created.
+     */
+    public void removeAnnotation (String annotationName) {
+        if (annotationName.contains(annotationName)) {
+            Platform.runLater(() -> {
+                this.getChildren().remove(annotationsByName.remove(annotationName).getText());
+                visibleAnnotations--;
+                update();
+            });
+            annotationsByName.remove(annotationName);
+        }
+    }
+
+    /**
+     * Moves the annotation.
+     * @param x x location
+     * @param y y location
+     */
+    public void setLocation (double x, double y) {
+        Platform.runLater(()-> this.relocate(x + BACKGROUND_X, y + BACKGROUND_Y));
+    }
+
+    /**
+     * Changes the width of the annotation box. Default is 145.
+     * @param width new width.
+     */
+    public void setWidth (double width) {
+        backgroundWidth = width;
+        Platform.runLater(() -> background.setWidth(backgroundWidth));
+    }
+
+    private void update () {
+        background.setVisible(visibleAnnotations != 0);
+        background.setHeight(Math.abs(BACKGROUND_X) + TEXT_BUFFER + BACKGROUND_H_PER_TEXT * visibleAnnotations);
+        for (int i = 1; i <= visibleAnnotations; i++) {
+            Text text = (Text) this.getChildren().get(i);
+            if (text.visibleProperty().get()) {
+                    text.setX(X_OFFSET_TEXT);
+                    text.setY(Y_OFFSET_TEXT_INIT + Y_OFFSET_PER_TEXT * i);
+//                });
+            }
+        }
+    }
+
+    /**
+     * Returns a text object for an annotation.
+     * @return The text object
+     */
+    private Text getTextObject() {
+        Text text = new Text();
+        text.setFill(theme);
+        text.setStrokeWidth(2);
+        text.setCacheHint(CacheHint.SPEED);
+        text.setCache(true);
+        return text;
+    }
+
+    /**
+     * Set the colour of the annotation box's border and text colour.
+     * @param value desired colour.
+     */
+    public void setFill (Paint value) {
+        theme = value;
+        background.setStroke(theme);
+        annotationsByName.forEach((name, annotation) -> annotation.getText().setFill(theme));
+    }
+}

src/main/java/seng302/visualiser/fxObjects/BoatObject.java

@@ -0,0 +1,295 @@
+package seng302.visualiser.fxObjects;
+
+import java.util.ArrayList;
+import javafx.application.Platform;
+import javafx.geometry.Point2D;
+import javafx.scene.CacheHint;
+import javafx.scene.Group;
+import javafx.scene.Node;
+import javafx.scene.paint.Color;
+import javafx.scene.paint.Paint;
+import javafx.scene.shape.Line;
+import javafx.scene.shape.Polygon;
+import javafx.scene.shape.Polyline;
+import javafx.scene.transform.Rotate;
+
+/**
+ * BoatGroup is a javafx group that by default contains a graphical objects for representing a 2
+ * dimensional boat. It contains a single polygon for the boat, a group of lines to show it's path,
+ * a wake object and two text labels to annotate the boat teams name and the boats velocity. The
+ * boat will update it's position onscreen everytime UpdatePosition is called unless the window is
+ * minimized in which case it attempts to store animations and apply them when the window is
+ * maximised.
+ */
+public class BoatObject extends Group {
+
+    //Constants for drawing
+    private static final double BOAT_HEIGHT = 15d;
+    private static final double BOAT_WIDTH = 10d;
+
+    private double xVelocity;
+    private double yVelocity;
+    private double lastHeading;
+    //Graphical objects
+    private Polyline trail = new Polyline();
+    private Polygon boatPoly;
+    private Wake wake;
+    private Line leftLayLine;
+    private Line rightLayline;
+    private double distanceTravelled, lastRotation;
+    private Point2D lastPoint;
+    private Paint colour = Color.BLACK;
+    private Boolean isSelected, destinationSet;  //All boats are initialised as selected
+    private boolean isPlayer = false;
+
+    /**
+     * Creates a BoatGroup with the default triangular boat polygon.
+     */
+    public BoatObject() {
+        this(-BOAT_WIDTH / 2, BOAT_HEIGHT / 2,
+            0.0, -BOAT_HEIGHT / 2,
+            BOAT_WIDTH / 2, BOAT_HEIGHT / 2);
+    }
+
+    /**
+     * Creates a BoatGroup with the boat being the default polygon. The head of the boat should be
+     * at point (0,0).
+     *
+     * @param points An array of co-ordinates x1,y1,x2,y2,x3,y3... that will make up the boat
+     * polygon.
+     */
+    public BoatObject(double... points) {
+        initChildren(points);
+    }
+
+    /**
+     * Creates the javafx objects that will be the in the group by default.
+     *
+     * @param points An array of co-ordinates x1,y1,x2,y2,x3,y3... that will make up the boat
+     * polygon.
+     */
+    private void initChildren(double... points) {
+        boatPoly = new Polygon(points);
+        boatPoly.setFill(colour);
+        boatPoly.setFill(this.colour);
+        boatPoly.setOnMouseEntered(event -> {
+            boatPoly.setFill(Color.FLORALWHITE);
+            boatPoly.setStroke(Color.RED);
+        });
+        boatPoly.setOnMouseExited(event -> {
+            boatPoly.setFill(colour);
+            boatPoly.setFill(this.colour);
+            boatPoly.setStroke(Color.BLACK);
+        });
+        boatPoly.setOnMouseClicked(event -> setIsSelected(!isSelected));
+        boatPoly.setCache(true);
+        boatPoly.setCacheHint(CacheHint.SPEED);
+
+//        annotationBox = new AnnotationBox();
+//        annotationBox.setFill(colour);
+
+        leftLayLine = new Line();
+        rightLayline = new Line();
+        trail.getStrokeDashArray().setAll(5d, 10d);
+        trail.setCache(true);
+        wake = new Wake(0, -BOAT_HEIGHT);
+        wake.setVisible(true);
+        super.getChildren().addAll(boatPoly);//, annotationBox);
+    }
+
+    public void setFill (Paint value) {
+        this.colour = value;
+        boatPoly.setFill(colour);
+        trail.setStroke(colour);
+    }
+
+    /**
+     * Moves the boat and its children annotations to coordinates specified
+     *
+     * @param x The X coordinate to move the boat to
+     * @param y The Y coordinate to move the boat to
+     * @param rotation The rotation by which the boat moves
+     * @param velocity The velocity the boat is moving
+     */
+    public void moveTo(double x, double y, double rotation, double velocity) {
+        Double dx = Math.abs(boatPoly.getLayoutX() - x);
+        Double dy = Math.abs(boatPoly.getLayoutY() - y);
+        Platform.runLater(() -> {
+            rotateTo(rotation);
+            boatPoly.setLayoutX(x);
+            boatPoly.setLayoutY(y);
+            wake.setLayoutX(x);
+            wake.setLayoutY(y);
+        });
+        wake.setRotation(rotation, velocity);
+//        rotateTo(rotation);
+//        boatPoly.setLayoutX(x);
+//        boatPoly.setLayoutY(y);
+//        wake.setLayoutX(x);
+//        wake.setLayoutY(y);
+//        wake.rotate(rotation);
+
+//        wake.setRotation(rotation, groundSpeed);
+//        isStopped = false;
+//        destinationSet = true;
+        lastRotation = rotation;
+
+        distanceTravelled += Math.sqrt((dx * dx) + (dy * dy));
+
+        if (distanceTravelled > 15 && isPlayer) {
+            distanceTravelled = 0d;
+            Platform.runLater(() -> trail.getPoints().addAll(x, y));
+        }
+    }
+
+    private void rotateTo(double rotation) {
+        boatPoly.getTransforms().setAll(new Rotate(rotation));
+    }
+
+    public void updateLocation() {
+//        double dx = xVelocity / 60;
+//        double dy = yVelocity / 60;
+//
+//        distanceTravelled += Math.abs(dx) + Math.abs(dy);
+//        moveGroupBy(dx, dy);
+//
+//        if (distanceTravelled > 70) {
+//            distanceTravelled = 0d;
+//
+//            if (lastPoint != null) {
+//                Line l = new Line(
+//                    lastPoint.getX(),
+//                    lastPoint.getY(),
+//                    boatPoly.getLayoutX(),
+//                    boatPoly.getLayoutY()
+//                );
+//                l.getStrokeDashArray().setAll(3d, 7d);
+//                l.setStroke(colour);
+//                l.setCache(true);
+//                l.setCacheHint(CacheHint.SPEED);
+//                lineGroup.getChildren().add(l);
+//            }
+//            lastPoint = new Point2D(boatPoly.getLayoutX(), boatPoly.getLayoutY());
+//        }
+//        wake.updatePosition();
+    }
+
+//    /**
+//     * This function works out if a boat is going upwind or down wind. It looks at the boats current position, the next
+//     * gates position and the current wind
+//     * If bot the wind vector from the next gate and the boat from the next gate lay on the same side, then the boat is
+//     * going up wind, if they are on different sides of the gate, then the boat is going downwind
+//     * @param canvasController
+//     */
+//    public Boolean isUpwindLeg(GameViewController canvasController, Mark nextMark) {
+//
+//        Double windAngle = StreamParser.getWindDirection();
+//        GateMark thisGateMark = (GateMark) nextMark;
+//        SingleMark nextMark1 = thisGateMark.getSingleMark1();
+//        SingleMark nextMark2 = thisGateMark.getSingleMark2();
+//        Point2D nextMarkPoint1 = canvasController.findScaledXY(nextMark1.getLatitude(), nextMark1.getLongitude());
+//        Point2D nextMarkPoint2 = canvasController.findScaledXY(nextMark2.getLatitude(), nextMark2.getLongitude());
+//
+//        Point2D boatCurrentPoint = new Point2D(boatPoly.getLayoutX(), boatPoly.getLayoutY());
+//        Point2D windTestPoint = GeoUtility.makeArbitraryVectorPoint(nextMarkPoint1, windAngle, 10d);
+//
+//
+//        Integer boatLineFuncResult = GeoUtility.lineFunction(nextMarkPoint1, nextMarkPoint2, boatCurrentPoint);
+//        Integer windLineFuncResult = GeoUtility.lineFunction(nextMarkPoint1, nextMarkPoint2, windTestPoint);
+//
+//
+//        /*
+//        If both the wind vector from the gate and the boat from the gate are on the same side of that gate, then the
+//        boat is travelling into the wind. thus upwind. Otherwise if they are on different sides, then the boat is going
+//        with the wind.
+//         */
+//        return boatLineFuncResult.equals(windLineFuncResult);
+//        return true;
+//    }
+
+    public void setIsSelected(Boolean isSelected) {
+        this.isSelected = isSelected;
+        setLineGroupVisible(isSelected);
+        setWakeVisible(isSelected);
+        setLayLinesVisible(isSelected);
+    }
+
+    public void setVisibility (boolean teamName, boolean velocity, boolean estTime, boolean legTime,
+        boolean trail, boolean wake) {
+//        boatAnnotations.setVisible(teamName, velocity, estTime, legTime);
+//        this.wake.setVisible(wake);
+        this.trail.setVisible(trail);
+    }
+
+    public void setLineGroupVisible(Boolean visible) {
+        trail.setVisible(visible);
+    }
+
+    public void setWakeVisible(Boolean visible) {
+//        wake.setVisible(visible);
+    }
+
+    public void setLayLinesVisible(Boolean visible) {
+        leftLayLine.setVisible(visible);
+        rightLayline.setVisible(visible);
+    }
+
+    public void setLaylines(Line line1, Line line2) {
+        this.leftLayLine = line1;
+        this.rightLayline = line2;
+    }
+
+    public ArrayList<Line> getLaylines() {
+        ArrayList<Line> laylines = new ArrayList<>();
+        laylines.add(leftLayLine);
+        laylines.add(rightLayline);
+        return laylines;
+    }
+
+    public Group getWake () {
+        return wake;
+    }
+
+    public Node getTrail() {
+        return trail;
+    }
+
+    public Double getBoatLayoutX() {
+        return boatPoly.getLayoutX();
+    }
+
+
+    public Double getBoatLayoutY() {
+        return boatPoly.getLayoutY();
+    }
+
+    /**
+     * Sets this boat to appear highlighted
+     */
+    public void setAsPlayer() {
+        boatPoly.getPoints().setAll(
+          -BOAT_WIDTH / 1.75, BOAT_HEIGHT / 1.75,
+            0.0, -BOAT_HEIGHT / 1.75,
+            BOAT_WIDTH / 1.75, BOAT_HEIGHT / 1.75
+        );
+        boatPoly.setStroke(Color.BLACK);
+        boatPoly.setStrokeWidth(3);
+        isPlayer = true;
+    }
+
+    public void setTrajectory(double heading, double velocity) {
+        wake.setRotation(lastHeading - heading, velocity);
+        rotateTo(heading);
+        xVelocity = Math.cos(Math.toRadians(heading)) * velocity;
+        yVelocity = Math.sin(Math.toRadians(heading)) * velocity;
+        lastHeading = heading;
+    }
+
+    public void setTrajectory(double heading, double velocity, double scaleFactorX, double scaleFactorY) {
+//        wake.setRotation(lastHeading - heading, velocity);
+//        rotateTo(heading);
+//        xVelocity = Math.cos(Math.toRadians(heading)) * velocity * scaleFactorX;
+//        yVelocity = Math.sin(Math.toRadians(heading)) * velocity * scaleFactorY;
+        lastHeading = heading;
+    }
+}

src/main/java/seng302/visualiser/fxObjects/CourseBoundary.java

@@ -0,0 +1,15 @@
+package seng302.visualiser.fxObjects;
+
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Polygon;
+
+/**
+ * Polygon with default course border settings.
+ */
+public class CourseBoundary extends Polygon {
+    public CourseBoundary() {
+        this.setStroke(new Color(0.0f, 0.0f, 0.74509807f, 1));
+        this.setStrokeWidth(3);
+        this.setFill(new Color(0,0,0,0));
+    }
+}

src/main/java/seng302/visualiser/fxObjects/Gate.java

@@ -0,0 +1,20 @@
+package seng302.visualiser.fxObjects;
+
+import javafx.scene.paint.Paint;
+import javafx.scene.shape.Line;
+
+/**
+ * Visual object representing a gate, intended to connect two mark objects.
+ */
+public class Gate extends Line {
+
+    public Gate () {
+        super.setStrokeWidth(2);
+        super.getStrokeDashArray().setAll(2d, 5d);
+    }
+
+    public Gate (Paint colour) {
+        this();
+        super.setStroke(colour);
+    }
+}

src/main/java/seng302/visualiser/fxObjects/Marker.java

@@ -0,0 +1,19 @@
+package seng302.visualiser.fxObjects;
+
+import javafx.scene.paint.Paint;
+import javafx.scene.shape.Circle;
+
+/**
+ * Visual object for a mark.
+ */
+public class Marker extends Circle {
+
+    public Marker() {
+        super.setRadius(5);
+    }
+
+    public Marker(Paint colour) {
+        this();
+        super.setFill(colour);
+    }
+}

src/main/java/seng302/visualiser/fxObjects/Wake.java

@@ -0,0 +1,124 @@
+package seng302.visualiser.fxObjects;
+
+import javafx.application.Platform;
+import javafx.scene.CacheHint;
+import javafx.scene.Group;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Arc;
+import javafx.scene.shape.ArcType;
+import javafx.scene.shape.StrokeLineCap;
+import javafx.scene.transform.Rotate;
+
+/**
+ * A group containing objects used to represent wakes onscreen. Contains functionality for their animation.
+ */
+public class Wake extends Group {
+
+    //The number of wakes
+    private int numWakes = 8;
+    //The total possible difference between the first wake and the last. Increasing/Decreasing this will make wakes fan out more/less.
+    private final double MAX_DIFF = 75;
+    //Increasing/decreasing this will alter the speed that wakes converge when the heading stop changing. Anything over about 1500 may cause oscillation.
+    private final int UNIFICATION_SPEED = 45;
+
+
+    private Arc[] arcs = new Arc[numWakes];
+    private double[] rotationalVelocities = new double[numWakes];
+    private double[] rotations = new double[numWakes];
+
+    /**
+     * Create a wake at the given location.
+     *
+     * @param startingX x location where the tip of wake arcs will be.
+     * @param startingY y location where the tip of wake arcs will be.
+     */
+    Wake(double startingX, double startingY) {
+        super.setLayoutX(startingX);
+        super.setLayoutY(startingY);
+        Arc arc;
+        for (int i = 0; i < numWakes; i++) {
+            //Default triangle is -110 deg out of phase with a default wake and has angle of 40 deg.
+            arc = new Arc(0, 0, 0, 0, -110, 40);
+            arc.setCache(true);
+            arc.setCacheHint(CacheHint.ROTATE);
+            arc.setType(ArcType.OPEN);
+            arc.setStroke(
+                new Color(
+                    0.18, 0.7, 1.0, 1.0 + (-0.99 / numWakes * i)
+                )
+            );
+            arc.setStrokeWidth(3.0);
+            arc.setStrokeLineCap(StrokeLineCap.ROUND);
+            arc.setFill(new Color(0.0, 0.0, 0.0, 0.0));
+            arcs[i] = arc;
+            arc.getTransforms().setAll(
+                    new Rotate(1)
+            );
+        }
+        super.getChildren().addAll(arcs);
+    }
+
+    void setRotation (double rotation, double velocity) {
+//        if (Math.abs(rotations[0] - rotation) > 20) {
+          Platform.runLater(() -> {
+              rotate(rotation);
+              double rad = (14 / numWakes) + velocity;
+              for (Arc arc : arcs) {
+                  arc.setRadiusX(rad);
+                  arc.setRadiusY(rad);
+                  rad += (14 / numWakes) + (velocity / 2.5);
+              }
+          });
+//        } else {
+//            rotations[0] = rotation;
+//            ((Rotate) arcs[0].getTransforms().get(0)).setAngle(rotation);
+//            for (int i = 1; i < numWakes; i++) {
+//                double wakeSeparationRad = Math.toRadians(rotations[i - 1] - rotations[i]);
+//                double shortestDistance = Math.atan2(
+//                        Math.sin(wakeSeparationRad),
+//                        Math.cos(wakeSeparationRad)
+//                );
+//                double distDeg = Math.toDegrees(shortestDistance);
+//                if (rotationalVelocities[i - 1] < 0.01 && rotationalVelocities[i - 1] > -0.01) {
+//                    rotationalVelocities[i] = distDeg / UNIFICATION_SPEED * 2 * Math.log(Math.abs(distDeg) + 1) / Math.log(MAX_DIFF / numWakes);
+//
+//                } else {
+//                    if (distDeg < (MAX_DIFF / numWakes)) {
+//                        rotationalVelocities[i] = distDeg / UNIFICATION_SPEED * Math.log(Math.abs(distDeg) + 1) / Math.log(MAX_DIFF / numWakes);
+//                    } else
+//                        rotationalVelocities[i] = rotationalVelocities[i - 1];
+//                }
+//            }
+//        }
+
+//        double rad = (14 / numWakes) + velocity;
+//        for (Arc arc : arcs) {
+//            arc.setRadiusX(rad);
+//            arc.setRadiusY(rad);
+//            rad += (14 / numWakes) + (velocity / 2.5);
+//        }
+    }
+
+    /**
+     * Arcs rotate based on the distance they would have travelled over the supplied time interval.
+     */
+    void updatePosition() {
+        for (int i = 0; i < numWakes; i++) {
+            rotations[i] = rotations[i] + rotationalVelocities[i];
+            ((Rotate) arcs[i].getTransforms().get(0)).setAngle(rotations[i]);
+        }
+    }
+
+    /**
+     * Rotate all wakes to the given rotation.
+     *
+     * @param rotation the from north angle in degrees to rotate to.
+     */
+    void rotate(double rotation) {
+        for (int i = 0; i < arcs.length; i++) {
+            rotations[i] = rotation;
+            rotationalVelocities[i] = 0;
+            arcs[i].getTransforms().setAll(new Rotate(rotation));
+        }
+    }
+}

src/main/java/seng302/visualiser/map/Boundary.java

@@ -0,0 +1,44 @@
+package seng302.visualiser.map;
+
+/**
+ * The Boundary class represents a rectangle territorial boundary on a map. It
+ * contains four extremity double values(N, E, S, W). N and S are represented as
+ * latitudes in radians. E and W are represented as longitudes in radians.
+ *
+ * Created by Haoming on 10/5/17
+ */
+public class Boundary {
+
+	private double northLat, eastLng, southLat, westLng;
+
+	public Boundary(double northLat, double eastLng, double southLat, double westLng) {
+		this.northLat = northLat;
+		this.eastLng = eastLng;
+		this.southLat = southLat;
+		this.westLng = westLng;
+	}
+
+	double getCentreLat() {
+		return (northLat + southLat) / 2;
+	}
+
+	double getCentreLng() {
+		return (eastLng + westLng) / 2;
+	}
+
+	double getNorthLat() {
+		return northLat;
+	}
+
+	double getEastLng() {
+		return eastLng;
+	}
+
+	double getSouthLat() {
+		return southLat;
+	}
+
+	double getWestLng() {
+		return westLng;
+	}
+}

src/main/java/seng302/visualiser/map/CanvasMap.java

@@ -0,0 +1,104 @@
+package seng302.visualiser.map;
+
+import java.net.URL;
+import javafx.geometry.Point2D;
+import javafx.scene.image.Image;
+import javax.net.ssl.HttpsURLConnection;
+import java.net.URL;
+import java.lang.Math;
+
+/**
+ * CanvasMap retrieves a map image with given geo boundary from Google Map server.
+ * By passing a rectangle like geo boundary, it returns a map image with the
+ * highest resolution. However, due to free quote account usage limit, the maximum
+ * resolution is only 1280 * 1280.
+ *
+ * Created by Haoming on 15/5/2017
+ */
+public class CanvasMap {
+
+	private Boundary boundary;
+	private long width, height;  // desired image size
+	private int zoom;
+
+	private String KEY = "AIzaSyC-5oOShMCY5Oy_9L7guYMPUPFHDMr37wE";
+
+	public CanvasMap(Boundary boundary) {
+		this.boundary = boundary;
+		calculateOptimalMapSize();
+	}
+
+	public Image getMapImage() {
+		try {
+			URL url = new URL(getRequest());
+			HttpsURLConnection connection = (HttpsURLConnection) url.openConnection();
+
+			return new Image(connection.getInputStream());
+		} catch (Exception e) {
+			System.out.println("[CanvasMap] Exception");
+			return null;
+		}
+	}
+
+	private String getRequest() {
+		StringBuilder sb = new StringBuilder();
+		sb.append("https://maps.googleapis.com/maps/api/staticmap?");
+		sb.append(String.format("center=%f,%f", boundary.getCentreLat(), boundary.getCentreLng()));
+		sb.append(String.format("&zoom=%d", zoom));
+		sb.append(String.format("&size=%dx%d&scale=2", width, height));
+		sb.append("&style=feature:all|element:labels|visibility:off"); // hide all labels on map
+//		sb.append(String.format("&markers=%f,%f", boundary.getSouthLat(), boundary.getWestLng()));
+//		sb.append(String.format("&key=%s", KEY));
+		return sb.toString();
+	}
+
+	private void calculateOptimalMapSize() {
+		for (int z = 20; z > 0; z--) {
+			MapSize mapSize = getMapSize(z, boundary);
+			zoom = z;
+			width = mapSize.width;
+			height = mapSize.height;
+			// if map size is valid, exit the loop as we have the highest resolution
+			if (mapSize.isValid()) break;
+		}
+	}
+
+	private MapSize getMapSize(int zoom, Boundary boundary) {
+		double scale = Math.pow(2, zoom);
+		GeoPoint geoSW = new GeoPoint(boundary.getSouthLat(), boundary.getWestLng());
+		GeoPoint geoNE = new GeoPoint(boundary.getNorthLat(), boundary.getEastLng());
+		Point2D pointSW = MercatorProjection.toMapPoint(geoSW);
+		Point2D pointNE = MercatorProjection.toMapPoint(geoNE);
+		return new MapSize(Math.abs(pointNE.getX() - pointSW.getX()) * scale,
+				Math.abs(pointNE.getY() - pointSW.getY()) * scale);
+	}
+
+	class MapSize {
+		long width, height;
+
+		MapSize(double width, double height) {
+			this.width = Math.round(width);
+			this.height = Math.round(height);
+		}
+
+		/**
+		 * Map size is valid when width and height are both less than 640 pixels
+		 * @return true if both dimensions are less than 640px
+		 */
+		boolean isValid() {
+			return Math.max(width, height) <= 640;
+		}
+	}
+
+	public long getWidth() {
+		return width;
+	}
+
+	public long getHeight() {
+		return height;
+	}
+
+	public int getZoom() {
+		return zoom;
+	}
+}

src/main/java/seng302/visualiser/map/MercatorProjection.java

@@ -0,0 +1,55 @@
+package seng302.visualiser.map;
+
+import javafx.geometry.Point2D;
+import seng302.model.GeoPoint;
+
+/**
+ * An utility class useful to convert between Geo locations and Mercator projection
+ * planar coordinates.
+ * Created by Haoming on 15/5/2017
+ */
+public class MercatorProjection {
+
+	private static final double MERCATOR_RANGE = 256;
+	private static final double pixelsPerLngDegree = MERCATOR_RANGE / 360.0;
+	private static final double pixelsPerLngRadian = MERCATOR_RANGE / (2 * Math.PI);
+
+	/**
+	 * A help function keeps the value in bound between -0.9999 and 0.9999.
+	 * @param value in bound value
+	 * @return the value in bound
+	 */
+	private static double bound(double value) {
+		return Math.min(Math.max(value, -0.9999), 0.9999);
+	}
+
+	/**
+	 * Projects a Geo Location (lat, lng) on a planar
+	 * @param geo GeoPoint (lat, lng) location to be projected
+	 * @return the projection Point2D (x, y) on planar
+	 */
+	static Point2D toMapPoint(GeoPoint geo) {
+		double x, y;
+		Point2D origin = new Point2D(MERCATOR_RANGE / 2.0, MERCATOR_RANGE / 2.0);
+		x = (origin.getX() + geo.getLng() * pixelsPerLngDegree);
+
+//		NOTE(appleton): Truncating to 0.9999 effectively limits latitude to
+//      89.189.  This is about a third of a tile past the edge of the world tile.
+		double sinY = bound(Math.sin(Math.toRadians(geo.getLat())));
+		y = origin.getY() + 0.5 * Math.log((1 + sinY) / (1 - sinY)) * (-pixelsPerLngRadian);
+		return new Point2D(x, y);
+	}
+
+	/**
+	 * Converts the planar projection (x, y) back to Geo Location (lat, lng)
+	 * @param point Point2D (x, y) to be converted back
+	 * @return the original Geo location converted from the given projection point
+	 */
+	public static GeoPoint toMapGeo(Point2D point) {
+		Point2D origin = new Point2D(MERCATOR_RANGE / 2.0, MERCATOR_RANGE / 2.0);
+		double lng = (point.getX() - origin.getX()) / pixelsPerLngDegree;
+		double latRadians = (point.getY() - origin.getY()) / (-pixelsPerLngRadian);
+		double lat = Math.toDegrees(2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2.0);
+		return new GeoPoint(lat, lng);
+	}
+}

src/main/java/seng302/visualiser/map/TestMapController.java

@@ -0,0 +1,22 @@
+package seng302.visualiser.map;
+
+import java.net.URL;
+import java.util.ResourceBundle;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.canvas.Canvas;
+import javafx.scene.canvas.GraphicsContext;
+
+public class TestMapController implements Initializable{
+
+	@FXML
+	private Canvas mapCanvas;
+
+	@Override
+	public void initialize(URL location, ResourceBundle resources) {
+		GraphicsContext gc = mapCanvas.getGraphicsContext2D();
+		Boundary bound = new Boundary(57.662943, 11.848501, 57.673945, 11.824966);
+		CanvasMap canvasMap = new CanvasMap(bound);
+		gc.drawImage(canvasMap.getMapImage(), 0, 0, canvasMap.getWidth(), canvasMap.getHeight());
+	}
+}