Hinzufügen eines Popups zur GeoJSON-Ebene in der Broschüre

Ich bin neu in der Arbeit mit der Leaflet-API und habe Probleme beim Erstellen von Popups für eine GeoJSON-Ebene. Ich habe mir den folgenden Beitrag als Referenz angesehen und habe immer noch Schwierigkeiten: Verschachtelte Arrays als Geojson-Popups in einer Broschüre zu binden

Meine GeoJson-Daten sehen folgendermaßen aus:

{
    "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"
            }
        }

    ]
}

Meine Packungsbeilage lautet wie folgt:

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

Der console.log(popupContent);Aufruf innerhalb der onEachFeatureFunktion gibt Daten zurück. Wenn ich jedoch auf die GeoJSON-Punkte in der Karte klicke, wird der folgende Fehler angezeigt: Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

Ich habe bisher erfolglos versucht, dies zu untersuchen.

Hier ist ein Beispiel für das Laden von Geojson von einem WFS-Dienst: http://maps.gcc.tas.gov.au/dogexerciseareas.html

Dies ist ein weiteres Beispiel für das Laden von Topojson (ähnlich, aber unterschiedlich): http://agl.pw/examples/NRM_Regions/map.html

Hier ist ein einfacher Code, mit dem ich eine Ebene lade:

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

Dann können Sie mit so etwas Interaktivität und Styling machen:

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

BEARBEITEN: Ein Beispiel von der Broschüren-Website zu Styling-Punkten (von hier 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: Eine Lösung für dieses Problem wurde hinzugefügt. Siehe hier: https://gist.github.com/alexgleith/7112515

Jetzt müssen Sie nur noch das Bit bearbeiten, in dem "popupContent" steht, um Ihr Bit hinzuzufügen, und den Code ändern, um Daten aus der Datei zu laden.