title: How i show geojson FeatureCollection in a leaflet Map?
body: <p>I've exported shapefile data to geoJson with Qgis, before i try published in leaflet map, but it's not working.</p>
  
  <p>The code i've used is below, where geojson file is "gj2.geojson".</p>
  
  <p>Where is wrong?</p>
  
  <p>GEOJSON is like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
  "type": "FeatureCollection",
  "name": "gj2",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
  { "type": "Feature", "properties": { "DN": 976 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.647916182333311, -8.742916206999967 ], [ -36.647082848999979, -8.742916206999967 ], [ -36.647082848999979, -8.743749540333299 ], [ -36.647916182333311, -8.743749540333299 ], [ -36.647916182333311, -8.742916206999967 ] ] ] } },
  { "type": "Feature", "properties": { "DN": 971 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.647082848999979, -8.742916206999967 ], [ -36.646249515666646, -8.742916206999967 ], [ -36.646249515666646, -8.745416206999966 ], [ -36.647082848999979, -8.745416206999966 ], [ -36.647082848999979, -8.742916206999967 ] ] ] } },
  { "type": "Feature", "properties": { "DN": 966 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.646249515666646, -8.742916206999967 ], [ -36.645416182333307, -8.742916206999967 ], [ -36.645416182333307, -8.743749540333299 ], [ -36.646249515666646, -8.743749540333299 ], [ -36.646249515666646, -8.742916206999967 ] ] ] } },
  { "type": "Feature", "properties": { "DN": 975 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.647916182333311, -8.743749540333299 ], [ -36.647082848999979, -8.743749540333299 ], [ -36.647082848999979, -8.744582873666634 ], [ -36.647916182333311, -8.744582873666634 ], [ -36.647916182333311, -8.743749540333299 ] ] ] } },
  { "type": "Feature", "properties": { "DN": 965 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.646249515666646, -8.743749540333299 ], [ -36.645416182333307, -8.743749540333299 ], [ -36.645416182333307, -8.744582873666634 ], [ -36.646249515666646, -8.744582873666634 ], [ -36.646249515666646, -8.743749540333299 ] ] ] } },
  { "type": "Feature"....</code></pre>
  </div>
  </div>
  </p>
  
  <p>THE CODE i've try:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   
   &lt;title&gt;GeoJSON tutorial - Leaflet&lt;/title&gt;
  
   &lt;meta charset="utf-8" /&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/&gt;
      &lt;script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"&gt;&lt;/script&gt;
  
   &lt;style&gt;
    html, body {
     height: 100%;
     margin: 0;
    }
    #map {
     width: 100%;
     height: 100%;
    }
   &lt;/style&gt;
  
   
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id='map'&gt;&lt;/div&gt;
  
  &lt;script src="geojson.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script&gt;
   var map = L.map('map').setView([-9,-36], 13);
  
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
     '&lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, ' +
     'Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
    id: 'mapbox.light'
   }).addTo(map);
  
  
  var geojson = L.geoJSON('gj2.geojson').addTo(map);
   
  
   
  &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>