codezone4

Download Australian Postcode Data

2014-11-17T00:00:00.002-08:00

Buy Now $30.00

Postcodes 2,952

Suburbs 14,665

States

New South Wales
South Australia
Western Australia
Queensland
Tasmania
Victoria

Self-governing territories

Australian Capital Territory
Northern Territory

Sample Data set

ID	Suburb	Postcode	state_shortname	state_longname	lat	lng
15603	Waterloo	7109	TAS	Tasmania	-43.204994	146.968018
12267	Waterloo corner	5110	SA	South Australia	-34.732128	138.583435
13713	Watermans bay	6020	WA	Western Australia	-31.850863	115.754890
15603	Waterloo	7109	TAS	Tasmania	-43.204994	146.968018
3340	Watersleigh	2540	NSW	New South Wales	-34.855186	150.520370

Features

Available in multiple formats - .csv .sql .doc .json .xml .yml .ods .odt .pdf
Easy integration for existing or new web sites, mobiles apps...etc.
Well-ordered, clean data set
GIS related PHP scripts and functions free for developers
Satisfaction

Contact us for any queries.

* Please note that there may be slight accuracy related problems in the data set as Australian postcodes are changing constantly.

Firefox Geolocation Spoofing

2014-10-11T23:27:00.001-07:00

Firefox Geolocater is a great for playing with fake geolocations. You can add geolocations as you wish and check how your Firefox browser take each of those locations as your current location. The plugin is very useful for developers who are building GIS web applications. You can download it here.

Google Map Multiple WayPoints

2014-10-03T08:00:00.001-07:00

Google Map Multiple WayPoints

Demo


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">

        var myRouter = {
            map_: null,
            directionsHelper_: null,

            stores: [
                    {name: "Thalawa Station", location: new google.maps.LatLng(8.231796, 80.348333)},
                    {name: "Maho Station", location: new google.maps.LatLng(7.8228, 80.2778)},
                    {name: "Mirigama Station", location: new google.maps.LatLng(7.242555, 80.126472)},
                    {name: "Veyangoda Station", location: new google.maps.LatLng(7.153015, 80.058488)},
                    {name: "Gampaha Station", location: new google.maps.LatLng(7.093543, 79.993703)}
                ],

            calcRoute: function() {

                var waypts = [];

                for (var i in this.stores) {
                    waypts.push({
                        location: this.stores[i].location,
                        stopover:true
                    });
                }
                var request = {
                    //origin: new google.maps.LatLng(8.344216, 80.410917),
					origin: "Anuradhapura Railway Station",
                    destination: "Colombo Fort Railway Station",
                    waypoints: waypts,
                    optimizeWaypoints: true,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };

                var _SELF = this;
                this.directionsHelper_.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        _SELF.directionsDisplay_.setDirections(response);
                        return;
                    }
                    console.log('Directions Status: ' + status);
                });
            },

            init: function(mapid) {

                this.directionsHelper_ = new google.maps.DirectionsService();
                this.directionsDisplay_ = new google.maps.DirectionsRenderer();

                var center = new google.maps.LatLng(8.344216, 80.410917);
                var myOptions = {
                    zoom:7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: center
                }
                this.map_ = new google.maps.Map(document.getElementById(mapid), myOptions);
                this.directionsDisplay_.setMap(this.map_);

                this.calcRoute();
            }
        };

        $(document).ready(function() {
            myRouter.init('map');
        });

    </script>
    <style type="text/css">
        #map {
            height: 500px;
            width: 600px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

MySQL Check Time Duration Passed?

2014-10-03T04:24:00.002-07:00

MySQL Time Duration

You may want to check whether a particular date has passed using start date, time duration and current date when the target date is not physically stored.

For clarity, consider a db table schema as follows.

+-----------+--------------------------+------------------+
| event_id | start_time               | duration_seconds |
+-----------+--------------------------+------------------+
| 005      |'2014-10-1 12:13:08'      | 86400            |
+-----------+--------------------------+------------------+

Here `duration_seconds` is stored using integers. If TIME is used, there 's a limit for 24 hrs.
If you want to get only adverts that have not expired, you will run a query like this.


SELECT * FROM  `events` WHERE TIME_TO_SEC(timediff(now(),start_time))<=`duration_seconds`;

Prevent HTTP Cache with PHP

