0

OK, I have a map on a webpage using flask, python, html, javascript. My problem is that when I hard code the geoJson data, it works fine. When I pass the geoJson data from the python script to the Javascript to be used in leaflet, it does not work. I am not getting any errors other then the visual error of no data.

I am using python to read data from a csv file, and creating a geoJson file using modified version of:

http://www.andrewdyck.com/how-to-convert-csv-data-to-geojson/ Thank you Andrew

Here is the JavaScript used to call the python method. It is called with an onClick function call in the html:

function getValues(){
    $.ajax({
       data: chks}, // there is data passed, but it doesn't effect this issue
       type : 'POST',
       url : '/process'
})
  .done(function(data){  // its this passed data that is not being read correctly.  When I hard code this with the geojson found below, it works great.
      var markOptions = {
          radius:8,
          ... };
      var pntslay = L.geoJson(data, {
          pointsToLayer: function(feature, latlng){
             return L.circleMarker(latlng, markOptions);
}}).addTo(map);

Here is my modified python and flask code:

@app.route('/process', methods=['POST'])
def process():
    data = request.form['chks']
    rawData = csv.reader(open('sample.csv', 'rb'), dialect='excel')
# the template. where data from the csv will be formatted to geojson
    template = \
    ''' \
    { "type" : "Feature",
        "geometry" : {
            "type" : "Point",
            "coordinates" : [%s,%s]},
    "properties" : { "name" : "%s", "value" : "%s"}
    },
    '''
# the head of the geojson file
    output = \
    ''' \
    { "type" : "Feature Collection",
    {"features" : [
    '''
# loop through the csv by row skipping the first
    iter = 0
    for row in rawData:
        iter += 1
        if iter >= 2:
            id = row[0]
            lat = row[1]
            lon = row[2]
    output += template % (row[2], row[1], row[0])
 # the tail of the geojson file
    output += \
    ''' \
    ]};
    '''            
    return output

Here is the geoJson file. When I hard code this, it works. When I use the passed data from the python script, it does not. The hardcoded data was copied from the output in firefox firebug.

var geojsonPnts = {
    "type": "Feature Collection",
    "feature" : [
        {"type" : "Feature",
        "geometry" : {
             "type" : "Point",
             "coordinates" : [ -86.27, 32.36 ]},
        "properties" : { "name" : "some place" }
      },
       {"type" : "Feature",
        "geometry" : {
             "type" : "Point",
             "coordinates" : [ -105.45, 40.63 ]},
        "properties" : { "name" : "some other place" }
      },
      ]};

I am not sure why the passed data is not working. Please excuse typos and fat fingers errors. I am not able to copy and paste my working code to here.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Jeff Kyzer
  • 616
  • 2
  • 7
  • 14
  • Since you mention you have the .CSV file, I wonder if you've already tried [Leaflet Omnivore](https://github.com/mapbox/leaflet-omnivore). It's really easy to use, you can see an example [here](https://cccruzr.github.io/maps/docs/masacres.html). – Camilo Jun 29 '17 at 10:23

1 Answers1

0

I suspect you have an extra semicolon (;) at the end of your python output.

Also make sure the data you pass to L.geoJSON factory is already a proper JavaScript object. You can output a typeof data to check that, for example.

If it is still a string, simply convert it first using JSON.parse(data).

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • I have searched for the extra semicolon as suggested by ghybs with no luck in finding it. I did the jsonify as outlined in other question, but that only gives me a network error signifying an overloaded server (not possible at this time) or an error in the code, which I cant find. When I - return output - it sends a string which I can see with and alert. When I - return jsonify(output) - I get the network error. Yes, I included jsonify to my import – Jeff Kyzer Jul 05 '17 at 20:57