HeaderSIS.jpg

IS480 Team wiki: 2013T2 OneRevolution ProjectDocumentation Resources

From IS480
Revision as of 03:35, 28 February 2014 by Xinyi.lim.2011 (talk | contribs) (Created page with "<center> 600px </center> <!-- Navigation --> {|style="background-color:#fffff; padding: 0px 0 0 0;" width="100%" cellspaci...")
(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   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

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


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