BIT Consultants » Javascript http://www.bitconsultants.net Sun, 25 Jul 2010 21:54:45 +0000 en hourly 1 http://wordpress.org/?v=3.0 Geocoding with Google Maps and the Zend Framework http://www.bitconsultants.net/2010/geocoding-with-google-maps-and-the-zend-framework/ http://www.bitconsultants.net/2010/geocoding-with-google-maps-and-the-zend-framework/#comments Sat, 24 Apr 2010 17:51:40 +0000 Rob http://www.bitconsultants.net/?p=231 Maps are a great way to engage your users and visualize data, but it can be a little tricky to setup. Here I will walk you through the steps needed to get a map up and running.

Sign Up

Apply for a Google Maps API Key (free) here using your domain without a subdomain or www (this will allow you to use key with or without www and on subdomains): http://code.google.com/apis/maps/signup.html

Configuration

Put the API key in your configuration file (application.ini, config.ini, etc.) like this:

[google]
google_map_key =  YOUR_KEY

Bootstrapping

In your index.php file, add the following code:

//update CONFIG_PATH to point to your configuration file
defined(CONFIG_PATH)
or define('CONFIG_PATH', APPLICATION_PATH . '/configs/application.ini');
Zend_Registry::set('google',    new Zend_Config_Ini(CONFIG_PATH, 'google'));

This will add your api key to the registry so that it can be accessed throughout your application.

Model

In your models directory, create a new class called ‘Geocoder.php’. This will be the file that contains the application logic for retreiving coordinates on a given location.

models/Geocoder.php


/**
* Geocoder
*
* @author Robert McVey
*/
class Geocoder {
	protected $key = "";
	public function __construct($apiKey)
	{
		$this->key = $apiKey;
	}
	private function _getGeocodedLatitudeAndLongitude($address)
	{
		$client = new Zend_Http_Client();
		$client->setUri($this->getGeocodingUri());
		$client->setParameterGet('q', urlencode($address))
			->setParameterGet('output', 'json')
			->setParameterGet('sensor', 'false')
			->setParameterGet('key', $this->key);
		$result = $client->request('GET');
		$response = Zend_Json_Decoder::decode(
			$result->getBody(),
			Zend_Json::TYPE_OBJECT
		);
		return $response;
	}
	public function getCoordinates($address)
	{
		$response = $this->_getGeocodedLatitudeAndLongitude($address);
		$return = array();
		if(isset($result->Placemark[0]->Point->coordinates[1])){
			$return(
			'lat' => $result->Placemark[0]->Point->coordinates[1];
			'lon' => $result->Placemark[0]->Point->coordinates[0];
			);
		}else{
			$return = null;
		}
		return $return;
	}
	private function getGeocodingUri()
	{
		return 'http://maps.google.com/maps/geo';
	}
}
?>

Usage

Alright, that was pretty easy. Now we just have to implement this in our controller. Here is a sample model that uses the Geocoder class to return geotagged User objects.
models/User.php

class User extends Zend_Db_Table_Abstract{
	protected $_name = 'users';
	protected $key;
	protected $geocoder;

	public function init()
	{
		$this->key = Zend_Registry::get('google')->google_map_key;
		$this->geocoder = new Geocoder($this->key);

	}
	public function getUsersAndGeocode()
	{
		$result = $this->fetchAll();

		$users    = $result->_toArray();
		foreach($users as $user)
		{
			$address = "{$user['address']} {$user['city']} {$user['state']} {$user['zip']}";

			$latlon = $this->geocoder->getCoordinates($address);
			if($latlon)
			{
				$user['lat'] = $latlon['lat'];

				$user['lon'] = $latlon['lon'];
			}
		}
		return $users;
	}

}
?>

The controller part is a little too easy. We will setup a reference to our user table and create a map action. Within the map action we get all of users and geocode them. We pass that collection to our view. This file should be located here:
controllers/UserController.php

class UserController extends Zend_Controller_Action{
	protected $user_table;
	public function init()
	{
		//database connectivity stuff is up to you

		$this->user_table = new User();
	}
	public function mapAction()
	{

		$users = $this->user_table->getUsersAndGeocode();
		$this->view->users = $users;
	}
}
?>