2014-09-25T04:58:00.000-07:00

HTTP Cache

HTTP Cache can be troublesome during development in some occasions specially in developing and testing web services, testing endpoints. We can use PHP headers to prevent and disable HTTP cache.


header("Content-Type: application/json");
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Other than the above, there are other techniques of prevent browser caching.

CodeIgniter Like Flash Data in PHP

2014-09-23T04:52:00.000-07:00

CodeIgniter



class FlashMessage {

    public static function render() {
        if (!isset($_SESSION['my_my_messages'])) {
            return null;
        }
        $my_messages = $_SESSION['my_messages'];
        unset($_SESSION['my_messages']);
        return implode('<br/>', $my_messages);
    }

    public static function add($message) {
        if (!isset($_SESSION['my_messages'])) {
            $_SESSION['my_messages'] = array();
        }
        $_SESSION['my_messages'][] = $message;
    }

}

iPhone Push Notifications PHP Server

2014-07-25T08:42:00.000-07:00


<?php
$ctx = stream_context_create();
stream_context_set_option($ctx, 'ssl', 'local_cert', YOUR_.PEM_FILE);
stream_context_set_option($ctx, 'ssl', 'passphrase', YOUR_PASSPHRASE);
 
$fp = stream_socket_client(
        'ssl://gateway.sandbox.push.apple.com:2195', $err, $errstr, 60, STREAM_CLIENT_CONNECT | STREAM_CLIENT_PERSISTENT, $ctx);
 
if (!$fp) {
    exit("Failed to connect: $err $errstr

");
}
 
echo 'Connected to APN
';
 
 
// Create the payload body
$body['aps'] = array(
    'badge' => +1,
    'alert' => 'Testing push notifications',
    'sound' => 'new_wall_paper.wav',
    'action-loc-key' => 'OK'
);
 
$payload = json_encode($body);
 
for ($i = 0; $i < count($tokens); $i++) {
    $msg = chr(0) . pack('n', 32) . pack('H*', $tokens [$i]) . pack('n', strlen($payload)) . $payload;
    fwrite($fp, $msg, strlen($msg));
}
 
echo "Completed sending messages";
fclose($fp);
?>

Passing Multiple Parameters to Form Validation Custom Callbacks in Codeigniter

2014-06-30T07:06:00.000-07:00

CI natively only allows for single parameter in custom callbacks. For an instance see the following code.


$this->form_validation->set_rules
('hstate', 'State', 'required|callback_suburb_check[' . $suburb . ']');

If you need to pass multiple parameters, you have several options. Obviously you can change CI behaviour by subclassing the core library. But in this tutorial we follow the less pain approach. That 's to access required parameters via POST variables within your custom callback function. They are still available in this scope.

There is another way using your PHP string handling knowledge. Just formatting all the parameters as single string and passing to the callback function.


$parameters = 'first_arg' . '||' . 'second_arg' . '||' . 'third_arg';
$this->form_validation->set_rules
('some_field', 'Some Field Name', 'callback__my_callback_function['.$parameters.']');

Then in your callback,


function _my_callback_function($field_value, $second_parameter){
    list($first_param, $second_param, $third_param) = split('||', $second_parameter);
    ...
}

How to check HTML5 Web Storage Support in JavaScript?

2014-06-26T05:27:00.000-07:00

HTML5 Data Storage


function supports_html5_storage() {
                try {
                    return 'sessionStorage' in window && window['sessionStorage'] !== null;
                } catch (e) {
                    return false;
                }
            }
            alert(supports_html5_storage());

How to remove index.php from CodeIgniter URL in Ubuntu

2014-05-03T04:56:00.000-07:00

CodeIgniter

In application/config/config.php
change:

$config['index_page']='index.php';

$config['index_page']='';

Create or modify .htaccess in project root with following content.


# Customized error messages.
ErrorDocument 404 /index.php
# Set the default handler.
DirectoryIndex index.php
# Various rewrite rules.

  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php?/$1 [L,QSA]

Also allow overriding .htaccess in your apache

/etc/apache2/sites-available/default

and edit the file & change to

AllowOverrideAll

and Restart Apache

sudo /etc/init.d/apache2 reload

sudo service apache2 reload

sudo /etc/init.d/httpd reload

How to Install PhoneGap in Ubuntu

2014-05-01T03:36:00.000-07:00

PhoneGap

1. First, check you’ve got Java and Ant installed – you’ll need those later:


sudo apt-get install default-jre
sudo apt-get install default-jdk
sudo apt-get install ant

2. Install npm

sudo apt-get install npm

3. Get the latest nodejs (by installing ‘n’ and running that):

sudo npm update npm -g
sudo npm install n -g
sudo n stable

4. Now install phonegap itself

sudo npm install -g phonegap

5. Download the Android sdk from http://developer.android.com/sdk/index.html, put it somewhere sensible and unpack it:

sudo mv ~/Downloads/adt-bundle-linux-x86-20130917.zip /opt/
cd /opt
sudo unzip adt-bundle-linux-x86-20130917.zip
sudo chmod -R 777 /opt/adt-bundle-linux-x86-20130917

6. Update PATH in ~/.bashrc to include the phonegap tools:

# Add android sdk
PATH=$PATH:/opt/adt-bundle-linux-x86-20130917/sdk/platform-tools:/opt/adt-bundle-linux-x86-20130917/sdk/tools

and then ‘source ~/.bashrc’ to make sure you’ve got the new path setup.

7. Create a phonegap app (I use a “projects” subdirectoy):

cd ~/projects
phonegap create my-app
cd my-app

8. Before you run the app, you’ll need to set up an emulator – run the android tool:

android

9. You may need to select a target (e.g. “Android 4.2.2 (API 17)”), and click the “Install 8 packages..” button (may need several clicks to accept all the licences)

Now setup and start an emulator – in the ‘android’ util, go to Tools -> Manage AVDs, go to the “Device Definitions”, select a device, and use the “Create AVD” button to create a new AVD. Then use the “Start..” button to start the AVD (it may take a surprisingly long time to start fully).

Run the app:

phonegap local run android

You should see the app compile and install on the emulator.

You can do the compile and install steps separately:

phonegap local build android
phonegap install android

10. Add plugins
Optional Step

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git

Original tutorial found at
http://julianhigman.com/blog/2013/10/17/notes-on-setting-up-phonegap-on-ubuntu-for-android-app-development/

Google Map Polygons Demo

2014-03-15T09:02:00.000-07:00

Google Map Polygon

How to get coordinates of a polygon?

How to delete a polygon?


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Drawing Tools</title>
<script src="jquery-1.10.2.js"></script>
 
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
height: 100%;
 
}
 
