I recently picked up a book at Singapore’s National Library. The title is Expert JavaScript.

The book starts with a chapter explaining about the concept of object in JavaScript. The opening chapter really blows my mind. Below code is familiar to me:

//create object
var animal = {};

//define property
animal.legs = 4;

But I don’t know that I can configure the properties as below:

var animal= {};
 
Object.defineProperty(animal, 'legs', {
  writable: true,
  configurable: true,
  enumerable: true,
  value: 4
});
 
Object.defineProperty(animal, 'ears', {
  writable: true,
  configurable: true,
  enumerable: true,
  value: 2
});
 
Object.defineProperty(animal, 'secretTrackerEnabled', {
  enumerable: false,
  value: true
}); 

for (var x in animal) {
  console.log(x);
}

// => legs
// => ears
 

Seriously, this book is really good. It only only took me one chapter to realize how I have missed so much of JavaScript’s core concept.

Just come back from watching The Amazingly Stupid Spider-Man 2. I’m not saying Spider-Man is stupid; I just feel stupid for bringing my brain along to watch this movie.

There is just too many goofy moments that make the movie weak. For example, there’s one moment where Peter Parker swung then hit into the wall as he tried to catch Gwen to talk. Come on Spidey, this is your second movie. Shouldn’t you master that landing skill already?

Another goof is the usage of Internet inside a private jet. There was a scene where Peter’s father, Richard Parker was uploading his self-confession video. As far as I know, internet in private jet is only available in 2008. So that’s like 6 years ago. Considering that the average age of people graduated from high school is 17-19 years old, that makes Peter Parker was at least a 11 year old boy when his parents left him at Aunt May’s house. But the movie actually states that Peter was a 4 years old boy when his parents left him.

Oh, and how did Spider-Man defeated Electro? He defeated Electro using a law of physics that says battery will explode if it is overloaded. There was even a scene showing exploding batteries which is used to prove this law. Come on man! This Electro “battery” guy can literally disperse his physical body into electricity, use the power cable to travel, then rearrange himself somewhere else (provided it’s near a power plug) at will. Your normal battery can’t do that! Not even that mighty Energizer battery.

Now that we are talking about physics, do you know why an arrow has a metal arrowhead? Because F = m x a!. So I think Spider-Man’s web is a violation of Newton’s Law. Don’t you think so? Think about it. How can Spider-Man shot his web into buildings then use it to swing around New York’s skyscrapers unless his web has a heavy mass?

And one more thing, do you know what will happen if someone falling from high altitude, then Spidey shot his web trying to save that person, miraculously managed to stick the web to the stomach, then Spidey pulled his web? Broke back, my friend!

Hmm.. this is not the first time I disappointed with Spider-Man movie. I guess I should stick with Batman and Jack Sparrow.

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!