フラスコのアプリケーションからjavascirptにgeojsonデータを渡してチラシマップに使用する

Question

OK、フラスコ、python、html、javascriptを使用してウェブページ上にマップがあります。私の問題は、geoJsonのデータをハードコードするとうまくいきます。私がpythonスクリプトからJavascriptにgeoJsonデータを渡してリーフレットで使用すると、動作しません。私は、データのない視覚的なエラー以外のエラーは発生していません。私はcsvファイルからデータを読み取るためのpythonを使用して、との修正版使用にGeoJSONファイルを作成してい

：

http://www.andrewdyck.com/how-to-convert-csv-data-to-geojson/ はここアンドリュー

ありがとうJavaScriptを呼び出すために使用されPythonメソッド。 HTMLでのonClick関数呼び出しと呼ばれている：

@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 

がここにGeoJSONファイルです：

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

はここに私の変更のpython、フラスココードです。私はこれをハードコードすると動作します。私がPythonスクリプトから渡されたデータを使用するとき、それはしません。ハードコードされたデータは、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" } 
     }, 
     ]}; 

渡されたデータが機能しない理由はわかりません。タイプミスや太った指の誤りを許してください。私はここに私の作業コードをコピーして貼り付けることができません。あなたは

Answer 1

おかげで私はあなたのpython出力の末尾に余分なセミコロン（;）を持っている疑いがあります。

L.geoJSONに渡されたdataが既に適切なJavaScriptオブジェクトであることを確認してください。たとえば、typeof dataを出力して確認することができます。

まだ文字列の場合は、最初にJSON.parse(data)を使用して変換してください。