#panel {
width: 200px;
font-family: Arial, sans-serif;
font-size: 13px;
float: right;
margin: 10px;
}
 
#color-palette {
clear: both;
}
 
.color-button {
width: 14px;
height: 14px;
font-size: 0;
margin: 2px;
float: left;
cursor: pointer;
}
 
#delete-button {
margin-top: 5px;
}
</style>
<script type="text/javascript">
var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};
var polygons = [];
var drawingManager = null;
var bermudaTriangle;
 
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
 
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
selectColor(shape.get('fillColor') || shape.get('strokeColor'));
}
 
function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}
 
function selectColor(color) {
selectedColor = color;
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
}
 
// Retrieves the current options from the drawing manager and replaces the
// stroke or fill color as appropriate.
var polylineOptions = drawingManager.get('polylineOptions');
polylineOptions.strokeColor = color;
drawingManager.set('polylineOptions', polylineOptions);
 
var rectangleOptions = drawingManager.get('rectangleOptions');
rectangleOptions.fillColor = color;
drawingManager.set('rectangleOptions', rectangleOptions);
 
var circleOptions = drawingManager.get('circleOptions');
circleOptions.fillColor = color;
drawingManager.set('circleOptions', circleOptions);
 
var polygonOptions = drawingManager.get('polygonOptions');
polygonOptions.fillColor = color;
drawingManager.set('polygonOptions', polygonOptions);
}
 
function setSelectedShapeColor(color) {
if (selectedShape) {
if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
selectedShape.set('strokeColor', color);
} else {
selectedShape.set('fillColor', color);
}
}
}
 
function makeColorButton(color) {
var button = document.createElement('span');
button.className = 'color-button';
button.style.backgroundColor = color;
google.maps.event.addDomListener(button, 'click', function() {
selectColor(color);
setSelectedShapeColor(color);
});
 
return button;
}
 
function buildColorPalette() {
var colorPalette = document.getElementById('color-palette');
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
var colorButton = makeColorButton(currColor);
colorPalette.appendChild(colorButton);
colorButtons[currColor] = colorButton;
}
selectColor(colors[0]);
}
 
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(22.344, 114.048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
 
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
// Creates a drawing manager attached to the map that allows the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
 
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
 
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
 
// Clear the current selection when the drawing mode is changed, or when the
// map is clicked.
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
 
buildColorPalette();
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
polygons.push(polygon);
 
});
 
}
google.maps.event.addDomListener(window, 'load', initialize);
 
function pointsToText() {
 
for (i = 0; i < polygons.length; i++) {
var coordinates = (polygons[i].overlay.getPath().getArray());
 
for (i = 0; i < coordinates.length; i++) {
 
$("#points").append("(" + coordinates[i]['k'] + "," + coordinates[i]['A'] + "),");
 
}
}
}
</script>
</head>
<body>
<div id="panel">
<div id="color-palette"></div>
<div>
<button id="delete-button">Delete Selected Shape</button>
</div>
<div>
<input type="button" onclick="pointsToText()" value="Get Coordinates">
<textarea id="points" cols="30" rows="20"></textarea><br>
 
</div>
 
</div>
<div id="map"></div>
 
</body>
</html>

Import Excel Data into MySQL with PHP

2014-02-19T04:35:00.000-08:00

PHPExcelReader.

To import Excel data, first you need to have a Excel reader. It should be accurate enough to interpret Excel data as expected. There 's a good old Excel reader.

Download PHPExcelReader.

In the downloaded archive, you only need Excel directory with files including oleread.inc and reader.php.

Just extract it where your web server can access.

Next place your excel file or just create one with some dummy data. Make sure this file is readble by the web server.

Finally create your php script to connect with database, read Excel file and insert data into db.


<?php

require_once 'Excel/reader.php';

$data = new Spreadsheet_Excel_Reader();

$data->setOutputEncoding('CP1251');

$data->read('a.xls');



$conn = mysql_connect("localhost","root","");

mysql_select_db("test",$conn);



for ($x = 2; $x <= count($data->sheets[0]["cells"]); $x++) {

$first = $data->sheets[0]["cells"][$x][1];

$middle = $data->sheets[0]["cells"][$x][2];

$last = $data->sheets[0]["cells"][$x][3];

$sql = "INSERT INTO mytable (First,Middle,Last)

VALUES ('$first','$middle','$last')";

echo $sql."\n";

mysql_query($sql);

}



?>

Best Symfony Bundles

2014-01-28T06:51:00.000-08:00

Symfony Bundles

1. Export to PDF

Create PDF with fpdf

2014-01-18T13:39:00.000-08:00

There are various PHP libraries to create PDF documents. FPDF, MPDF, DomPDF, HTML2PDF are among those popular ones. Each of them has some sort of uniqueness in terms of functionality. This tutorial is just a demo of FPDF using official distribution.

Demo

Generate Excel Data in PHP

2013-12-21T05:44:00.000-08:00

Create Excel



<?php

header("Content-Type: application/xls");

header("Content-disposition: attachment; filename=data.xls");

echo 'Id' . "\t" . 'Item' . "\t" . 'Qty' . "\n";

echo '001' . "\t" . 'Compaq 610 laptop' . "\t" . '02' . "\n";

?>

Flicker Image Search API Demo

2013-11-23T15:00:00.000-08:00

Flicker API



<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<title>Flicker Image Search API Demo</title>

</head>

<body>

Search for <b>girls, dogs, cakes</b> ...etc)

<br />

<input id="searchterm" />

<button id="search">search</button>

<div id="results"></div>

<script>

$("#search").click(function(){

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",

{

tags: $("#searchterm").val(),

format: "json"

},

function(data) {

$.each(data.items, function(i,item){

$("<img/>").attr("src", item.media.m).prependTo("#results");

if ( i == 10 ) return false;

});

});

});

</script>

</body>

</html>

How to access Session Bean from JSP in GlassFish

2013-11-09T06:45:00.000-08:00

Using Session Bean in JSP differs from the usage in servlets. We can inject session bean in servlets or in another session bean. But in JSP we can not use EJB in the same way. Most common approach would be a JNDI lookup to find the required bean.

First add a reference in deployment descriptor to the session bean.




