Displaying route on map from Cloud Made Routing Data

Question

I have the following code for displaying a route between two points from cloudmade routing data. However, I get the following error:

Uncaught ReferenceError: getRoute is not defined

getRoute({"version":0.3,"status":0,"route_summary":{"total_distance":5626,"total_time":4054,"start_point":"Unknown road near Kolkata (কলকাতা)","end_point":"Darga Road"},"route_geometry":[[22.54195,88.330627],[22.54195,88.330627],[22.54207,88.330322],[22.54217,88.330116],[22.54249,88.330147],[22.54273,88.33017],[22.54278,88.330223],[22.5429,88.330261],[22.54294,88.330276],[22.5431,88.330048],[22.54331,88.329773],[22.543449,88.329643],[22.543619,88.329582],[22.543751,88.329567],[22.54384,88.329536],[22.544241,88.329453],[22.544571,88.329422],[22.54513,88.329422],[22.545401,88.32946],[22.545309,88.329613],[22.54521,88.329857],[22.545151,88.330528],[22.54516,88.330811],[22.545231,88.331047],[22.5455,88.331589],[22.54557,88.331848],[22.54561,88.332176],[22.54565,88.33239],[22.54575,88.332588],[22.546141,88.333267],[22.54682,88.33432],[22.5504,88.340149],[22.550579,88.340439],[22.54904,88.340508],[22.54784,88.340622],[22.547171,88.340622],[22.54645,88.340729],[22.547041,88.340897],[22.547449,88.341713],[22.547569,88.342278],[22.5476,88.342537],[22.547581,88.342827],[22.547661,88.342934],[22.547689,88.343033],[22.547661,88.34317],[22.54759,88.343239],[22.54751,88.343262],[22.547449,88.343491],[22.547171,88.344093],[22.54665,88.345062],[22.54624,88.346031],[22.545971,88.347],[22.545879,88.347961],[22.54587,88.348053],[22.545719,88.349152],[22.54563,88.349831],[22.54546,88.351044],[22.545441,88.351173],[22.54538,88.351631],[22.54524,88.352737],[22.545191,88.353188],[22.545111,88.353737],[22.54495,88.354607],[22.54479,88.355553],[22.544769,88.355682],[22.544621,88.356613],[22.544439,88.357773],[22.544359,88.358398],[22.54409,88.360527],[22.543949,88.362068],[22.54384,88.363251],[22.54368,88.364922],[22.54365,88.365471],[22.54364,88.365662],[22.543539,88.365807],[22.543289,88.366173],[22.54347,88.366577],[22.54361,88.367073],[22.543831,88.367668],[22.5439,88.367867],[22.544201,88.36866],[22.54471,88.370003],[22.54491,88.370461],[22.544519,88.370644],[22.544319,88.370728],[22.543631,88.370842],[22.543591,88.37085],[22.543489,88.370857]],"route_instructions": [["Turn right",57,0,41,"57 m","NW",293.3,"TR",113.3],["Turn right",115,2,83,"0.1 km","N",5.0,"TR",66.7],["Turn left at Strand Road",157,7,113,"0.2 km","NW",305.8,"TL",283.8],["Continue on Strand Road",204,13,147,"0.2 km","N",347.9,"C",356.8],["Turn right",1715,17,1235,"1.7 km","SE",121.8,"TR",114.3],["Turn right at Lovers Ln",459,31,330,"0.5 km","S",177.6,"TR",121.3],["Sharp left",68,35,49,"68 m","N",14.6,"TSHL",202.4],["Slight right at Queen's Way",2815,36,2027,"2.8 km","NE",61.8,"TSLR",47.2],["Turn left at Suhrawardy Avenue",594,74,428,"0.6 km","NE",63.7,"TL",297.0],["Turn right at Darga Road",265,81,191,"0.3 km","SE",157.2,"TR",91.4]]});

My code is shown below:

 $(document).ready(function(){
    var map = L.map('map').setView([51.505, 21], 1);
    L.tileLayer('http://{s}.tile.cloudmade.com/e7b61e61295a44a5b319ca0bd3150890/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
    }).addTo(map);
    $('#showmap').click(function(){
        var lat=$('#lat').val();
        var lon=$('#long').val();
        var zoom=$('#zoom').val();
        map.setView([lat, lon], zoom);
    });

    $('#showroutes').click(function(){
            showRoutes();
    });
    var latlong = new Array(100);
    var i=0;
    function markLocation(e){
        var marker=L.marker(e.latlng).addTo(map);
        latlong[i++]=e.latlng;          
    }
    map.on('click', markLocation);

    function addScript(url) {
        var script = document.createElement('script');
        script.type="text/javascript";
        script.src=url;
        document.getElementsByTagName('head') [0].appendChild(script);
    }

    function getRoute(response) {
        var point, route, points = [];
        for (var i=0; i<response.route_geometry.length; i++)
        {
            point = new L.LatLng(response.route_geometry[i][0] , response.route_geometry[i][1]);
            points.push(point);
        }
        route= new L.Polyline(points, {
            weight: 3,
            opacity: 0.5,
            smoothFactor: 1
        }).addTo(map);
        route.bringToFront();
    }


/*
    fromMarker = new L.Marker(new L.latLng([12.999070,77.568679])).addTo(map);
    toMarker=new L.Marker(new L.latLng([13.006610,77.578130])).addTo(map);*/
    function showRoutes(){
        console.log('http://routes.cloudmade.com/0e0491f21622495da28cf15c92bf9419/api/0.3/' + latlong[0].lat + ',' + latlong[0].lng + ',' +         latlong[1].lat + ',' + latlong[1].lng + '/foot.js?callback=getRoute');
        addScript('http://routes.cloudmade.com/0e0491f21622495da28cf15c92bf9419/api/0.3/' + latlong[0].lat + ',' + latlong[0].lng + ',' +       latlong[1].lat + ',' + latlong[1].lng + '/foot.js?callback=getRoute');
    }




});

Answer 1

Well, getRoute is not a global javascript function (meaning it doesn't belong to window). You could get around your problem by changing: function getRoute(response) {

to:

window.getRoute = function (response) {

I would write this code in more of a modular way, but if you are just experimenting with api, that should do the trick for you.