How do you add multiple GeoJSON layers to a leaflet map?

Question

Hello I am looking to add multiple layers to a leaflet map using GeoJSON files. I am trying to find everything I can on the internet about this and I can't seem to get my map to work when I add my overlay maps. Can someone help me?

https://jsbin.com/fojodov/1/edit?html,console,output

code

   var myBasemap =  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        accessToken: 'pk.eyJ1IjoicmFjaGVsc2NobWl0eiIsImEiOiJjazZzbmFxajcwaW5tM2Vyem9mbDl3M2QzIn0.BbIzDBMGcsv3Y3KolAmzhg' 
    }).addTo(map);

    var statesData = L.geoJson(statesData, {
  style: style,
  onEachFeature: onEachFeature
}).addTo(map);

  var wildernessAreas = L.TileLayer.GeoJSON("https://rachelschmitz.github.io/L-A-458-558/assignment2/NationalWilderness/wildernessAreas.geojson").addTo(map);

  var cities = L.TileLayer.GeoJSON("https://rachelschmitz.github.io/L-A-458-558/geojson/cities.geojson").addTo(map);

blogob blogob · Accepted Answer · 2020-04-27T08:56:19

If it is an external geoJSON file, probably you must call it in your project by adding something like:

var promise = $.getJSON("yourgeoJSONfile.json");
(...)
promise.then(function(data) {

How do you add multiple GeoJSON layers to a leaflet map?

1 Answers