<ejb-local-ref>

<ejb-ref-name>AccountTypeFacadeRef</ejb-ref-name>

<ejb-ref-type>Session</ejb-ref-type>

<local>com.my.ejb.AccountTypeFacade</local>

<ejb-link>BankApp-ejb.jar#AccountTypeFacade</ejb-link>

</ejb-local-ref>

is optional.

In JSP use JNDI lookup to find the resource.



<%

String prefix = "java:comp/env/";

String ejbRefName = "AccountTypeFacadeRef";

String jndiUrl = prefix + ejbRefName;



javax.naming.Context ctx = new javax.naming.InitialContext();

AccountTypeFacade atf = ( AccountTypeFacade ) ctx.lookup( jndiUrl );

List<AccountType> accountTypeList = atf.findAll();

%>

Swing File Chooser Demo

2013-10-30T15:40:00.000-07:00


package main;

import java.awt.BorderLayout;
import java.awt.Insets;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.File;
import javax.swing.JButton;
import javax.swing.JComponent;
import javax.swing.JDialog;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;

public class SwingFileChooser extends JPanel implements ActionListener{
private static final String newLine = "\n";
private JButton openButton,saveButton;
private JTextArea log;
private JFileChooser fc;

public SwingFileChooser(){
super(new BorderLayout());
initComponents();

}

private void initComponents(){
log = new JTextArea();
log.setMargin(new Insets(5, 5, 5, 5));
log.setEditable(false);
JScrollPane jsp = new JScrollPane(log);
fc = new JFileChooser();
fc.setFileSelectionMode(JFileChooser.FILES_AND_DIRECTORIES);
openButton = new JButton("Open File");
openButton.addActionListener(this);
saveButton = new JButton("Save File");
saveButton.addActionListener(this);
JPanel buttonPanel = new JPanel();
buttonPanel.add(openButton);
buttonPanel.add(saveButton);
add(buttonPanel,BorderLayout.NORTH);
add(jsp,BorderLayout.CENTER);
}

@Override
public void actionPerformed(ActionEvent e) {
if(e.getSource() == openButton){
int returnVal = fc.showOpenDialog(this);
if(returnVal == JFileChooser.APPROVE_OPTION){
File file = fc.getSelectedFile();
log.append("Opening " + file.getName() + newLine);
}else{
log.append("cancelled file opening" + newLine);
}
log.setCaretPosition(log.getDocument().getLength());

}else if(e.getSource() == saveButton){
int returnVal = fc.showSaveDialog(this);
if(returnVal == JFileChooser.APPROVE_OPTION){
File file = fc.getSelectedFile();
log.append("Saving " + file.getName() + newLine);
}else{
log.append("cancelled file saving" + newLine);
}
log.setCaretPosition(log.getDocument().getLength());
}
}

private static void createGUI(){
JFrame.setDefaultLookAndFeelDecorated(true);
JDialog.setDefaultLookAndFeelDecorated(true);
JFrame frame = new JFrame("SwingFileChooser");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JComponent newContentPane = new SwingFileChooser();
newContentPane.setOpaque(true);
frame.setContentPane(newContentPane);
frame.pack();
frame.setVisible(true);
}

public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {

@Override
public void run() {
createGUI();
}
});

}
}

MapServer + PostGIS + pgRouting + OpenLayers

2013-10-25T15:21:00.000-07:00

MapServer + PostGIS + pgRouting + OpenLayers

OpenSource Directions API Demo - YOURS Navigation API

2013-10-07T04:06:00.000-07:00

In this tutorial, I 'll introduce you to YOURS, an OpenSource directions API. There are few OpenSource directions APIs available such as MapQuest, GeoSmart, Nominatim in addition to YOURS. However in my opinion, YOURS is the best and a good alternative to Google Directions which is the most popular Directions provider obviously.

The flexibility of usage has given more power in YOURS over other APIs in the same family. MapQuest is nice but it is not working for many geographical locations of the world other than North America and Europe. Nominatim is poor in its functional level and has less support for geographical diversity.

According to YOURS doucmentation, the API provide following features.

Generate fastest or shortest routes in different modes:
- using all available roads for Car, Bicycle and Pedestrians .
- using only national, regional or local cycle routes/networks for Bicycle.

Unlimited via points (waypoints) to make complex routes.

Drag and drop waypoints moving.

