In my recent project, one of its important feature was to be able to display all seaports that currently have ISO Tanks in the world map. To do that, first I need to have a database of seaports complete with the longitude & latitude position. Below is the data-entry form I created.
You can slowly insert the data one-by-one, or you can just scrape the web 🙂
Since Google Map is using decimal Latitude/Longitude value, we need to create a method to convert from degree (e.g. 103° 50′ N) to decimal value (e.g. 103.833) . Here’s my code in C#:
// ---- Code SNIP -------
//Declare the Regex as part of the class member
private Regex rgxLatLon = new Regex("((?<degree>[0-9]+)°)((\\ )(?<minute>[0-9]+)')?((\\ )(?<second>[0-9]+)\")?((\\ )(?<dir>(E|S|N|W)))");
// ---- Code SNIP -------
private bool convDegDec(String raw, out double result)
{
result = 0;
var mLat = rgxLatLon.Match(raw);
if (mLat.Success)
{
foreach (var g in mLat.Groups)
{
var deg = mLat.Groups["degree"].Value;
if (!String.IsNullOrEmpty(deg))
result = double.Parse(deg);
var min = mLat.Groups["minute"].Value;
if (!String.IsNullOrEmpty(min))
result += (double.Parse(min) / 60);
var sec = mLat.Groups["second"].Value;
if (!String.IsNullOrEmpty(sec))
result += (double.Parse(sec) / 3600);
var dir = mLat.Groups["dir"].Value;
if (dir == "S" || dir == "W")
result = result * (-1);
}
}
return mLat.Success;
}
// ---- Code SNIP -------
Final step is to actually render Google Maps, add the markers according to Seaports’ position, and display the necessary information when the marker is clicked. I won’t explain on how to use the Google Maps API because they already have a very good official guide.
Anyway, here’s how I render the map, markers and information window:
var map, info = {};
function initialize() {
// Centralize the map to Singapore
var mapOptions = {
center : new google.maps.LatLng(1.2666666666666666, 103.83333333333333),
zoom : 6
};
// I have a div with id='map-canvas' as the map's placeholder
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
//get the Seaports and its Tanks count
$.ajax({
// the JSON webservice, add tick to prevent caching
url : '/Tank/MapData?_tick=' + Math.random(),
dataType : 'json'
}).always(function (resp) {
var obj = {};
eval("obj = " + resp.responseText);
/* Sample JSON object returned by /Tank/MapData:
{
data : [{
"CurPort" : "PKL",
"CurrentPort" : "Port Klang",
"decLat" : 3.0,
"decLon" : 101.4,
"TankCount" : 41
}, {
"CurPort" : "SIN",
"CurrentPort" : "Singapore",
"decLat" : 1.2666666666666666,
"decLon" : 103.83333333333333,
"TankCount" : 44
}, {
"CurPort" : "JKT",
"CurrentPort" : "Jakarta",
"decLat" : -6.1,
"decLon" : 106.86666666666666,
"TankCount" : 18
}, {
"CurPort" : "KUA",
"CurrentPort" : "Kuantan ",
"decLat" : 3.9666666666666668,
"decLon" : 103.43333333333334,
"TankCount" : 47
}
],
total : 4
}
*/
if (obj.data) {
$.each(obj.data, function (i, p) {
// set marker's position
var myLatlng = new google.maps.LatLng(p.decLat, p.decLon);
// the info window to show if the marker is clicked
// the info window contains a hyperlink to SeaPort's details
var infowindow = new google.maps.InfoWindow({
content : "<div class='winInfo'><strong><a href='#' class='liPort' data-port='" + p.CurPort + "'>" + p.CurrentPort.toUpperCase() + "</a></strong><div>Tanks : " + p.TankCount + "</div></div>",
disableAutoPan : true
});
// create the marker
var marker = new google.maps.Marker({
position : myLatlng,
map : map,
title : p.CurPort
});
// add the info window to global collection
info[p.CurPort] = infowindow;
// if marker is clicked, show the info window
google.maps.event.addListener(marker, 'click', function () {
info[marker.title].open(map, marker);
});
// by default, show the info window
infowindow.open(map, marker);
});
// bind the click event on the document and use selector
// to ensure any new info window's hyperlink is clickable
$(document).on('click', '.liPort', {}, function () {
var port = $(this).attr('data-port');
var title = $(this).text();
top.Northwind.addTab({
url : '/Tank/Overview?port=' + port,
title : title,
icon : 'icon-database'
});
});
// refresh the map data every 30 seconds
setInterval(function () {
$.ajax({
url : '/Tank/MapData?_tick=' + Math.random(),
dataType : 'json'
}).always(function (resp) {
var obj = {};
eval("obj = " + resp.responseText);
if (obj.data) {
$.each(obj.data, function (ii, pp) {
var dPort = $(".liPort[data-port='" + pp.CurPort + "']");
if (dPort.length > 0) {
dPort.parent().next().html("<div>Tanks : " + pp.TankCount + "</div>");
}
});
}
});
}, 30000);
}
});
}
// call initialize() when map is fully loaded
google.maps.event.addDomListener(window, 'load', initialize);
Here’s how the map will look like:
Good luck on your implementation. I hope it helps, cheers!
About Hardono
Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.
