Creating toggle layers in Leaflet

Question

I am very new to Leaflet and coding and I am having some problems creating a map.

I have been able to create a map showing all my points but I would like to be to be able to distinguish between all different types of cheese via toggleable layers.

I have tried to use the solution shown in Leaflet: How to create toggleable overlays from a single GeoJSON FeatureCollection?, with no success.

This is my test JSFiddle, could you tel me what I am doing wrong?

Also I have all the Geodata saved in a cheese_map.geojson, that I would like to refer to in the javaScript rather than having 1000 lines of it.

---

I have managed to progress on this creating individual layers for each cheese type and using different icons as markers.

Answer 1

1. The GeoJSON data that you provide in your JSFiddle is invalid at line 944: the " Style" property key uses an invalid first character. You can use GeoJSON linting tools to help you check your data (e.g. http://geojsonlint.com/)

2. With JavaScript, you can call separate files using "AJAX" methods. For example, you could use jQuery's getJSON method to load your GeoJSON data in a separate file and process it. Make sure you understand the asynchronous aspect of JavaScript when going this way.

jQuery.getJSON('./cheesemap.json', function (geojsonData) {

  // Process the geojsonData...

});

Live demo (without the "all points" option): https://plnkr.co/edit/rf2JDe3RfF9p8Xm3Ga98?p=preview