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