One small step for man, one large step for man kind!

Today was a big day in the progress of building our app! After more programming and discovering the world of Javascript we have made the basic prototype of our location feature on the app. We added a few functions to move small squares the the coordinates of our array.

The image below shows the new CSS and some of the new Javascript we added to the page. The CSS controls the formatting of both the map.png and the markers for position. Those have been given the ID's #marker and #destmarker.

The image below shows the new script function to control the movement of the markers. 

 The first function places the marker for where your starting point is. The second function places the destination marker where you have asked it to go. These functions search the array for the place and coordinates you have asked to find, then the marker is placed on the coordinates of the room. 

The image below shows our test map as seen before. Except we have added a second text field.
This text field is to type the room number where you would like to go. You may also notice the small  orange square in the top left corner. This is our destination marker.

In the image below you can see that we have typed room numbers in the text fields. These rooms have been written inside our array and when searched for will be found and plotted on the map.

After pressing the find button you can see that the destination square has moved and you see a pink square. This is the room you are located near or in. We started in the square with the coordinates for A228 and the destination square went to the room with the bookstore coordinates.

This has been a huge breakthrough in developing our map and we are going to continue this route. Next it is on to some UI and UX design.