[GIS] CloudMade Routing with Leaflet: route is not displayed

cloudmadejavascriptleafletrouting

I am trying to consume the CloudMade routing API using Leaflet.

So far, I have managed to pass points and receive a response, and parse that response into an array of points. The array of points is then passed to a polyline object, which is added to the map.

I have encountered a problem where the polyline is not displayed on the map. I tried testing whether the points are being read properly, pushed into the point array and to the line object and there have been no issues so far.

This is what the output looks like:
Output of the code to display routes

Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Routing Using Cloudmade Routing and Leaflet</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A map to demonstrate routing using CloudMade routing and Leaflet">
        <meta name="author" content="">

        <link rel="stylesheet" href="../leaflet/dist/leaflet.css" />
    </head>
    <body>
        <div id="map" style="width: 600px; height: 600px;"></div>
        <!--import scripts-->
        <!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
        <script src="../leaflet/dist/leaflet.js" type='text/javascript'></script>
        <!-- end import scripts-->
        <!--code-->
        <script type="text/javascript">
            var map, fromMarker, toMarker;

            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.Point(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();
            }

            map=L.map('map').setView([13.00077, 77.57218], 15);
            var basemap = L.tileLayer('http://{s}.tile.cloudmade.com/0e0491f21622495da28cf15c92bf9419/1/256/{z}/{x}/{y}.png',
            {
                maxZoom:18
            }).addTo(map);

            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);
            addScript('http://routes.cloudmade.com/0e0491f21622495da28cf15c92bf9419/api/0.3/' + fromMarker.getLatLng().lat + ',' + fromMarker.getLatLng().lng + ',' + toMarker.getLatLng().lat + ',' + toMarker.getLatLng().lng + '/car.js?callback=getRoute');
        </script>
        <!--end code-->
    </body>

</html>

If anyone could help me, I would be much obliged.

Best Answer

Instead of L.Point you should use L.LatLng

Your get route function should be something like this .

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();
            }
Related Question