Estoy intentando consumir el API de enrutamiento de CloudMade utilizando el Folleto.
Hasta ahora, he conseguido pasar puntos y recibir una respuesta, y parsear esa respuesta en un array de puntos. La matriz de puntos se pasa a un objeto polilínea, que se añade al mapa.
Me he encontrado con un problema en el que la polilínea no se muestra en el mapa. He intentado probar si los puntos se leen correctamente, empujados a la matriz de puntos y al objeto de línea y no ha habido problemas hasta ahora.
Este es el aspecto del resultado:
Este es mi código:
<!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>
Si alguien pudiera ayudarme, le estaría muy agradecido.