From ff8041000f7dac131eb14e4998020a3367767b9e Mon Sep 17 00:00:00 2001
From: CJ <cj@null.computer>
Date: Tue, 22 Oct 2024 06:28:07 -0600
Subject: [PATCH] feat: add leaflet snippet (#33)

Great, thanks!
---
 website/src/content/how_to_use/leaflet.md | 33 +++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/website/src/content/how_to_use/leaflet.md b/website/src/content/how_to_use/leaflet.md
index 50e3011..0cd4f11 100644
--- a/website/src/content/how_to_use/leaflet.md
+++ b/website/src/content/how_to_use/leaflet.md
@@ -1,3 +1,32 @@
-## Using Leaflet?
+## Using Leaflet
 
-A Leaflet-based snippet is coming soon.
+[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.
+
+Include the following links and scripts in your page:
+
+```html
+<!-- Leaflet -->
+<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+
+<!-- Maplibre GL -->
+<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel='stylesheet' />
+<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+
+<!-- Maplibre GL Leaflet  -->
+<script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet/leaflet-maplibre-gl.js"></script>
+```
+
+Initialize it to a div like this:
+
+```html
+<div id="map" style="width: 100%; height: 500px"></div>
+<script>
+  const map = L.map('map')
+    .setView([52.517, 13.388], 9.5)
+
+  L.maplibreGL({
+    style: 'https://tiles.openfreemap.org/styles/liberty'
+  }).addTo(map)
+</script>
+```