Import local GeoJSON file into Leaflet

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

edited Dec 12 at 17:17

Stefan

1,140118

asked Dec 11 at 7:19

AdityaDS

1237

add a comment |

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

edited Dec 12 at 17:17

Stefan

1,140118

asked Dec 11 at 7:19

AdityaDS

1237

add a comment |

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

edited Dec 12 at 17:17

Stefan

1,140118

asked Dec 11 at 7:19

AdityaDS

1237

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

leaflet javascript geojson

edited Dec 12 at 17:17

Stefan

1,140118

asked Dec 11 at 7:19

AdityaDS

1237

edited Dec 12 at 17:17

Stefan

1,140118

asked Dec 11 at 7:19

AdityaDS

1237

edited Dec 12 at 17:17

Stefan

1,140118

edited Dec 12 at 17:17

Stefan

1,140118

edited Dec 12 at 17:17

Stefan

1,140118

asked Dec 11 at 7:19

AdityaDS

1237

asked Dec 11 at 7:19

AdityaDS

1237

asked Dec 11 at 7:19

AdityaDS

1237

add a comment |

3 Answers
3

active

oldest

votes

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>

edited 2 days ago

answered Dec 11 at 7:55

Stefan

1,140118

ok thanks alot, il test it
– AdityaDS
2 days ago

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
2 days ago

add a comment |

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();

answered Dec 11 at 12:13

Dennis Bauszus

1,27021019

let me test your code
– AdityaDS
2 days ago

add a comment |

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/

answered 2 days ago

Bill Chappell

2,5031814

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "79"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f305646%2fimport-local-geojson-file-into-leaflet%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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>

edited 2 days ago

answered Dec 11 at 7:55

Stefan

1,140118

ok thanks alot, il test it
– AdityaDS
2 days ago

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
2 days ago

add a comment |

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>

edited 2 days ago

answered Dec 11 at 7:55

Stefan

1,140118

ok thanks alot, il test it
– AdityaDS
2 days ago

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
2 days ago

add a comment |

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>

edited 2 days ago

answered Dec 11 at 7:55

Stefan

1,140118

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>

edited 2 days ago

answered Dec 11 at 7:55

Stefan

1,140118

edited 2 days ago

answered Dec 11 at 7:55

Stefan

1,140118

answered Dec 11 at 7:55

Stefan

1,140118

answered Dec 11 at 7:55

Stefan

1,140118

ok thanks alot, il test it
– AdityaDS
2 days ago

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
2 days ago

add a comment |

ok thanks alot, il test it
– AdityaDS
2 days ago

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
2 days ago

ok thanks alot, il test it
– AdityaDS
2 days ago

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
2 days ago

add a comment |

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();

answered Dec 11 at 12:13

Dennis Bauszus

1,27021019

let me test your code
– AdityaDS
2 days ago

add a comment |

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();

answered Dec 11 at 12:13

Dennis Bauszus

1,27021019

let me test your code
– AdityaDS
2 days ago

add a comment |

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();

answered Dec 11 at 12:13

Dennis Bauszus

1,27021019

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();

answered Dec 11 at 12:13

Dennis Bauszus

1,27021019

answered Dec 11 at 12:13

Dennis Bauszus

1,27021019

answered Dec 11 at 12:13

Dennis Bauszus

1,27021019

answered Dec 11 at 12:13

Dennis Bauszus

1,27021019

let me test your code
– AdityaDS
2 days ago

add a comment |

let me test your code
– AdityaDS
2 days ago

let me test your code
– AdityaDS
2 days ago

add a comment |

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/

answered 2 days ago

Bill Chappell

2,5031814

add a comment |

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/

answered 2 days ago

Bill Chappell

2,5031814

add a comment |

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/

answered 2 days ago

Bill Chappell

2,5031814

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/

answered 2 days ago

Bill Chappell

2,5031814

answered 2 days ago

Bill Chappell

2,5031814

answered 2 days ago

Bill Chappell

2,5031814

answered 2 days ago

Bill Chappell

2,5031814

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Geographic Information Systems Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Jtdylktuy