9

I'm new to working with the Leaflet API and am running into trouble with creating popups for a GeoJSON layer. I've looked at the following post as a reference and am still having difficulty: binding nested arrays as geojson popups in leaflet

My GeoJson data looks like:

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

    ]
}

My leaflet js is as follows:

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

The console.log(popupContent); call within the onEachFeature function is returning data, however when I click on the GeoJSON points in the map I get the following error: Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

I've tried looking into this with no success so far.

1 Answer 1

9

Here's an example that I have of loading geojson from a WFS service: http://maps.gcc.tas.gov.au/dogexerciseareas.html

This is another example loading topojson (similar, but different): http://agl.pw/examples/NRM_Regions/map.html

Here's some simple code I use to load a layer:

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

Then you can do interactivity and styling with something like this:

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

EDIT: an example from the leaflet website on styling points (from here 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: Added a solution to this problem. See here: https://gist.github.com/alexgleith/7112515

All you need to do now is edit the bit where it says 'popupContent' to add your bit and change the code to load data from the file.

10
  • thanks alexgleith, this seems to work and looking at your examples is helpful as well. Though how would I add the pointToLayer function that displays point data as circle markers?
    – clhenrick
    Oct 21, 2013 at 2:23
  • Good question, I added a bit to the bottom of my post. I think you can basically do that with a style for the points that are created.
    – Alex Leith
    Oct 21, 2013 at 3:35
  • so I can get the default style markers to have working pop-ups, but not circle-markers. For some reason when I put these together it doesn't seem to work: pastebin.com/T9E9XpQM If you remove lines 68-70 the pop-ups work. as of now the pointToLayer function doesn't change the point style. Do I have it in the wrong place in my code?
    – clhenrick
    Oct 21, 2013 at 15:19
  • Try addin this: .bindPopup("<b>Time:</b> " + time + "<br><b>Altitude: </b>" + feature.properties.alt + "meters" ,popupOptions); to the end of line 69 You are doing everything twice, I think!
    – Alex Leith
    Oct 21, 2013 at 21:46
  • 1
    Added a gist with the solution. Perhaps you could try to keep your code nice and tidy in the future! You had bits everywhere! Let me know if you have any trouble getting my code working. YOu can see it here: rawgithub.com/alexgleith/7112515/raw/…
    – Alex Leith
    Oct 23, 2013 at 5:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.