RSS

OpenSource Directions API Demo – YOURS Navigation API

07 Oct
YOURS API Demo

YOURS API Demo

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>
       
        <script type="text/javascript">
            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>



<b>Travel Time</b>
<div id="travel_time"></div>



<b>Distance</b>
<div id="distance"></div>



<b>Directions</b>
<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;
?>

Advertisements
 
4 Comments

Posted by on October 7, 2013 in JavaScript, PHP

 

Tags: ,

4 responses to “OpenSource Directions API Demo – YOURS Navigation API

  1. kim sang kyun

    April 8, 2014 at 1:30 pm

    somtimes error happen while response is receive becuase server return undefined

    you know problem ?

    i`m korean
    sorry terrible english

     
  2. osman

    October 21, 2015 at 3:45 pm

    thank you very much for this article!! it was really helpful. i have implemented the same with a java proxy now.

    just one little note: the script contains a closing tag in line 60 but no opening tag in line 9. i think it is missing.

     
    • Rajitha

      October 21, 2015 at 7:59 pm

      Thanks osman.
      Yes, there was a typo. corrected.

       
    • sai

      March 16, 2016 at 10:44 pm

      excuse me want to ask to add a marker of how ??

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: