title: passing geojson data from flask app to javascript to be used in leaflet map
body: <p>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.  </p>
  
  <p>I am using python to read data from a csv file, and creating a geoJson file using modified version of:</p>
  
  <blockquote>
    <p><a href="http://www.andrewdyck.com/how-to-convert-csv-data-to-geojson/" rel="nofollow noreferrer">http://www.andrewdyck.com/how-to-convert-csv-data-to-geojson/</a>
    Thank you Andrew</p>
  </blockquote>
  
  <p>Here is the JavaScript used to call the python method.  It is called with an onClick function call in the html:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Here is my modified python and flask code:</p>
  
  <pre><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 &gt;= 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
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>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" }
        },
        ]};
  </code></pre>
  
  <p>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.</p>