[GIS] Import local GeoJSON file into Leaflet

geojsonjavascriptleaflet

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];

Best Answer

We use this function in our project (credits go to Roberto MF):

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

It uses the Fetch API to download the file. You can simply use your path data/us-states.geojson as url. Example with your data:

var data = fetchJSON('data/us-states.geojson')
            .then(function(data) { return data })

Be aware that this doesn't work in Internet Explorer by default, but you can polyfill it by adding these lines to your HTML-<head>:

<script src="https://bowercdn.net/c/es6-promise-3.2.2/es6-promise.min.js" integrity="sha384-GF7IR8yT5028AbfHnSJSxX0Y1D+sicFNHXDyV1Hzcf4EISXdjP8uW0Q/0yFIHpTD" crossorigin="anonymous"></script>
<script src="https://bowercdn.net/c/fetch-1.0.0/fetch.js" integrity="sha384-j9GCh0V617Ks+uEOZnAhwzTOWu5lPIlPW3QYRSfEwXd+x7VqP1XHNLgj3AIX7Mo0" crossorigin="anonymous"></script>
Related Question