Dec 26 2009

Decimal Degrees conversion and distance of two points on google map

Category: Google Maps,Javascript — Giulio Pons @ 11:06 pm

Those two functions are usefull when you’re making Google Maps applications:
When you show the coordinates of a point, it’s sometimes better to show them as degrees and not as deciaml (even if decimal is simpler). Each of the two coordinates can be converted with the same function. In the function call the “tipo” is the type of the “v” value: if you call the function without the type, then the default type is “N”, that means “NORTH”, it means that you’re converting a Latitude value (Latitude is the angular distance of a point north or south of the Equator). Values for latitude type are “N” for NORTH and “S” for SOUTH.
If you specify “E” or “W” than you’re converting a Longitude value (Longitude is the angular distance of a point east or west of the Greenwich Meridian).

function convertDecDeg(v,tipo) {
	if (!tipo) tipo='N';
	var deg;
	deg = v;
	if (!deg){
		return "";
	} else if (deg > 180 || deg < 0){
		// convert coordinate from north to south or east to west if wrong tipo
		return convertDecDeg(-v,(tipo=='N'?'S': (tipo=='E'?'W':tipo) ));
	} else {
		var gpsdeg = parseInt(deg);
		var remainder = deg - (gpsdeg * 1.0);
		var gpsmin = remainder * 60.0;
		var D = gpsdeg;
		var M = parseInt(gpsmin);
		var remainder2 = gpsmin - (parseInt(gpsmin)*1.0);
		var S = parseInt(remainder2*60.0);
		return D+"&deg; "+M+"' "+S+"'' "+tipo;
	}
}

This function calculates distance with the Haversine formula, this formula assumes that our Earth is spherical, but it isn’t since it’s more like a big orange fruit also compresses at poles. I’ve read that this function has an error about + o – 3 meters (it depends), but it’s a small error for many purposes, I’ve used it on my google maps ruler:

function distance(lat1,lon1,lat2,lon2) {
	var R = 6371; // km (change this constant to get miles)
	var dLat = (lat2-lat1) * Math.PI / 180;
	var dLon = (lon2-lon1) * Math.PI / 180;
	var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
		Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
		Math.sin(dLon/2) * Math.sin(dLon/2);
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
	var d = R * c;
	if (d>1) return Math.round(d)+"km";
	else if (d<=1) return Math.round(d*1000)+"m";
	return d;
}
Share

Tags: , , , , , , , ,

Dec 19 2009

Ruler for Google Maps v3 to measure distance on map

Category: Google Maps,Javascript — Giulio Pons @ 9:30 am

I’ve made a ruler to measure distances on a Google Map V3. The file Ruler.js contains a two function: one to calculate the distance between two points on the map with their position expressed in decimal degrees, and one function that add the ruler. Ther “ruler” is composed with two markers, a poly and two labels which show the distance. The labels are placed on the map with the Labels.js class from Marc Ridley, downloaded from his blog.

Here is the link to the demo and here is the link for download it.

ruler

Here is the code for ruler.js addruler function:

function addruler() {

	ruler1 = new google.maps.Marker({
		position: map.getCenter() ,
		map: map,
		draggable: true
	});

	ruler2 = new google.maps.Marker({
		position: map.getCenter() ,
		map: map,
		draggable: true
	});

	var ruler1label = new Label({ map: map });
	var ruler2label = new Label({ map: map });
	ruler1label.bindTo('position', ruler1, 'position');
	ruler2label.bindTo('position', ruler2, 'position');

	rulerpoly = new google.maps.Polyline({
		path: [ruler1.position, ruler2.position] ,
		strokeColor: "#FFFF00",
		strokeOpacity: .7,
		strokeWeight: 8
	});
	rulerpoly.setMap(map);

	ruler1label.set('text',"0m");
	ruler2label.set('text',"0m");

	google.maps.event.addListener(ruler1, 'drag', function() {
		rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
		ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
		ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
	});

	google.maps.event.addListener(ruler2, 'drag', function() {
		rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
		ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
		ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
	});

}

And this is the function to calculate distances:

function distance(lat1,lon1,lat2,lon2) {
	var R = 6371; // km (change this constant to get miles)
	var dLat = (lat2-lat1) * Math.PI / 180;
	var dLon = (lon2-lon1) * Math.PI / 180;
	var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
		Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
		Math.sin(dLon/2) * Math.sin(dLon/2);
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
	var d = R * c;
	if (d>1) return Math.round(d)+"km";
	else if (d<=1) return Math.round(d*1000)+"m";
	return d;
}
Share

Tags: , , , ,

Dec 13 2009

Mini gallery/slideshow with PHP and JQuery

Category: Javascript,Php — Giulio Pons @ 1:52 pm

Sometimes I’ve had to quickly put in a page a simple slideshow, the first times I’ve searched a lot around for a small gallery, but finally I’ve decided that the best way is to do it by myself. This because every complex and very nice gallery that I’ve found need to be studied to make them work as you want, and sometimes they have complex css to integrate or php code to put in the correct directory… I think that many times we all just need a simple php that read a dir, and pass images array to a stupid slideshow.

If you already have JQuery in your pages this gallery is really fast, it works with this small PHP function that find images:

/*
    this php function read all the jpg/gif/png files in the specifed
    directory and return a string with the names
*/
function getJsArray($dir) {
	$out = "";
	if ($dh = opendir($dir)) {
		while (($file = readdir($dh)) !== false)
			if(in_array( substr(strrchr($file, '.'), 1) , array('gif','png','jpg') ))
				$out.= ($out?",":"")."'".$dir.$file."'";
		closedir($dh);
	} else { die ("no dir"); }
	return $out;
}

And uses this tiny javascript (the first lines are for configuration, they also call the php function on the server to read images files):

//---------------------------------------------
var gallery_current_pos = 0;			// gallery counter position
var gallery_idname = "container";		// id of the gallery container
var gallery_timer = 5000;			// 5 seconds
var gallery_ar = Array(<?=getJsArray("./minislides/")?>);

function goGallery() {
	if (gallery_current_pos>gallery_ar.length - 1) gallery_current_pos =0;
	$('#'+gallery_idname).fadeTo("fast", 0 , function () {
		$('#'+gallery_idname).css("background-image","url(" + gallery_ar[gallery_current_pos] + ")");
		$('#'+gallery_idname).fadeTo("slow", 1);
		gallery_current_pos++;
	});
	if (gallery_ar.length>1) setTimeout(	function () { goGallery(); }, gallery_timer);
}
//---------------------------------------------

The “container” which will show the images is simply a “div” with some defined dimensions declared with css, and the javascript will change its background to show images.

When the page is loaded simply call the function to start gallery.

Watch demo. Watch source.

Share

Tags: , ,

« Previous Page — Next Page »