2

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

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>
  • I just saw that I had made a mistake. I added a second line to the Javascript (fetchJSON(...) returns a Promise so you have to wait for it with .then()) and another Polyfill. – Stefan Dec 20 '18 at 8:22
2

Very similar to the previous answer we use XHR to get the file and load the data into Leaflet.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data/us-states.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
    if (xhr.status !== 200) return
    L.geoJSON(xhr.response).addTo(map);
};
xhr.send();
  • let me test your code – AdityaDS Dec 20 '18 at 3:52
2

I used JQuery to read a GeoJSON file. First need to add JQUery to the page, then I define the layer, add the data to the layer, and finally the map.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

var url = 'BaseBallFinal.json'; 
 //var bbTeam = L.geoJSON(null, {onEachFeature: forEachFeature, style: style});
  var bbTeam = L.geoJSON(null, {
        onEachFeature: forEachFeature, 
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
  });

// Get GeoJSON data and create features.
$.getJSON(url, function(data) {
        bbTeam.addData(data);
});

bbTeam.addTo(map);

Here is my working example: http://www.gistechsolutions.com/leaflet/DEMO/Simple/indexMap1.html

And others: http://www.gistechsolutions.com/leaflet/DEMO/

  • There is a typo in your working example, the code line: var osm=...contributors'}); You may forget calling the addTo function. – Cloud Cho 2 days ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.