leaflet variable for import data geojson

Question

I just used a leaflet. From the geoJSON demo page I saw if you want to include data you have to use

<script src="data/us-states.geojson"></script>

and if you open the files looks like

var ustates = {
"type": "FeatureCollection",
......
[]
};

and if you want to call them use

var data = [ustates] ;

Is there another way to call the data? The geojson file that I have has no initial variable and looks like this:

{
"type": "FeatureCollection",
......
[]
}

I have lots of data and I have to open 1 by 1 to add variable on geojson data so I mean can I just call the data like

var ustates = <?php include "data/us-states.geojson"; ?>
var data = [ustates];

Answer 1

You can use follow this link

function fetchJSON(url) {
  return fetch(url)
    .then(function(response) {
      return response.json();
    });
}


var data = fetchJSON('data/us-states.geojson');

Answer 2

There's a handy plugin which will help with this - leaflet-ajax - which you can find here https://github.com/calvinmetcalf/leaflet-ajax. This will handle fetching the file and creating a Leaflet layer from it in one easy step.

Example usage:

var geojsonlayer = new L.GeoJSON.AJAX("data/us-states.json").addTo(map);