2

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....

  • You should use an array of roads features . In your code there is only the last road of your loop that is add as geojson and it's not an array [{road},{road} ... ] its a {road} – Hugo Roussaffa - GeoDatup Oct 30 '17 at 23:16
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
            ]
          ]
        ]
      }
    }
  ]
}
1

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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