[GIS] Getting simple geoJson point layer into Leaflet map

geojsonjavascriptleafletpoint

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:
enter image description here

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.

Best Answer

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);
Related Question