Leaflet variable for import data geojson











up vote
2
down vote

favorite












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









share|improve this question




























    up vote
    2
    down vote

    favorite












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









    share|improve this question


























      up vote
      2
      down vote

      favorite









      up vote
      2
      down vote

      favorite











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









      share|improve this 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];






      leaflet javascript geojson






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 16 hours ago









      Stephen Lead

      14k1278181




      14k1278181










      asked 18 hours ago









      AdityaDS

      1114




      1114






















          2 Answers
          2






          active

          oldest

          votes

















          up vote
          5
          down vote













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




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



          <script src="https://bowercdn.net/c/fetch-1.0.0/fetch.js" integrity="sha384-j9GCh0V617Ks+uEOZnAhwzTOWu5lPIlPW3QYRSfEwXd+x7VqP1XHNLgj3AIX7Mo0" crossorigin="anonymous"></script>





          share|improve this answer






























            up vote
            1
            down vote













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





            share|improve this answer





















              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',
              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


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f305646%2fleaflet-variable-for-import-data-geojson%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes








              up vote
              5
              down vote













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




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



              <script src="https://bowercdn.net/c/fetch-1.0.0/fetch.js" integrity="sha384-j9GCh0V617Ks+uEOZnAhwzTOWu5lPIlPW3QYRSfEwXd+x7VqP1XHNLgj3AIX7Mo0" crossorigin="anonymous"></script>





              share|improve this answer



























                up vote
                5
                down vote













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




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



                <script src="https://bowercdn.net/c/fetch-1.0.0/fetch.js" integrity="sha384-j9GCh0V617Ks+uEOZnAhwzTOWu5lPIlPW3QYRSfEwXd+x7VqP1XHNLgj3AIX7Mo0" crossorigin="anonymous"></script>





                share|improve this answer

























                  up vote
                  5
                  down vote










                  up vote
                  5
                  down vote









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




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



                  <script src="https://bowercdn.net/c/fetch-1.0.0/fetch.js" integrity="sha384-j9GCh0V617Ks+uEOZnAhwzTOWu5lPIlPW3QYRSfEwXd+x7VqP1XHNLgj3AIX7Mo0" crossorigin="anonymous"></script>





                  share|improve this 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');




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



                  <script src="https://bowercdn.net/c/fetch-1.0.0/fetch.js" integrity="sha384-j9GCh0V617Ks+uEOZnAhwzTOWu5lPIlPW3QYRSfEwXd+x7VqP1XHNLgj3AIX7Mo0" crossorigin="anonymous"></script>






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited 17 hours ago

























                  answered 18 hours ago









                  Stefan

                  1,025118




                  1,025118
























                      up vote
                      1
                      down vote













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





                      share|improve this answer

























                        up vote
                        1
                        down vote













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





                        share|improve this answer























                          up vote
                          1
                          down vote










                          up vote
                          1
                          down vote









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





                          share|improve this answer












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






                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered 13 hours ago









                          Dennis Bauszus

                          1,25021019




                          1,25021019






























                              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














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f305646%2fleaflet-variable-for-import-data-geojson%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Quarter-circle Tiles

                              build a pushdown automaton that recognizes the reverse language of a given pushdown automaton?

                              Mont Emei