將json數據從python（bottle.py）傳遞到傳單的javascript庫以在滑動地圖上顯示

Question

我正在研究我認爲是一個簡單的副項目。事實證明，我有點出於我的舒適區，因爲我對python一無所知（PHP是我的工作）。我試圖創建一個滑動的地圖（使用cloudemade的小冊子），顯示一組興趣點。我有一個CSV文件，其中包含POI的名稱，緯度和經度。

到目前爲止，我可以讀取CSV數據並將其轉換爲JSON數據，並使用bottle.py在網頁中顯示JSON數據的轉儲。

我的問題是如何通過jquery將bottle.py的JSON數據傳遞給leaflet的javascript庫？

克里斯

Answer 1

小葉支持GeoJSON的，這使得它容易與小葉顯示矢量數據。

參見：

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

蟒蛇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);    
}