IS480 Team wiki: 2013T2 OneRevolution ProjectDocumentation Resources

From IS480
Revision as of 04:00, 28 February 2014 by Xinyi.lim.2011 (talk | contribs)
Jump to navigation Jump to search

1234380 660420237315127 959544661 n.jpg

OneRevoHome.png Home   About Us 2.png About Us   OneRevoProjectOverview.png Project Overview   OneRevoProjectManagement.png Project Management   OneRevoProjectDocumentation.png Project Documentation

Use Case Diagram   Sequence Diagram   Architecture Diagram   UI Mockups   User Testing   Meeting Minutes   Resources   Presentation Materials

Technologies Used

Technology OneRevo.png

Technical Challenges

1. No prior experience with javascript
2. Using google maps API
3. Jquery
4. D3
5. Getting the database and server up
6. Using data from the maps to show D3

Technical Complexity

Marker Management

Drag and Drop Marker

EcoPlanning makes use of a drag and drop function to pin 4 different markers to the map. As google map does not provide any API for a drag and drop function, we decided to create our own jQuery function to implement the dragging of different marker images to the map. Below is a sample of the code used to implement the drag and drop of markers.

OneRevo Technical Complexity P1.png
  • After the page is loaded, the marker image with id ‘#draggable1’ can be drag out of its original position. This is done by cloning the image so that the clone image can be move around in the web application.
  • After the marker is dropped, the stop function is called. The stop function will find the coordinates on the map which the marker is drop.
  • myName is a method used to allow user to give their markers a desired name.

Rename of Marker

Upon our client request, we have added an additional feature to the drag and drop which is to give their markers a desired name. Before the marker is drop onto the map, the application will prompt the user if he wants to give a name to his markers. By default, the application will give the markers a unique name for example, S1, M1, DC1, C1, S2, M2, DC2, C2 and so on.

The user can also choose to give his marker a custom name. Each custom name created has also a unique id attached to it but it cannot be viewed by the user. User will only see the name he created for the marker on the map. Below is a sample of the code used to display the automated or custom name of the markers.

OneRevo Technical Complexity P2.png

Creating an automated marker

OneRevo Technical Complexity P3.png

Creating a custom marker

  • The pinning of the marker has to take into consideration the zooming in and out of the map as well. In order to accomplish this, we have to set the map attribute of the marker to our map which is $map.

  • We used a unique icon to represent our markers so that the names of the markers can be seen on the markers itself. Each role has a different color icon - blue for supplier, green for manufacturer, red for distribution center and yellow for customer.

Initially, we wanted to place the names at the bottom of each marker. However, to implement it with the google marker variable and the drag and drop function proves to be impossible. Hence, we have to change the way we display the names by putting it together with the marker icons instead.


Consolidating multiple markers

One of the functionalities that our application can do is to combine markers together or what we call consolidating markers. The consolidated markers can be created between 2 or more markers chosen to be consolidated. If a user chose to consolidate only 2 markers, we will use the interpolate method from google map geometry library to find the middle coordinates.

Below is a sample of the code used for consolidation of 2 markers.

OneRevo Technical Complexity P4.png
  • The first step is to retrieve the latitudes and longitudes of the 2 markers.
  • With the respective coordinates, we create a LatLng object that google map recognize
  • We pass both LatLng object into the google library and call the interpolation method. Interpolation will require the fraction of the way between the 2 markers. In our case, since the markers have to be in the middle, we choose the fraction to be 0.5.

However, if a user decided to consolidate 3 or more markers, the interpolate function cannot achieve that as it only accept 2 parameters. Therefore, if 3 or more markers are selected, we will “draw a line” connecting all the markers to form a shape. We then use the formula for centroid of an irregular polygon to solve this.

OneRevo Technical Complexity P5.PNG

However, before we can find the mid-point, we have to sort the coordinates first to ensure that there are no intersecting lines when the polygon is formed.

OneRevo Technical Complexity P6.png

  • The first step is to find the top marker. If there are multiple markers with the same height, we chose the left most marker.

After finding the top left marker, we will sort the remaining coordinates in a clockwise manner. We sort the markers by pairs excluding the top left marker.

OneRevo Technical Complexity P7.png

1. We find the next marker by comparing the gradient from the other markers to the top left marker.
2. If the two markers have the same gradient, we take the one closest to the top left marker by calculating the distance using the Haversine formula. Else, we will take the point with the negative gradient. If both marker have positive gradient or both have negative gradient, we take the steepest slope.

OneRevo Technical Complexity P8.png

The formula for centroid of irregular polygon is as shown below.

OneRevo Technical Complexity P9.png

Cx and Cy represent the mid-point vertices of an irregular polygon. Translating to our application context, it means these two points will be the longitude and latitude of our mid-point respectively. A is the area of our irregular polygon. From the three formula, they have one thing in common, which is XiYi+1 – Xi+1Yi . Therefore, we start by finding this value first which we define in our code as partialSum.

OneRevo Technical Complexity P10.png

1. This line calculate the part of XiYi+1 – Xi+1Yi in the formula.

2. After finding the partialSum, we add them to sum so that we can store the summation of is XiYi+1 – Xi+1Yi to be used later to calculate the area.

3. Now, in order to complete the summation of the first two points, we multiply Xi + Xi+1 and Yi + Yi+1

4. Using the summation of sum we calculate in step 2, we divide by half to find our area of irregular polygon

5. We complete the calculation by dividing our sumY and sumX by 6 times the area to find the mid-point of our irregular polygon, which is also the mid-point of multiple markers.