title: Leaflet: How to fetch geojson from URL and pass it to L.geoJson
body: <p>I try to load a geojson from an URL and display it in a map with leaflet:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.css&quot;/&gt;
      &lt;script src=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id=&quot;my_map&quot; style=&quot;height: 600px&quot;&gt;&lt;/div&gt;
  &lt;script&gt;
  const map = L.map('my_map')
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  map.setView([37.8, -96], 4);
  async function load_shapefile() {
      let url = 'https://raw.githubusercontent.com/shawnbot/topogram/master/data/us-states.geojson';
      let shape_obj = await (await fetch(url)).json();
      return shape_obj
  }
  L.geoJson(load_shapefile()).addTo(map);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I get on the JS Console:</p>
  <pre><code>Uncaught Error: Invalid GeoJSON object.
      at De (GeoJSON.js:221)
      at i.addData (GeoJSON.js:117)
      at initialize (GeoJSON.js:92)
      at new i (Class.js:22)
      at Object.Ke (GeoJSON.js:439)
      at leaflet.html:21
  </code></pre>
  <p>If possible, I would like to not use jQuery.
  Thanks for any input!</p>
  <p><strong>EDIT: I replaced the url with an actual GeoJSON file, thanks @IvanSanchez!</strong></p>