IS480 Team wiki: 2013T2 OneRevolution ProjectDocumentation Resources

From IS480
Revision as of 22:38, 14 April 2014 by Xinyi.lim.2011 (talk | contribs) (→‎Land or Ocean)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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   Technologies   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 Compexity

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

1) 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.
2) 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.
3) myName is a method used to allow user to give their markers a desired name.

Rename of Marker

Additionally, in the drag and drop feature, user is allowed 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

1) 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.
2) 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.

Consolidation of Markers

Consolidating two markers into one marker

This is our X-Factor, Consolidation of markers, where users are allowed to combine markers together. The business logic behind this is the ability to allow supply chain managers to view the impact on how closing of a number of key players (eg. Manufacturers) and shifting the production to new factory affects Time, Cost and Carbon.
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

1) The first step is to retrieve the latitudes and longitudes of the 2 markers.
2) With the respective coordinates, we create a LatLng object that google map recognize
3) 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.

Consolidating multiple markers into mid-point

1. Sort Markers in Clockwise Direction
If a user decides to consolidate 3 or more markers, we will need to “draw a line” connecting all the markers to form a polygon first. Then, we will use the formula for centroid of an irregular polygon to find the mid-point of the consolidated markers.

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

1) 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

2. Find Centroid of Polygon

OneRevo Technical Complexity P9.png

The formula for centroid of irregular polygon is as shown below.
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.

3. Reorganize Lanes
After the markers are consolidated, the last step is to connect and combine all the lanes involved to the consolidated marker.


Deconsolidation of Markers

1. Find Distance and Heading of Nearest 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.


The next step is to find the heading to place the marker that is to be created after deconsolidation. The heading will be the degrees from the deconsolidated marker to the nearest marker.


1) This line calculates the heading from the deconsolidated marker to all the markers on the map.

2) We then proceed to calculate the distance from the deconsolidated marker to the rest of the markers .

3) While calculating both distance and heading, we also find which marker is the closest marker from the deconsolidated marker.

2. Distribute Markers around Deconsolidated Marker

If the user wants to deconsolidate into 3 markers, the other 2 markers will be pin on the circumference of the circle 180 degree apart from each other. The value 180 is derived by dividing 360 with 2. We continue by using trigonometry rules as well as the distance and heading calculated earlier on to find the latitude and longitude difference from the deconsolidated marker.


 is the basic angle derived from heading while the radius is the distance. Therefore, the coordinates of DC2 which is produced during deconsolidation will be (x+width,y+height). X being the latitude of DC1 while y is the longitude of DC1.

Below is the code used to find the height and width depending on the heading between the deconsolidated marker and the closest marker.


1) Coordinates of the deconsolidated marker remain the same, so we will just store its current coordinates.

2) Depending on the heading, we find the basic angle  and calculate the height and width difference from the deconsolidated marker.

3. Reorganize Lanes for the Markers Involved
To end the deconsolidation process, we duplicate the lanes that are shipping the goods to the deconsolidated marker. As for markers that are receiving the goods from the deconsolidated marker, we distribute them according to the closest distance between the deconsolidated marker and the markers created.



Land or Ocean

1. Detect Elevation Level of Marker

If users are to drop a marker to the ocean, our application will help to relocate that marker to the land. The first step to achieve this is to detect if a marker is in the land or ocean. As google map API does not have a specific method to do this, we implement a workaround, which is to use the elevation level of a point instead.

The following code is how we detect the elevation level of a point.


However, the disadvantage of this method is that it cannot differentiate between land, river or lakes. There may also be some terrains that are very close to the ocean level. In a case where the user plot a points to the river, we decided to let it be as there might be a case where an infrastructure is build on the river as well. For example, a supplier running a fish farm in the river.

2. Drawing Grids

We continue by getting the current status of the map, which the user is viewing. We then compute the distance from the north and south as well as the east and west of the map. Next, we will use this distance to help us draw a transparent grid on the map.


The grid is 700 kilometer by 700 kilometer apart. Although it may seem like a big number, this distance is actually pretty close on the map. The number 700 is derived through a trial and error process. Basically, we consider the time taken to load these grids to the map as well as how often user will plot their markers to the ocean. After drawing out the grid, the next step is to find out which grid has more than 50% of land being occupied and store these grids into an array.

The following is the code for this process.


1. The first part is to get the current state of the map and find the distance between the north and south as well as the east and west of the map.

2. We use a nested for loop to draw out a transparent grid.

3. Lastly, we detect if the grid has more than 50% being occupied by land. If it does, we will store that grid into an array called landMarkers.

3. Pin Marker to Land

With an array of “land grids”, the final step is to find the closest marker and relocate the marker to land.