Trying to add GeoJSON file to Leaflet

Question

I'm still new to Leaflet and have been trying to add a GeoJSON file to a Leaflet map. I've checked the GeoJSON file using geojson.io and it loads there but not in my Leaflet map. I've looked at the answers here: (Adding local GeoJSON files to Leaflet web page) with no success. I have no idea where I'm going wrong!

Here's the link to my map: http://www.huskey.gisdenver.co/map6.html

1st problem code:

var mydata;
$.getJSON("classes_4326.geojson", function(data) {mydata = data;});
var landcov = L.geoJSON(mydata, 
        {style: function(feature) {
          switch (feature.properties.landcover) {
            case 'agriculture': return {color: "#32CD32"};
            case 'grassland': return {color: "#C51C0F"};
            case 'water': return {color: "#1E90FF"};
            case 'wetlands': return {color: "#314004"};
          }
        }, onEachFeature: onEachFeature
}).addTo(map);

As @TomazicM commented, it should have been formatted like this:

$.getJSON("classes_4326.geojson", function(data) {
var landcov = L.geoJSON(data, 
        {style: function(feature) {
          switch (feature.properties.landcover) {
            case 'agriculture': return {color: "#32CD32"};
            case 'grassland': return {color: "#C51C0F"};
            case 'water': return {color: "#1E90FF"};
            case 'wetlands': return {color: "#314004"};
          }
        }, onEachFeature: onEachFeature
}).addTo(map);

@TomazicM's sharp eyes spotted that I was missing the closing

}); 

for the

$(document).ready 

function at the end of the code.

Answer 1

GeoJSON layer is not shown on your map because you are not waiting for GeoJSON data inside $.getJSON call, but try to create layer immediately after the call. Just put layer creation inside $.getJSON call:

$.getJSON("classes_4326.geojson", function(data) {
  var landcov = L.geoJSON(data, 
            {style: function(feature) {
              switch (feature.properties.landcover) {
                case 'agriculture': return {color: "#32CD32"};
                case 'grassland': return {color: "#C51C0F"};
                case 'water': return {color: "#1E90FF"};
                case 'wetlands': return {color: "#314004"};
              }
            }, onEachFeature: onEachFeature
  }).addTo(map);
});

Answer 2

Are you familiar with the qgis2web plugin in QGIS? You could create your webmap and you have the option to convert you Shapefiles into GeoJson format (you could load you GeoJson file directly to QGIS as well). All depends on how advanced is you web map that you have already created, if it is basic then you just need to use the plugin.

Just choose the Leaflet option:

In the export Tab, choose where do you want to save the GeoJson file:

If you have experience in JavaScript you will be later on able to modify your map.

Answer 3

Same route as MyGIS

here is your geojson data in via qgis2web in google chrome all you need to do is upload the folder to your website.

*looks like your data overlaps - styling can be done to show it all.