Drag and drop waypoint ordering.

Geolocation: Lookup street- and placenames to determine their coordinates.

Reverse geolocation: Lookup coordinates to determing their street- and placenames.You can read other features in doucmentation.

Example URL

http://www.yournavigation.org/api/1.0/gosmore.php?format=kml&flat=52.215676&flon=5.963946&tlat=52.2573&tlon=6.1799&v=motorcar&fast=1&layer=mapnik

This tutorial provides sample code for accessing the API in JavaScript. As JavaScript does not allow cross domain requests we 're using a proxy which accepts requests from client, forward it to the API and send back server response. The proxy is written in PHP using CURL which is more safe than file_get_contents() and similar content loading functions.

We are using OpenLayers map with a vector layer which is going get features from server response. The route is drawn on map using vector data.

The API also provides travelling time, distance and turn by turn directions.

Demo

client.html


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="description" content="OpenSource Directions API Demo - YOURS Navigation API">
        <title>OpenSource Directions API Demo</title>
        <link rel="stylesheet" href="http://demos.site11.com/assets/css/style.css">
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
            var lon = 0;
            var lat = 0;
            var zoom = 0;

            var wgs84 = new OpenLayers.Projection("EPSG:4326");
            var mercator = new OpenLayers.Projection("EPSG:900913");

            $(document).ready(function(){
                layer = new OpenLayers.Layer.OSM("OSM");
                geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
                    styleMap: new OpenLayers.StyleMap({
                        strokeColor: "#F00",
                        projection: mercator
                    }),
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: 'proxy.php?flat=6.9344&flon=79.8428&tlat=7.2844590&tlon=80.637459&v=motorcar&fast=1&layer=mapnik',
                        format: new OpenLayers.Format.GeoJSON()

                    })
                });

                var options = {
                    div : "map",
                    projection : wgs84,
                    units: "dd",
                    numZoomLevels : 7
                };
                var map = new OpenLayers.Map(options);

                map.addLayers([layer,geojson_layer]);
                map.setCenter(new OpenLayers.LonLat(79.8428, 6.9344).transform(wgs84,mercator), 12);

                //Get Directions
                $.ajax({
                    type: 'GET',

                    dataType: 'json',
                    url: 'proxy.php?flat=6.9344&flon=79.8428&tlat=7.2844590&tlon=80.637459&v=motorcar&fast=1&layer=mapnik',
                    cache: false,
                    success: function(response){
                        $("#travel_time").html(response.properties.traveltime);
                        $("#distance").html(response.properties.distance + ' miles');
                        $("#directions").html(response.properties.description);
                    },error: function(){

                    }
                });

            });

        </script>
        <style type="text/css">
            #map{
                width: 800px;
                height: 400px;
                border: 2px solid black;
                padding:0;
                margin:0;
            }
        </style>
    </head>
    <body>
 <div id="map" style="width: 700px; height: 300px;margin-bottom : 50px;" align="center"></div>
                    <p><b>Travel Time</b></p><div id="travel_time"></div><br>
                    <p><b>Distance</b></p><div id="distance"></div><br>
                    <p><b>Directions</b></p><div id="directions"></div>
  </body>
</html>

Proxy.php


<?php
$flat = $_GET['flat'];
$flon = $_GET['flon'];
$tlat = $_GET['tlat'];
$tlon = $_GET['tlon'];
$v = $_GET['v'];
$fast = $_GET['fast'];
$layer = $_GET['layer'];

$myURL = "http://www.yournavigation.org/api/1.0/gosmore.php?format=geojson&instructions=1&flat=".$flat."&flon=".$flon."&tlat=".$tlat."&tlon=".$tlon."&v=".$v."&fast=".$fast."&layer=".$layer;
$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => $myURL

));

$resp = curl_exec($curl);
curl_close($curl);
echo $resp;
?>

How to store an array in localStorage

2013-10-05T03:47:00.000-07:00

HTML5 LocalStorage

This tutorial assumes that you are already familiar with HTML5 localStorage.

Although HTML5 localStorage is very useful, its usage is restricted to key value mechanism. Key and value is stored in string format despite what we need. For an instance, though you can specify a boolean type (either true or false) as the value, it is stored as a string.

