himanshukumar660 / vessel-tracking

This website demonstrates the API usage for real time vessel history tracking.

Tracking Consignment

Ships, carrying thousands of shipments around the world, are attached with a GPS tracker which updates the GPS location. This task is to create a ship tracking system. Users enter the ship details or tracking number (airway bill) to find the location of the ship. They have multiple journeys from A to B and so on.

Features

• Implemented Real Time vessel tracking through MSSI number
• History Tracking of 45 days
• Customized Google Marker

Language

• Javascript, CSS, HTML
• Materaial Design Bootstrap

APIS

• Marine Tracffic
• Google Maps APIs

Approach

• The user enters the MSSI number of corresponding vessel.
• Using API call to Marine traffic Database, the History of the vessel is tracked and is stored in a JSON Object.
• Iterating through the JSONO, the Checkpoints are filled in the Checkpoints Table.
• The Geocodes of the vessels are stored in an array.
• Google Maps APIs are used for plottting all the Geocodes over the course of all the history tracks.
• Using Polylines, these geocodes are connected to each other to make the trajectory of the vessel visible.

Getting Started with contribution

if you have liked this project, I immensly welcome you to contribute and make this even more successful. So, the getting started with the projct is quite simple. Since, it is not built on any MVC Framework, anyone can get started with just downloading this repository and running the index.html file in their browser.

• popup.css : This file could be found in the assests/css folder. This is mainly responsible for all the layouts and designing.
• popup.js : This file is maily reponsible for all the API calls and rendering of the data.

If you want to get started, follow the steps given below :

• Clone the repository.
• Open the repo in your favourite text editor.
• Go through the files that I have mentioned above.
• Follow the codes. Now, if you have completed the above steps, you could now start contributing :
• if you wish to raise an issue, follow github instructions on how to raise them.
• if you wish to work on existing issues, just go to issue section, and check if that has been already assigned to anyone else. If not, just comment that you are interested on working on that particular issue. You would be then assigned that issue, if it has not already been taken by others.
• if you have made certain changes, just commit to your local branch and raise a PULL request here. You could follow Github instructions on how to raise a Pull Request. Your code will then be validated and possibly merged.

BEST SUPPORTED ON CHROME ;)

vessel-tracking's Issues

api key changed, uncommented, removed data, app not calling api

function submit() {
// LOST ALL MARINE TRAFFIC API CREDITS IN THE PROCESS OF TESTING, SO I HAVE COMMENTED OUT THE API CALL METHODS, INSTEAD MADE A JSON OBJECT THAT WOULD HAVE BEEN RETURNED FROM THE API CALLS. IN ORDER TO MAKE API CALLS, JUST UNCOMMENT
// VAR API_KEY
// VAR Days
// VAR adr_url
// $.getJSON(adr_url, function(data) {
// AND REMOVE THE VAR data.

var API_KEY = "cdc336da85504df5266bd66f1975cfc59c2224a1";
var Days = 45;
var MSSI = document.getElementById('mssi').value;
var adr_url = "http://services.marinetraffic.com/api/exportvesseltrack/" + API_KEY + "/v:2/period:daily/days:" + Days + "/mmsi:" + MSSI + "/protocol:jsono";

$.getJSON(adr_url, function(data) {	
if (data.errors) {
	var Error = JSON.stringify(data.errors[0].detail).replace(/["]/g, "");
	document.getElementById('details').innerHTML = '<div class="text-center"><i class="fa fa-close" style="font-size:7em;color:red" aria-hidden="true"></i><br><br>' + "<h>" + Error + "</h></div>";
} else {

	var address_components = "";
	var geocode_lat = JSON.stringify(data[data.length - 1].LAT).replace(/["]/g, "");
	var geocode_lon = JSON.stringify(data[data.length - 1].LON).replace(/["]/g, "");
var bounds = new google.maps.LatLngBounds();
var marker, each;
	var flightPlanCoordinates = [];
var icon_anchor = {
  url: './img/anchor.png'
};

var icon_blob = {
  url: './img/dot.png'
};
var count = data.length - 1;
var map = new google.maps.Map(document.getElementById('details'), {
  zoom: 8,
  center: new google.maps.LatLng(geocode_lat, geocode_lon),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
console.log('data');
for (var each in data) {
  var time = data[each].TIMESTAMP.replace(/[T]/g, " ");
		var time = time.split(' ');
  var icn;
		address_components = "<tr>" +
			"<th scope='row'>" + time[0].replace(/[-]/g, "/") + "</th>" +
			"<td>" + time[1] + "</td>" +
			"<td>" + JSON.stringify(data[each].LAT).replace(/["]/g, "") + "</td>" +
			"<td>" + JSON.stringify(data[each].LON).replace(/["]/g, "") + "</td>" +
			"</tr>" + address_components;
    bounds.extend(new google.maps.LatLng(JSON.stringify(data[each].LAT).replace(/["_]/g, ""), JSON.stringify(data[each].LON).replace(/["]/g, "")));
		flightPlanCoordinates.push({
			lat: Number(JSON.stringify(data[each].LAT).replace(/["]/g, "")),
			lng: Number(JSON.stringify(data[each].LON).replace(/["]/g, ""))
		});
		if (each == count) {
			console.log("Executes")
			icn = icon_anchor;
		} else {
			console.log("Executes2")
			icn = icon_blob;
		}
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(JSON.stringify(data[each].LAT).replace(/["_]/g, ""), JSON.stringify(data[each].LON).replace(/["]/g, "")),
			map: map,
			icon: icn
		})
	}
map.fitBounds(bounds);
var flightPath = new google.maps.Polyline({
		path: flightPlanCoordinates,
		geodesic: true,
		strokeColor: '#FF0000',
		strokeOpacity: 1.0,
		strokeWeight: 2
	});
flightPath.setMap(map);
document.getElementById('checkpoints').innerHTML = address_components;
}

});

$(document).ready(function() {
$('.search').click(function() {
submit();
});
});

document.onkeydown = function() {
if (window.event.keyCode == '13') {
submit();
}
};
}

how to start contributing via CMoC

i am interested in this project but there are no instructions to getting started with contributing.