jsonデータをpython（bottle.py）からリーフレットのjavascriptライブラリに渡して、滑らかな地図に表示します。

Question

私は単純なサイドプロジェクトだと思っていました。私はpythonについて何も知らないので、私は私の快適ゾーンから少し外れていることが判明しました（PHPは私の仕事です）。私は興味のあるポイントのセットを表示する滑らかなマップを作成しようとしています（クラウドメイドのリーフレットを使用）。 POIの名前、緯度、経度を含むCSVファイルがあります。

これまではCSVデータを読み込んでJSONデータに変換し、JSONデータのダンプをbottle.pyを使用してWebページに表示することができました。

私の質問は、jquery経由でチラシのjavascriptライブラリにbottle.pyのJSONデータを渡す方法です。

クリス

Answer 1

リーフレットは、リーフレットにベクトルデータを表示することを容易にするにGeoJSONをサポートしています。

参照：

http://leaflet.cloudmade.com/examples/geojson.html

のpython geojsonライブラリは、同様にGeoJSONサポートしているので、あなたが適切なオブジェクトにそれを取得し、任意の追加のプロパティを追加するよりも、他のPython側で行う必要があり、多くはありません生成されたJSONをリーフレットに提供する前に必要です。

標準のXMLHttpRequest（）を使用して、提供している場所からJSONオブジェクトを取得してください。

function loadData(){ 

    // retrieve and load features to a layer 
    var xhrequest = new XMLHttpRequest(); 
    xhrequest.onreadystatechange = function(){ 
     if (xhrequest.readyState == 4){ 
      if (xhrequest.status == 200){ 
       var geojsonLayer = new L.GeoJSON(); 
       geojsonLayer.on("featureparse", function(e){ 
        if (e.properties && e.properties.name && e.properties.value){ 
         var popupContent = "Whatever added properties you want to display"; 
         e.layer.bindPopup(popupContent);      
        }; 
        // any styles you've added 
        if (e.properties && e.properties.style && e.layer.setStyle){ 
         e.layer.setStyle(e.properties.style);      
        };      
       });  
       var layerItems = JSON.parse(xhrequest.responseText); 
       // add features to layer 
       for (i=0; i<layerItems.length;i++){ 
        var geojsonFeature = layerItems[i]; 
        geojsonLayer.addGeoJSON(geojsonFeature);      
       }; 
       map.addLayer(geojsonLayer); 
      };     
     };    
    }; 
    var url= "<url of where you are serving the GEOJSON data>"; 
    xhrequest.open('GET', url, true); 
    xhrequest.send(null);    
}