What if we need to store multiple items as the value for a certain key. This can be little bit tricky if you gonna place an array directly as the value. When we scratch the surface of localStorage basic principles this is not possible. However you can come up with your own solutions that might work for you.

This tutorial demonstrates a simple way of handling above problem using json. We gonna store array as a json string. So nothing new here.

First add jQuery library as we are using some jQuery functions.


<script type="text/javascript">
 var favorites_str = localStorage.getItem('my_favorites');
 if(favorites_str == null) {
 favorites = [];
 favorites.push({ "name":"keshi", "id":"6" });
 } else{
 favorites = JSON.parse(favorites_str);
 favorites.push({ "name":"sara", "id":"6" });
 
}
 localStorage.setItem('my_favorites',JSON.stringify(favorites));
 </script>

To verify that above script is functioning please copy and run below script. It will make things easy, if you put this code in a separate file.


<script type="text/javascript">
 var data = localStorage.getItem('my_favorites');
 if(data == null){
 alert("0 favorites");
 }else{
 favorites = JSON.parse(data);
 $.each(favorites, function(index,item){
 alert(item.name);
 
});
 }
 </script>

OpenSource PHP Graph libraries

2013-10-01T10:48:00.000-07:00

PHP Graphs

There are so many PHP graph projects which you can find on internet. At the time of writing this post, JpGraph, phpgraphlib and pChart should appear in top Google search results. In my experience, phpgraphlib is developer-friendly and easy to use whereas JpGraph is more robust than others. pChart seems to be little bit outdated though they have updated their project.

JpGraph

phpgraphlib

Create Charts with jFreeChart

2013-09-29T10:52:00.000-07:00

This tutorial is all about creating graphs. There are several tools for generating graphs without any hassle. Programming a graph from scratch might little be tricky as it also deals with some graphics. Using a tool or library reduces the development time a lot. So we gonna use an OpenSource chart tool named jFreeChart for Java development.

Creating a graph with jFreeChart is just a matter of entering the required graph data and a little piece of code. Therefore, as the CodeZone4 norm I just go ahead with a 3D bar graph implementation using jFreeChart.

You can find source code for other types of graph on the internet.

First download required JARs from jFreeChart and add them in your project's classpath.


import org.jfree.chart.*;
import org.jfree.data.category.*;
import org.jfree.data.general.DefaultPieDataset;
import org.jfree.data.xy.*;
import org.jfree.data.*;
import org.jfree.chart.renderer.category.*;
import org.jfree.chart.plot.*;
import java.awt.*;

public class Main {

public static void main(String[] args) {
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
dataset.setValue(3780, "A", "2008");
dataset.setValue(5000, "B", "2008");
dataset.setValue(6500, "A", "2009");
dataset.setValue(6000, "B", "2009");
dataset.setValue(9000, "A", "2010");
dataset.setValue(10000, "B", "2010");
JFreeChart chart = ChartFactory.createBarChart3D("Annual Income Analysis", "Year", "Income",
dataset, PlotOrientation.VERTICAL, true, true, false);
chart.setBackgroundPaint(Color.yellow);
chart.getTitle().setPaint(Color.blue);
CategoryPlot p = chart.getCategoryPlot();
p.setRangeGridlinePaint(Color.red);
ChartFrame frame1 = new ChartFrame("Income Data", chart);
frame1.setVisible(true);
frame1.setSize(300, 300);
}
}



Develop Voice Applications with VoiceXML
2013-09-15T15:19:00.000-07:00
voice xml
 

Web pages consist of HTML that is rendered into a visible page by a Web browser. Similarly, a voice application consists of XML (VoiceXML, CCXML, or CallXML) which becomes an interactive voice application when processed by the Voxeo Corporation VoiceCenter network. All you need to do is write the application's XML, map it to a phone number in the Voxeo Application Manager, and give it a call.

https://evolution.voxeo.com/

Sample vxml file


<?xml version="1.0" encoding="UTF-8"?>
<vxml version="2.0" xmlns="http://www.w3.org/2001/vxml">

<form id="login">

<field name="phone_number" type="phone">
<prompt>Please say your complete phone number</prompt>
</field>

<field name="pin_code" type="digits">
<prompt>Please say your PIN code</prompt>
</field>

<block>
<submit next="http://www.example.com/servlet/login"
namelist="phone_number pin_code"/>
</block>

</form>
</vxml>

Getting started with VoiceXML 2.0