[GIS] Creating toggle layers in Leaflet

geojsonleaflet

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.

Cheese Map Locations

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.
enter image description here

Best Answer

  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

Related Question