Javascript objects

I always wanted to create a simple example on how you can create objects in javascript. The example also contains private and public variables and functions.

/* Create a new object */
function testObject() 
{
 /* Private variables can only be called by functions inside this object */
 var privatePropertyValue = 'Private property:1';

 /* Public variables can be directly called through objectname */
 this.publicPropertyValue = 'Public property:1';
 this.objectName = 'testObject';


 /*
  Private functions can only be called by functions inside this object
  Private functions cannot directly access the this method of the object
 */

 function privateFunctionSetVariable() 
 {
  /* 
   Method this is not possible: e.g. 
   this.publicPropertyValue = 'Private function';
   does not refer to the object
  */
  alert("This will fail:" + this.objectName);
  privatePropertyValue = 'Private property:2';
 }

 function privateFunctionSetGlobalVariable(c) 
 {
  alert("This will succeed:" + c.objectName);
  c.publicPropertyValue = 'Public property:3';
 }


 /* Public functions can be directly called through objectname */
 this.publicFunctionSetVariable = function ()
 {
  this.publicPropertyValue = 'Public property:2';
 };

 this.publicCallPrivateFunction = function ()
 {
  privateFunctionSetVariable();
 };

 this.publicCallPrivateFunctionGlobal = function ()
 {
  privateFunctionSetGlobalVariable(this);
 };

 this.publicAlert = function (t,v)
 {
  if(t=='private') alert(eval(v));
  else alert(eval('this.'+ v));
 };

}


var createObject = new testObject();
createObject.publicAlert('public','publicPropertyValue');
createObject.publicFunctionSetVariable();
createObject.publicAlert('public','publicPropertyValue');
createObject.publicCallPrivateFunctionGlobal();
createObject.publicAlert('public','publicPropertyValue');


createObject.publicAlert('private','privatePropertyValue');
createObject.publicCallPrivateFunction();
createObject.publicAlert('private','privatePropertyValue');

Google maps load markers into grid

A problem i recently encoutered was displaying more than 400 markers on a single map. Reading through the google maps api documentation i found the following post regarding this problem: http://code.google.com/apis/maps/.... The first solution mentioned is Grid-based Clustering which fits my needs. However the docs do not explain how to create such a grid. Here i explain what data is necessary to create a grid and load the markers into the grid.

First we need the boundaries of the current map:

var max_lng = map.getBounds().getNorthEast().lng();
var max_lat = map.getBounds().getNorthEast().lat();
var min_lng = map.getBounds().getSouthWest().lng();
var min_lat = map.getBounds().getSouthWest().lat();

These variables much be send to the page which returns the markers, this probably is already the case.

<cfquery name="GetMarkers" datasource="source">
SELECT id, lat, lng
FROM markers
WHERE
(<cfif min_lat lt max_lat>lat <= #max_lat# and lat>= #min_lat#<cfelse>lat <= #max_lat# OR lat>= #min_lat#</cfif>) AND
(<cfif min_lng lt max_lng>lon <= #max_lng# and lon>= #min_lng#<cfelse>lon <= #max_lng# OR lon>= #min_lng#</cfif>)
</cfquery>



<!--- Root of the number of grids: for example 10 means 100 grids --->
<cfset grid_count_root = 30 />
<cfset grid_min_lng = min_lng />
<cfset grid_min_lat = min_lat />
<!--- Array that contains the grid --->
<cfset grid_arr = arrayNew(2) />
<cfset grid_arr_lng = arrayNew(2) />
<cfset grid_arr_lat = arrayNew(2) />
<cfset grid_with_data = arrayNew(1) />
<cfset grid_lng_div = abs((min_lng-max_lng)/grid_count_root) />
<cfset grid_lat_div = abs((min_lat-max_lat)/grid_count_root) />

Now we are ready to create the grid:

<cfloop from=1 to=#grid_count_root# index="i">
 <cfset grid_arr_lng[i][1] = grid_min_lng />
 <cfset grid_arr_lng[i][2] = grid_min_lng + grid_lng_div />
 <cfset grid_arr_lat[i][1] = grid_min_lat />
 <cfset grid_arr_lat[i][2] = grid_min_lat + grid_lat_div />
 <cfset grid_min_lng = grid_min_lng + grid_lng_div />
 <cfset grid_min_lat = grid_min_lat + grid_lat_div />
</cfloop>

<cfloop from=1 to=#arraylen(grid_arr_lng)# index="i">
 <cfloop from=1 to=#arraylen(grid_arr_lng)# index="j">
  <cfset cur_pos = arrayLen(grid_arr)+1 />
  <cfset grid_arr[cur_pos][1] = grid_arr_lng[i][1] />
  <cfset grid_arr[cur_pos][2] = grid_arr_lng[i][2] />
  <cfset grid_arr[cur_pos][3] = grid_arr_lat[j][1] />
  <cfset grid_arr[cur_pos][4] = grid_arr_lat[j][2] />
  <cfset grid_arr[cur_pos][5] = '' />
  <cfset grid_arr[cur_pos][6] = '' />
  <cfset grid_arr[cur_pos][7] = '' />
  <cfset grid_arr[cur_pos][8] = 0 />
 </cfloop>
</cfloop>

Almost there now we load the markers into the grid

<cfloop from=1 to=#GetMarkers.recordcount# index="i">
 <cfset lng_grid_pos = #evaluate((GetMarkers.lng[i] -min_lng)/grid_lng_div)# />

 <cfif lng_grid_pos gt 0><cfset lng_grid_pos= #evaluate((ceiling(lng_grid_pos-1)*grid_count_root)+1)#>
 <cfelse><cfset lng_grid_pos = 1 /></cfif>

 <cfset lat_grid_pos = #evaluate((GetMarkers.lat[i] -min_lat)/grid_lat_div)# />

 <cfif lat_grid_pos gt 0><cfset lat_grid_pos= #evaluate((ceiling(lat_grid_pos-1)))#>
 <cfelse><cfset lat_grid_pos = 0 /></cfif>

 <cfset grid_pos = #evaluate(lng_grid_pos+lat_grid_pos)# />
 <cfif grid_arr[grid_pos][5] eq ''>
  <cfset grid_arr[grid_pos][5] = GetMarkers.id[i] />
  <cfset grid_arr[grid_pos][6] = GetMarkers.lat[i] />
  <cfset grid_arr[grid_pos][7] = GetMarkers.lng[i] />
  <cfset grid_with_data[arraylen(grid_with_data)+1] = grid_pos />
 </cfif>
 <cfset grid_arr[grid_pos][8] = grid_arr[grid_pos][8]+1 />
</cfloop>