0

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.

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.
  • I'm going to try this with geoJSON from Geoserver - I wonder if you swap out the URL of the .geojson file with the URL that geoserver provides if it will work... – DPSSpatial Mar 11 '17 at 15:08
  • OK, I tried both solutions above an I still do not see the points. Is there perhaps something wrong with my url path? The index.html is on the same path as the js and data folder. So if I am calling dtr_points.geojson from my app.js file (client/js/app.js) would it not be ./data/dtr_points.geojson? – gwydion93 Mar 13 '17 at 20:27
  • Invalid file path could be a reason indeed. It depends on how exactly your application bundles (or not) your files. Open up your browser console (on Windows, press F12; on Mac, Cmd + Alt + i) and see if the network request to that file is made and succeeds. It will also allow you to see any other error message, if any. If you still need help, you should provide a test case, and explain what exactly your online editor is doing and what you mean by "the geoJson file is local (on the same app as my app.js file)" – ghybs Mar 14 '17 at 4:51
  • I just tried adding a single point as a variable: var = dtr_point { "type: "feature" ....}; I then tried to add it: L.geoJson(dtr_points).addTo(map); Still nothing. So I console.log(dtr_points) and everything is there. It shows in the console as an Object with geometry.coordinates, properties, etc... It just won't show on the map. Do I need to style it or add a marker or something?! Very frustrating. – gwydion93 Mar 16 '17 at 1:11
  • If you still need help, you will have to provide more code and explanations, and ideally a live test case (directly on Cloud9, or Plunker, JSFiddle, etc.), otherwise I am not sure we could help you any further with the information provided. – ghybs Mar 16 '17 at 5:48
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);
  • OK, so you are saying I need to rename dtr_points.geojson to dtr_point-geojson.js and then go into that file and wrap everything in a variable? And add that file in thehtml file header as <script src='./data/dtr_point-geojson.js type='text/javascript></script>? – gwydion93 Mar 11 '17 at 2:54
  • Yes - and don't forget that last step of calling it in the L.geoJSON by it's variable name - but this is one way to do it - the jquery method below is also valid if you are going to be updating the geoJSON frequently and don't want to wrap it in a function – DPSSpatial Mar 11 '17 at 15:07
  • I have wrapped all of the json data in a variable like this: var dtr_points = {.....};, changed the filename to dtr_points_geojson.js and added that in my index.html (<script src="./data/dtr_points_geojson.js" type="text/javascript"></script>), and called the dtr_points variable in the L.geoJSON function as shown above. I am still not seeing the points. Not sure why this is not working. – gwydion93 Mar 13 '17 at 20:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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