Leaflet.js geoJson not appearing on map - Im trying to show directions

Question

I am able to retrieve directions fine using the cloudmade api but I cant seem to add those coordinates to my map.

I've tried two different approaches

      var myStyle = {
        "color": "#ff7800",
        "weight": 5,
        "opacity": 0.65
      };
      var myLines = [{
        "type": "LineString",
        "coordinates": []
      }];

      myLines.coordinates = [[]];
      for (var i =  result.data.route_geometry.length - 1; i >= 0; i--) {
        if(!isNaN(result.data.route_geometry[i][0]) && !isNaN(result.data.route_geometry[i][1])){
          myLines.coordinates[i] = [result.data.route_geometry[i][0], result.data.route_geometry[i][1]];
        }
      };
      L.geoJson(myLines, {style: myStyle}).addTo(window.map);

and

       var geojsonFeature = {
          "type": "Feature",
          "properties": {
              "name": "Coors Field",
              "amenity": "Baseball Stadium",
              "popupContent": "This is where the Rockies play!"
          },
          "geometry": {
              "type": "Point",
              "coordinates": []
          }
      };

      for (var i =  result.data.route_geometry.length - 1; i >= 0; i--) {
        if(!isNaN(result.data.route_geometry[i][0]) && !isNaN(result.data.route_geometry[i][1])){
          geojsonFeature.geometry.coordinates[i] = [result.data.route_geometry[i][0], result.data.route_geometry[i][1]];
        }
      };
      L.geoJson(geojsonFeature).addTo(window.map);

I am able to add markers fine. My question is similar to this one Leaflet GeoJSON display and so I've tried reversing the coordinates like this

myLines.coordinates[i] = [result.data.route_geometry[i][0], result.data.route_geometry[i][1]];

but I still get nothing added to the map.

No errors in the console.

Answer 1

This is the correct way to do this: http://jsfiddle.net/8QHFe/153/

var linePts = [
    [ 31.811628, 24.904771 ],
    [ 31.810856, 24.91096 ],
    [ 31.817636, 24.911855 ],
    [ 31.831133, 24.907477 ],
    [ 31.841497, 24.898679 ],
    [ 31.841025, 24.895312 ],
    [ 31.837935, 24.891225 ],
    [ 31.842356, 24.889006 ],
    [ 31.853814, 24.888626 ]
];

// a FOR loop operates on each item in a list
for( i=0; i < linePts.length; i=i+1 ) {
    // turn this coordinate into a LatLng
  linePts[ i ] = new L.LatLng( linePts[ i ][ 0 ], linePts[ i ][ 1 ] );
}

// add the line
line = new L.Polyline( linePts, { color: "purple" } );
map.addLayer(line);​