> ## Documentation Index
> Fetch the complete documentation index at: https://maps.solvice.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Leaflet

> Tutorial on how to use Leaflet JS to create a map in a web page with Solvice Maps.

<Steps>
  <Step title="Install Leaflet">
    ```bash theme={null}
    npm install --save leaflet
    ```
  </Step>

  <Step title="Install MapLibre">
    Unfortunately, we need the MapLibre GL JS library to handle the rendering of the map. You can install it using
    the following command:

    ```bash theme={null}
    npm install --save maplibre-gl
    ```
  </Step>

  <Step title="Create Solvice Account">
    Copy the API key.
  </Step>

  <Step title="Choose a Solvice style">
    Do you prefer a light or dark theme? Choose one of the following styles: `light`, `dark` or `color`.

    ```javascript theme={null}
    	L.maplibreGL({
    	style: 'https://cdn.solvice.io/styles/light.json',  // Style URL; see our documentation for more options
    }).addTo(map);
    ```
  </Step>

  <Step title="Add API key">
    ```javascript theme={null}
    style: 'https://cdn.solvice.io/styles/light.json?key=API_KEY'
    ```

    And change API\_KEY with your own key.
  </Step>
</Steps>

## Full example

<CodeGroup>
  ```html index.html theme={null}
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8"/>
      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
      <title>Vector Map Demo (Leaflet)</title>
      <!-- Leaflet -->
      <link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet"/>
      <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" type="text/javascript"></script>

      <!-- MapLibre GL JS (still required to handle the rendering) -->
      <script src="//unpkg.com/maplibre-gl@4.0.2/dist/maplibre-gl.js" type="text/javascript"></script>
      <link href="//unpkg.com/maplibre-gl@4.0.2/dist/maplibre-gl.css" rel="stylesheet"/>

      <!-- Mapbox GL Leaflet -->
      <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.20/leaflet-maplibre-gl.js"></script>
      <style type="text/css">
          html, body, #map {
          width: 100%;
          height: 100%;
          margin: 0;
      }
      </style>
  </head>
  <body>
  <div id="map"></div>
  <script type="text/javascript">
      // Initialize a map centered at (53, 12
      ) at zoom level 5
      var map = L.map('map').setView([37.7749, -122.4194
      ], 12
      )
      ;

      // MapLibre GL JS does not handle RTL text by default, so we recommend adding this dependency to fully support RTL rendering.
      maplibregl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.1/mapbox-gl-rtl-text.js');

      L.maplibreGL({
      style: 'https://cdn.solvice.io/styles/light.json',  // Style URL; see our documentation for more options
      attribution: '&copy; <a href="https://www.solvice.io.com/" target="_blank">Solvice Maps</a>',
  }).
      addTo(map);
  </script>
  </body>
  </html>


  ```
</CodeGroup>
