How to use a geojson file with javascript in order to create polygones with leaflet?

Question

I am trying to create a map with the limitations of the departments as polygons with leaflet. I have the geojson file on my computer. For that, I intend to use the polygon function of leaflet as follows;

var polygon = L.polygon(departementsmetropole.geojson).addTo(map);
</script>

As you can see, I don't know how to use it. My goal is to extract the coordinates of the files in order to put them in the function. The file being the fronteers of the departments, I can't add them manually because each department has around 5000 points of coordinates.

I am a beginner so, as you can see above, I tried to put the file directly where it should go by the coordinates, but it didn't work. I also tried to use the get method without success.

Answer 1

In official documentation you will get all necessary.

In addition, you have the following jsfiddle example https://jsfiddle.net/ToniBCN/8nft2yhm/

// center of the map
var center = [55.8, -4.2];

// Create the map
var map = L.map('map').setView(center, 3);

// a GeoJSON multipolygon
var mp = {
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
  "coordinates": [
    [
      [-3.9, 56],
      [-3.9, 55.6],
      [-4.6, 55.6],
      [-4.6, 56],
      [-3.9, 56]
    ],
    [
      [-4.42136131224148, 55.9201880414654],
      [-4.44608055051929, 55.8994054388937],
      [-4.49963890012121, 55.8816929539651],
      [-4.44196067747298, 55.8362196009829],
      [-4.35269676146979, 55.8045881227693],
      [-4.35818992553152, 55.7636605341908],
      [-4.22772727906531, 55.7350629547249],
      [-4.07391868533672, 55.7582517890959],
      [-4.00937400761133, 55.7984131283508],
      [-4.04095970096631, 55.868595920571],
      [-4.14532981813928, 55.8947855700627],
      [-4.27991233765179, 55.9148010288061],
      [-4.29776512085243, 55.9586449375958],
      [-4.42136131224148, 55.9201880414654]
    ]
  ]
  },
  "properties": {
    "name": "MultiPolygon",
    "style": {
        color: "orange",
        opacity: 1,
        fillColor: "gray",
        fillOpacity: 0.3
    }
  }
};


var mp2 = {
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
  "coordinates": [
    [
      [-4.42136131224148, 55.9201880414654],
      [-4.44608055051929, 55.8994054388937],
      [-4.49963890012121, 55.8816929539651],
      [-4.44196067747298, 55.8362196009829],
      [-4.35269676146979, 55.8045881227693],
      [-4.35818992553152, 55.7636605341908],
      [-4.22772727906531, 55.7350629547249],
      [-4.07391868533672, 55.7582517890959],
      [-4.00937400761133, 55.7984131283508],
      [-4.04095970096631, 55.868595920571],
      [-4.14532981813928, 55.8947855700627],
      [-4.27991233765179, 55.9148010288061],
      [-4.29776512085243, 55.9586449375958],
      [-4.42136131224148, 55.9201880414654]
    ]
  ]
  },
  "properties": {
    "name": "MultiPolygon2",
    "style": {
        color: "red",
        opacity: 1,
        fillColor: "green",
        fillOpacity: 0.3
    }
  }
};


new L.GeoJSON(mp, {
  style: function(feature) {
      return feature.properties.style
  }
}).addTo(map);

new L.GeoJSON(mp2, {
  style: function(feature) {
      return feature.properties.style
  }
}).addTo(map);


// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);