HeaderSIS.jpg

IS480 Team wiki: 2013T2 OneRevolution ProjectDocumentation Resources

From IS480
Revision as of 04:08, 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.


Consolidatoin


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.


Deconsolidation


Deconsolidating multiple marker

Deconsolidation is the opposite of consolidation. If consolidation is to combine markers, deconsolidation is to split up markers. Similar to consolidation, we allow users to deconsolidate one marker to multiple markers. The important factor involving deconsolidation is the bearing and distance from the original marker to its destination marker.
In order to get a suitable distance, we first look for the nearest marker from the deconsolidated marker and find the distance between them. This distance will become the radius of the circle where the deconsolidated marker is the mid-point and the nearest marker is anywhere on the boundary of the circle.

OneRevo Technical Complexity P11.png
Finding a suitable distance using radius of circle


The next step is to find the bearing to place the marker that is to be created after deconsolidation. This will depend on the number of markers to be created after deconsolidated. If the user chooses to deconsolidate to 4 markers, each marker will be 90degree (360degree/4) apart. If the user chooses to deconsolidate to 6 markers, each marker will then be 60degree (360 degree/6) apart.

OneRevo Technical Complexity P12.png
Deconsolidation to 4 markers from bearing


The last step will be to get the coordinates for the four newly deconsolidated markers. This will be calculated through the equation of the circle: (x-a)2 + (y-b)2 = r2
From the equation above, r is the radius that we found previously and x, y is the latitude and longitude of the mid-point respectively. Taking the 1st marker as an example, the latitude of the 1st marker is the same as the latitude of the mid-point since its directly above it. Therefore, a is equal to x. Substituting all the values into the equation, we get b which is the longitude of the 1st marker.