LeafletのGeoJSONレイヤーへのポップアップの追加

Leaflet APIを使用するのは初めてで、GeoJSONレイヤーのポップアップの作成で問題が発生しています。私は次の投稿を参照として見ましたが、それでも問題は解決していません： ネストされた配列をリーフレットのgeojsonポップアップとしてバインドする

私のGeoJsonデータは次のようになります。

{
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.97364044189453,
                    40.66893768310547
                ]
            },
            "type": "Feature",
            "properties": {
                "lon": -73.97364044189453,
                "lat": 40.66893768310547,
                "version": "1.1",
                "t": 1381167616,
                "device": "iPhone3,3",
                "alt": 67,
                "os": "6.1.3"
            }
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.96121215820312,
                    40.66240692138672
                ]
            },
            "type": "Feature",
            "properties": {
                "lon": -73.96121215820312,
                "lat": 40.66240692138672,
                "version": "1.1",
                "t": 1381171200,
                "device": "iPhone3,3",
                "alt": 45,
                "os": "6.1.3"
            }
        }

    ]
}

私のリーフレットjsは次のとおりです。

// create a variable to load Stamen 'toner' tiles
var layer = new L.StamenTileLayer("toner");

// initialize and set map center and zoom
var map = L.map('map', {
    center: new L.LatLng(40.67, -73.94),
    zoom: 12
});

// create the map 
map.addLayer(layer);

// on each feature use feature data to create a pop-up
function onEachFeature(feature, layer) {

    if (feature.properties) {

        var popupContent;
        popupContent = feature.properties.t;

        console.log(popupContent);    
    }
    layer.bindPopup(popupContent);
}

// grab the processed GeoJSON through ajax call
var geojsonFeature = (function() {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "/data/test_random.json",
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();

// create an object to store marker style properties
var geojsonMarkerOptions = {
    radius: 10,
    fillColor: "rgb(255,0,195)",
    color: "#000",
    weight: 0,
    opacity: 1,
    fillOpacity: 1
};

// load the geojson to the map with marker styling
L.geoJson(geojsonFeature, {

    style: function (feature) {
        return feature.properties && feature.properties.style;
    },

    onEachFeature: onEachFeature,

    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions)
    }
}).addTo(map);

関数console.log(popupContent);内の呼び出しonEachFeatureはデータを返していますが、マップ内のGeoJSONポイントをクリックすると、次のエラーが発生します。 Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

これまで調べてみましたが、成功していません。

ここで私はWFSサービスからロードするにGeoJSONの持っている例を示しますhttp://maps.gcc.tas.gov.au/dogexerciseareas.html

これは、topojsonをロードする別の例です（類似していますが、異なります）：http ://agl.pw/examples/NRM_Regions/map.html

これが、レイヤーをロードするために使用する簡単なコードです。

var myLayer = L.geoJson().addTo(map);
$.getJSON("data/buildings.json", function(json) {
  myLayer.addData(json);
});

次に、次のようなものを使用してインタラクティブ性とスタイルを設定できます。

    success : function (response) {
        DogExerciseAreas = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 200};
                layer.bindPopup("<b>Site name:</b> " + feature.properties.sitename +
                    "<br><b>Dog Exercise: </b>" + feature.properties.dog_exercise +
                    "<br><br>Please ensure that tidy up after your dog. Dogs must be kept under effective control at all times."
                    ,popupOptions);
            }
        }).addTo(map);
    }

編集：スタイリングポイントに関するリーフレットWebサイトの例（ここからhttp://leafletjs.com/examples/geojson.html）：

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJson(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);

EDIT2：この問題の解決策を追加しました。こちらをご覧ください：https : //gist.github.com/alexgleith/7112515

ここで必要なのは、「popupContent」と表示されているビットを編集してビットを追加し、コードを変更してファイルからデータをロードすることだけです。