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.