Getting simple geoJson point layer into Leaflet map

Question

I am having difficulty getting a geoJson layer with points to show up in my Leaflet mapp app. I want to add that the code is running on an online editor (Cloud9) and the geoJson file is local (on the same app as my app.js file). Here's what the folder looks like:

So far I have tried multiple ways to add the data to the map, using the Leaflet documentation. The first way was simply to use the following:

var myLayer = L.geoJSON().addTo(map);
myLayer.addData(./data/dtr_points.geojson);

I kept getting a parsing, unexpected token error in my eidtor. I then tried using the $getJson method, and even added styling to help it show up better, but nothing...

$.getJSON('./data/dtr_points.geojson', function (data) {
    // Assign the results to the geojsonData variable
    dtr_points = L.geoJson(data, {
      //inital css style of grid
      style: function(feature){
        return {
          color: "#000000",
          weight: 0.25,
          opacity: 0.5,
          fillOpacity: 10
        };
      }
    });
}).addTo(map);

I don't think there would be a cross origin issue with using an online editor. Can anyone suggest what I am doing wrong? Accoridning to Leaflet doc, points are a little different, but I am not sure why the above won't work.

Answer 1

In your first attempt, you need to retrieve first the data in your dtr_points.geojson file before being able to feed it into myLayer.addData().

Using jQuery's $.getJSON() is indeed a possible way to retrieve that data.

$.getJSON('./data/dtr_points.geojson', function (data) {
    myLayer.addData(data);
});

In your second attempt, addTo(map) is placed on the result of jQuery's $.getJSON, whereas it should have been on the result of your L.geoJSON factory (e.g. dtr_points.addTo(map)).

$.getJSON('./data/dtr_points.geojson', function (data) {
    // Assign the results to the geojsonData variable
    dtr_points = L.geoJson(data, {
      //inital css style of grid
      style: function(feature){
        return {
          color: "#000000",
          weight: 0.25,
          opacity: 0.5,
          fillOpacity: 10
        };
      }
    }).addTo(map); // Only the Leaflet layer can be added to map.
}); // jQuery knows nothing about Leaflet.

Answer 2

One thing I think that's missing from the examples page is the link to your geojson as a javascript file.

Somewhere in your you need to link to your geojson file:

<script src="geojson/sample-geojson.js" type="text/javascript"></script>

And the geojson.js file itself needs to be basically wrapped in a function:

var bicycleRental = {
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9998241,
                    39.7471494
                ]
            },
            "type": "Feature",
            "properties": {
                "popupConten
... ... 
};

Then you bring the geojson from the .js file in like this:

L.geoJSON([bicycleRental], {

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

                onEachFeature : onEachFeature,

                pointToLayer : function(feature, latlng) {
                    return L.circleMarker(latlng, {
                        radius : 8,
                        fillColor : "#ff7800",
                        color : "#000",
                        weight : 1,
                        opacity : 1,
                        fillOpacity : 0.8
                    });
                }
            }).addTo(map);