1

Install Leaflet

npm install --save leaflet
2

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:

npm install --save maplibre-gl
3

Create Solvice Account

Copy the API key.

4

Choose a Solvice style

Do you prefer a light or dark theme? Choose one of the following styles: light, dark or color.

	L.maplibreGL({
	style: 'https://cdn.solvice.io/styles/light.json',  // Style URL; see our documentation for more options
}).addTo(map);
5

Add API key

style: 'https://cdn.solvice.io/styles/light.json?key=API_KEY'

And change API_KEY with your own key.

​
Full example

<!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>