3

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.

  • May I know which desktop GIS software you re using? – MyGIS Nov 28 at 1:33
  • @MyGIS Made the shapefile in Arc (10.5) and converted to GeoGJSON in QGIS – enid_bagnold Nov 28 at 2:26
  • Please add relevant JS code to the body of your question for future reference. Outside links get lost in time. – TomazicM Nov 28 at 6:38
  • I see you modified your code. At the moment you are missing closing }); for $(document).ready function at the and of the code. – TomazicM Nov 28 at 7:26
  • @TomazicM Well, that's it! Thank you!! – enid_bagnold Nov 28 at 19:44
4

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);
});
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.

enter image description here

Just choose the Leaflet option:

enter image description here

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

enter image description here

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

1

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.

enter image description here

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.