Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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();
            }
share|improve this answer
    
thanks a lot! a very silly mistake on my part. –  Chinmay Shaligram Mar 29 '13 at 11:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.