Skip to content

Commit ff80410

Browse files
authored
feat: add leaflet snippet (#33)
Great, thanks!
1 parent 6ecb63c commit ff80410

File tree

1 file changed

+31
-2
lines changed

1 file changed

+31
-2
lines changed
Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,32 @@
1-
## Using Leaflet?
1+
## Using Leaflet
22

3-
A Leaflet-based snippet is coming soon.
3+
[MapLibre GL Leaflet](https://github.com/maplibre/maplibre-gl-leaflet) provides a binding for Leaflet that allows you to add vector tile sources to the Leaflet map.
4+
5+
Include the following links and scripts in your page:
6+
7+
```html
8+
<!-- Leaflet -->
9+
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
10+
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
11+
12+
<!-- Maplibre GL -->
13+
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel='stylesheet' />
14+
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
15+
16+
<!-- Maplibre GL Leaflet -->
17+
<script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet/leaflet-maplibre-gl.js"></script>
18+
```
19+
20+
Initialize it to a div like this:
21+
22+
```html
23+
<div id="map" style="width: 100%; height: 500px"></div>
24+
<script>
25+
const map = L.map('map')
26+
.setView([52.517, 13.388], 9.5)
27+
28+
L.maplibreGL({
29+
style: 'https://tiles.openfreemap.org/styles/liberty'
30+
}).addTo(map)
31+
</script>
32+
```

0 commit comments

Comments
 (0)