extract coordinates from geojson

Question

I am new to web mapping. I am trying to display roads on my map, hence I build a server side application with flask, where I am selecting the roads table and saving the geometry column via AsGeoJson in Geojson format.

@app.route('/addstreet', methods=['GET', 'POST'])
def addstreet():
    conn = g.db.cursor()
    conn.execute('''select id,name,sub_type, AsGeoJSON(ST_GeomFromText(geom))  FROM roads''')
    result = conn.fetchall()
    result = json.dumps(result)
    return result

Ok I saved my roads in an array like this:

 $("#roads").click(function(event) {
   //add streets
   $.get(my_url, function( data ) {

   features =[];
   data = JSON.parse(data);
    for (i=0; i< data.length; i++) {
        roads = data[i][3];
        features.push(roads);
    }

    console.log(features);

    var myStyle = {
        "color": "#ff7800",
        "weight": 5,
        "opacity": 0.999
    };

    L.geoJson(features, {
        style: myStyle
    }).addTo(map);

});   
});

The error message is gone. But on my map I can't see any roads....

Answer 1

The Server Side application you built only returns you the geometry part of the GeoJSON object, in order to display it as a GeoJSON layer in Leaflet, you need to create an actual GeoJSON object like this one below, I tested it here and it looks good.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "MultiLineString",
        "coordinates": [
          [
            [
              9.231247,
              48.482832
            ],
            [
              9.231029,
              48.48272699999999
            ],
            [
              9.230776,
              48.48265899999999
            ],
            [
              9.230519,
              48.482582
            ],
            [
              9.230449,
              48.48249199999999
            ],
            [
              9.230528,
              48.482405
            ]
          ]
        ]
      }
    }
  ]
}

Answer 2

you can create a list of road and then create L.Geojson object and add it to the map :

var roads = [{"type":"MultiLineString","coordinates":[[[9.231246999999999,48.482832],   [9.231028999999999,48.48272699999999],[9.230776,48.48265899999999],[9.230518999999999,48.482582],[9.230449,48.48249199999999],[9.230527999999999,48.482405]]]}
];

var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
};

L.geoJSON(roads, {
    style: myStyle
}).addTo(map);