IS480 Team wiki: 2013T2 OneRevolution ProjectDocumentation Resources
|Home||About Us||Project Overview||Project Management||Project Documentation|
|Use Case Diagram||Sequence Diagram||Architecture Diagram||UI Mockups||User Testing||Meeting Minutes||Resources||Presentation Materials|
2. Using google maps API
5. Getting the database and server up
6. Using data from the maps to show D3
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.
- 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.
- 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.
- 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.
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.
- 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.
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.
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.
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.