And finally, the view. Here we will create our map div, load the Google Maps API (don’t forget to sub out your key in the script src). We are using a custom marker here (personIcon); you can add your own image here by changing the path to your image. I recommend the image be pretty small with a transparent background. Given our current setup, this file would be located at this path:
views/scripts/user/map.phtml

<div id="map">

<noscript>
<center>
<strong>To view the map feature, you need to have Javascript enabled. If you are unsure about how to turn Javascript support on, please</p>
<p>read Google's instructions found here: <a href="https://www.google.com/support/adsense/bin/answer.py?hl=en&amp;answer=12654" target="_blank">LINK</a></strong>

</center></p>
<p></noscript>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!--
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=your_key"></script>
-->

<script type="text/javascript">
 //Sorry, I love jquery! If you don't use window.onload = function(){initialize();}
    $(document).ready(function(){
        initialize();

    });
var map;
var personIcon;
function initialize() {
    if(GBrowserIsCompatible){

        map = new google.maps.Map2(document.getElementById("thurtene_map"));
        map.setUIToDefault();
        map.setCenter(new google.maps.LatLng('48.858001709', '2.29460000992'), 4);
        <? endif; ?>

        personIcon            = new GIcon();
  /**
  * Change this marker to be a small transparent custom image
  *
  */

        personIcon.image      = '/img/common/custom_marker.png';
        personIcon.shadow     = "http://www.google.com/mapfiles/shadow50.png";
        personIcon.iconSize   = new GSize(32,32);
        personIcon.shadowSize = new GSize(37,34);

        personIcon.iconAnchor = new GPoint(9,34);
        personIcon.infoWindowAnchor = new GPoint(9,2);
    }
    addOverlays(map);
}

function personMarker(point, index, dto){
 //set our marker to be the custom icon we created
    markerOptions = {icon:personIcon};
    var marker = new GMarker(point, markerOptions);

/**
 * This is the content in the info bubble
 */
    GEvent.addListener(marker, 'click', function(){
       marker.openInfoWindowHtml(
            '<h3><a href="/profile/view/'+dto.user_id+'">'+dto.user_first+' '+ dto.user_last+'</a></h3>
'
            +dto.user_address+'

'
            +dto.user_city+'
'
            +dto.user_state+' '+dto.user_zip
        );

    });
    return marker;
}
/*
* Here is where we loop through our users and create new markers for each

*/
function addOverlays(map){
    <?php
  $geo = $this->users->_toArray();
        $size = sizeof($geo);

 ?>
    <? for($i = 0; $i < $size; $i++): ?>
                var latLon = new GLatLng(<?php echo $geo[$i]['lat'];?>, <?php echo $geo[$i]['lon'];?>);

                map.addOverlay(personMarker(latLon, <?=$i?>, <?=Zend_Json::encode($geo[$i])?>));
    <?php endfor; ?>
}
</script>

Post a comment if you have any questions.

]]> http://www.bitconsultants.net/2010/geocoding-with-google-maps-and-the-zend-framework/feed/ 3 jQuery Tabs Keyboard Shortcuts http://www.bitconsultants.net/2009/jquery-tabs-keyboard-shortcuts/ http://www.bitconsultants.net/2009/jquery-tabs-keyboard-shortcuts/#comments Sun, 26 Apr 2009 02:49:50 +0000 Rob http://www.bitconsultants.net/?p=240 I have integrated jQuery’s UI tabs into a number of my projects and have had to significantly modify the code to achieve some goals (like being able to easily add and remove tabs. One of the simpler thing I have done with the tabbed interface is let users navigate them using keyboard shortcuts. Here is a simple snippet I use to allow users to select a tab using alt+number. I use the js-hotkeys plugin found here

<html>
	<head>
		<title>Keyboard Tabs</title>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
		<script type="text/javascript" src="http://js-hotkeys.googlecode.com/files/jquery.hotkeys-0.7.9.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
                //initialize tabs
				$tabs = $('#tabs').tabs();
                //create a reference to our document
				var this_document = $(document);
                //nothing fancy, just iterate over a number set and generate the shortcuts
				$.each([1,2,3,4,5,6,7,8,9], function(index){
					this_document.bind('keydown', 'alt+'+index, function(e){
						 $tabs.tabs('select', (index - 1));
						 e.preventDefault();
					 });
				});
			});
		</script>
	</head>
	<body>
		<div class="demo">

		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Nunc tincidunt</a></li>
				<li><a href="#tabs-2">Proin dolor</a></li>
				<li><a href="#tabs-3">Aenean lacinia</a></li>
			</ul>
			<div id="tabs-1">
				<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
			</div>
			<div id="tabs-2">
				<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
			</div>
			<div id="tabs-3">
				<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
				<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
			</div>
		</div>

		</div><!-- End demo -->

		<div style="display: none;" class="demo-description">

		<p>Click tabs to swap between content that is broken into logical sections.</p>
		</div>
	</body>
</html>

If you missed the part that did the shortcuts, here it is again:

$(document).ready(function(){
                //initialize tabs
				$tabs = $('#tabs').tabs();
                //create a reference to our document
				var this_document = $(document);
                //nothing fancy, just iterate over a number set and generate the shortcuts
				$.each([1,2,3,4,5,6,7,8,9], function(index){
					this_document.bind('keydown', 'alt+'+index, function(e){
						 $tabs.tabs('select', (index - 1));
						 e.preventDefault();
					 });
				});
			});

That’s it! If you have any questions, please post!

]]> http://www.bitconsultants.net/2009/jquery-tabs-keyboard-shortcuts/feed/ 0 Actionscript 2.0: Centered Popup Window http://www.bitconsultants.net/2009/actionscript-2-0-centered-popup-window/ http://www.bitconsultants.net/2009/actionscript-2-0-centered-popup-window/#comments Mon, 09 Mar 2009 05:31:31 +0000 Rob http://www.bitconsultants.net/?p=136 At some point we all need a centered popup windows. Here is a useful Actionscript 2.0 function to help get a popup window, that allows for some customization based on input parameters. Check the actual implementation at the bottom. It is also worth mentioning here, that no AS popup script will work in local testing mode. You must upload to a server (or move to a local server directory) for this to function properly.


function winOpen(url:String, winName:String, wide:Number, high:Number, chrome:Boolean, centered:Boolean)
{
//Chrome on window un-centered
if (chrome == true && centered == false)­
{
getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=1,location=1,scrollbars=1,status=1,resizable=1,fullscreen=no'); "+winName+".focus(); void(0);");
}
//Chromeless un-centered
else if (chrome == false && centered == false)­
{
getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+"'); "+winName+".focus(); void(0);");
}
//Chrome on, centered
else if (chrome == true && centered == true)
{
getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=1,location=1,scrollbars=1,status=1,resizable=1,fullscreen=no'); "+winName+".focus(); screen_height = window.screen.availHeight;screen_width = window.screen.availWidth; left_point = parseInt(screen_width/2)-("+wide+"/2); top_point = parseInt(screen_height/2)-("+high+"/2); setTimeout('"+winName+".moveTo(left_point,top_point)',10); void(0);");
}
//Chromeless, centered (most popular!)
else if (chrome == false && centered == true)
{
getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=no,location=no,scrollbars=no,status=no,resizable=no,fullscreen=no'); "+winName+".focus(); screen_height = window.screen.availHeight;screen_width = window.screen.availWidth; left_point = parseInt(screen_width/2)-("+wide+"/2); top_point = parseInt(screen_height/2)-("+high+"/2); setTimeout('"+winName+".moveTo(left_point,top_point)',10); void(0);");
}
}

//Sample of application, requires a button with instance name of button_mc on stage
button_mc.onRelease = function()
{
winOpen("http://www.bitconsultants.net/", "MyWindow", 350, 350, true, true);
­}

