Add geometry

Estimated reading time: 2 minutes
We recommend using Maplibre GL as vector maps provide the best user experience.

Check out this code sample that uses the Leaflet library to add a geometry from GeoJSON onto your map.

View on GitHub 

<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #map {
      min-height: 500px;
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // Don't forget to replace <YOUR_ACCESS_TOKEN> by your own access token
    const accessToken = '<YOUR_ACCESS_TOKEN>';
    const map = L.map('map').setView([48.8534, 2.3488], 11);
    L.tileLayer(
      `https://tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token=${accessToken}`, {
        attribution: '<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank" class="jawg-attrib">&copy; <b>Jawg</b>Maps</a> | <a href="https://www.openstreetmap.org/copyright" title="OpenStreetMap is open data licensed under ODbL" target="_blank" class="osm-attrib">&copy; OSM contributors</a>',
        maxZoom: 22
      }
    ).addTo(map);

    const geoJsonFeature = {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [2.319887, 48.90046],
          [2.329981, 48.901163],
          [2.38515, 48.902008],
          [2.394906, 48.898444],
          [2.397627, 48.894578],
          [2.398846, 48.887109],
          [2.408308, 48.880409],
          [2.41327, 48.872892],
          [2.413838, 48.864376],
          [2.416341, 48.849234],
          [2.412246, 48.834539],
          [2.422139, 48.835798],
          [2.41939, 48.842577],
          [2.42813, 48.841528],
          [2.447699, 48.844818],
          [2.463438, 48.842089],
          [2.467426, 48.838891],
          [2.467582, 48.833133],
          [2.462696, 48.81906],
          [2.458705, 48.81714],
          [2.438448, 48.818232],
          [2.421462, 48.824054],
          [2.406032, 48.827615],
          [2.390939, 48.826079],
          [2.379296, 48.821214],
          [2.363947, 48.816314],
          [2.345958, 48.816036],
          [2.331898, 48.817011],
          [2.332461, 48.818247],
          [2.292196, 48.827142],
          [2.279052, 48.83249],
          [2.272793, 48.82792],
          [2.263174, 48.83398],
          [2.255144, 48.83481],
          [2.251709, 48.838822],
          [2.250612, 48.845555],
          [2.239978, 48.849702],
          [2.224219, 48.853517],
          [2.228225, 48.865183],
          [2.231736, 48.869069],
          [2.245678, 48.876435],
          [2.25541, 48.874264],
          [2.258467, 48.880387],
          [2.277487, 48.877968],
          [2.282327, 48.883923],
          [2.291507, 48.889472],
          [2.319887, 48.90046]
        ],
      },
    };
    L.geoJSON(geoJsonFeature).addTo(map);
  </script>
</body>
</html>