RSS

Tag Archives: directions

OpenSource Directions API Demo – YOURS Navigation API

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;
?>

 
4 Comments

Posted by on October 7, 2013 in JavaScript, PHP

 

Tags: ,

Get Directions with Bing Maps using Geocordinates.

With Bing Map API, you can easily get the directions to some place. You only need to know  the start location and end location. If this start location is not specified, your current location is treated as the start.

In this tutorial we use Bing Maps Directions Task which is one of the many launchers bundled with Windows Phone7 Mango series. Hopefully, they make developer’s life easy. They are really useful when integrate social sharing features to your applicaton. Otherwise you need to deal with OAth protocol for a considerable amount of time. You do not need to touch those dirty …
Enough  pep talk. Let’s get started.

You have two options to enter location details either by text based or geocordinates which are in latitude and longitude format. These two methods are demonstrated below.

Text based location

BingMapsDirectionsTask bmDirectionTask = new BingMapsDirectionsTask();
LabeledMapLocation start = new LabeledMapLocation("Sydney", null);
LabeledMapLocation end = new LabeledMapLocation("Perth", null);
bmDirectionTask.Start = start;
bmDirectionTask.End = end;
bmDirectionTask.Show();

Based on geocordinates

BingMapsDirectionsTask bingMapsDirectionsTask = new BingMapsDirectionsTask();

GeoCoordinate userLocation = new GeoCoordinate(33.8683,151.2086);
LabeledMapLocation start = new LabeledMapLocation("From", userLocation);
bingMapsDirectionsTask.Start = start;

GeoCoordinate placeLocation = new GeoCoordinate();
LabeledMapLocation end = new LabeledMapLocation(31.9554,115.8585);
bingMapsDirectionsTask.End = end;

bingMapsDirectionsTask.Show();
 
Leave a comment

Posted by on June 14, 2012 in Silverlight, Windows Phone 7

 

Tags: ,