function winOpen(url:String, winName:String, wide:Number, high:Number, chrome:Boolean, centered:Boolean)
{
    //Chrome on window un-centered
    if (chrome == true && centered == false)­
    {
        getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=1,location=1,scrollbars=1,status=1,resizable=1,fullscreen=no'); "+winName+".focus(); void(0);");
    }
    //Chromeless un-centered
    else if (chrome == false && centered == false)­
    {
        getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+"'); "+winName+".focus(); void(0);");
    }
    //Chrome on, centered
    else if (chrome == true && centered == true)
    {
        getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=1,location=1,scrollbars=1,status=1,resizable=1,fullscreen=no'); "+winName+".focus(); screen_height = window.screen.availHeight;screen_width = window.screen.availWidth; left_point = parseInt(screen_width/2)-("+wide+"/2); top_point = parseInt(screen_height/2)-("+high+"/2); setTimeout('"+winName+".moveTo(left_point,top_point)',10); void(0);");
    }
    //Chromeless, centered (most popular!)
    else if (chrome == false && centered == true)
    {
        getURL("javascript:"+winName+"=window.open('"+url+"', '"+winName+"', 'width="+wide+",height="+high+",left=0,top=0,toolbar=no,location=no,scrollbars=no,status=no,resizable=no,fullscreen=no'); "+winName+".focus(); screen_height = window.screen.availHeight;screen_width = window.screen.availWidth; left_point = parseInt(screen_width/2)-("+wide+"/2); top_point = parseInt(screen_height/2)-("+high+"/2); setTimeout('"+winName+".moveTo(left_point,top_point)',10); void(0);");
    }
}

//Sample of application, requires a button with instance name of button_mc on stage
button_mc.onRelease = function()
{
    winOpen("http://www.bitconsultants.net/", "MyWindow", 350, 350, true, true);
­}
]]> http://www.bitconsultants.net/2009/actionscript-2-0-centered-popup-window/feed/ 3 jQuery Form Validation: theory and practice http://www.bitconsultants.net/2008/jquery-form-validation-theory-and-practice/ http://www.bitconsultants.net/2008/jquery-form-validation-theory-and-practice/#comments Sun, 27 Jan 2008 21:37:30 +0000 Rob http://www.bitconsultants.net/?p=173 jQuery makes it very easy to validate forms. There are a number of useful plugins, the most prominent being validate. If you are wanting something very lightweight or are just interested in how something like this works, read on. The $.each function allows you to iterate over collections in jQuery, it is really one of the most useful utility methods available. We can iterate over all input elements on a page using $.each like this

var input_count = 0;

$(document).ready(function(){
	$.each($('input'), function(index, value){
		input_count++;
	});
	console.log("Number of inputs:  %i",  input_count);//use Firebug, not alert() !
});

Iterating Over Text Inputs

There is a problem with the above code, any input elements (including buttons) are going to be iterated over, so let’s use a more specific selector to only retrieve input elements of type “text”


...

$.each($('input[type="text"]'), function(index, value){

...

Required Elements

Okay, now we can iterate over our text inputs. So, where to go from here? Do we check that each item has a value? What if some items aren’t required? The easiest way I’ve found to do this is to use a class on required items (I usually call it “required” (creative, huh?)).

...
<form action="" method="POST" id="login_form">
	<dl>
	  <dt>
		<dd>Username <span class="req">*</span></dd>
		<dd><input type="text" name="username" class="required" maxlength="7" /></dd>
		<dd>Password <span class="req">*</span></dd>
		<dd><input type="text" name="password" class="required" maxlength="7" /></dd>
		<dd>Favorite Color<dd>
		<dd><input type="text" name="username" /></dd>
		<dd>Finish</dd>
		<dd><input type="submit" name="submit" /></dd>
	  </dt>
	</dl>
</form>
...

Now we can check which fields are required and cancel form submission if they are empty. Getting rid of our input counter variable, here is the new code

$(document).ready(function(){
	$('#login_form').submit(function(){//add an onsubmit event handler to our form
		var blank_fields = false;//initialize a generic error detector
		$.each($('input[type="text"]'), function(index, value){
			var t = $(this);//limit the number of new jQuery objects created
			if(t.hasClass('required')){//we know it is required
				if(t.val() == "" || t.val() === undefined){
					console.error('%s can not be blank', t.attr('name'));
					blank_fields = true;
				}
			}
		});
		return !blank_fields;//if there are no blank fields, submit
	});
});

That is a mouthful, but it is actually quite simple. When our form is submitted, we iterate over each input item to see if it is required. If it’s required, check to see if it is empty, if it is empty, return false (cancelling form submission).

Now, there are a couple errors with the code above. For one, it is checking all form inputs (not just the one in our form), so if we had multiple forms on the page, both with required elements, this would fail. Also, being able to check more specific criteria would be nice. We will limit our iteration to input items that are of type text and are descendants of the target form. Let’s also add a maxlength attribute to a form field to ensure that it is within the set character length:

$(document).ready(function(){
	$('#login_form').submit(function(){
		var blank_fields = false;
		var length_error = false;//check for length errors
		$.each($('#login_form input[type="text"]'), function(index, value){//limit input elements to those within the form
			var t = $(this);
			if(t.hasClass('required')){
				if(t.val() == "" || t.val() === undefined){//check if it's empty
					console.error('%s can not be blank', t.attr('name'));
					blank_fields = true;
				}
				if(t.attr('maxlength') !== undefined){//if maxlength attribute is present in the current element
					if(t.val().length > t.attr('maxlength')){//check string length against given maxlength
						console.error('%s is too long: %i chars', t.attr('name'), t.val().length);
						length_error = true;
					}
				}
			}
		});
		return !(blank_fields || length_error);//if there are no blank fields and no length errors, submit
	});
});

Okay, now we are getting somewhere. This could be used as is, but it doesn’t provide very friendly error messages (they have to have Firebug installed to know what the errors are). Let’s wrap up our code so far into a jQuery function and provide some more useful errors. I’ve commented changes to the code, but it is mostly the same.

$.fn.validate = function(options){
	/*
	* Define the default error message tag and styling, allow this to be overridden
	*/
	var defaults = {
		 formTag: 'div',
		 color: '#8A1F11',
		 border: '2px solid #FBC2C4',
		 errorBG: '#FBE3E4 0 0',
		 marginBottom:'1em',
		 padding:'0.8em',
		 width: $(this).width()
	 };
	var o = $.extend(defaults, options);

	/*
	* Private method creates error element
	*/
	function genError(msg){
		var err = $(document.createElement(o.formTag));//create an error element
		err.css('border', 		 o.border)
		   .css('background', 	 o.errorBG)
		   .css('margin-bottom', o.marginBottom)
		   .css('padding', 		 o.padding)
		   .css('color', 		 o.color)
		   .css('width', 		 o.width);//Apply css style rules to the error
		err.html(msg);//insert the error message into the element
		return err;
	}

	/*
	* Our slightly modified form validation
	*/
	$(this).submit(function(){//now uses $(this) reference as the method is applied to the form selector
		var blank_fields = false;//initialize a generic error detector
		var length_error = false;
		//now we use $(this).find('input[type="text"]') to locate our forms child elements
		$.each($(this).find('input[type="text"]'), function(index, value){
			var t = $(this);
			if(t.hasClass('required')){
				if(t.val() == "" || t.val() === undefined){
					//instead of logging error, create a new element and append it to the input elements parent
					errormsg = genError(t.attr('name') + ' can not be blank')
					t.parent().append(errormsg);
					blank_fields = true;
				}
				if(t.attr('maxlength') !== undefined){
					if(t.val().length > t.attr('maxlength')){
						//same as above but more concise
						t.parent().append(genError(t.attr('name') + ' is too long'));
						length_error = true;
					}
				}
			}
		});
		return !(blank_fields || length_error);
	});
}

Usage:

$(document).ready(function(){
	$('#login_form').validate({color:'#000'});
});
]]> http://www.bitconsultants.net/2008/jquery-form-validation-theory-and-practice/feed/ 1