sysadmin/openfreemap
1
0
Fork 0
mirror of https://github.com/hyperknot/openfreemap.git synced 2026-05-21 14:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add leaflet snippet (#33)

Browse Source 
Great, thanks!
This commit is contained in:
CJ
2024-10-22 06:28:07 -06:00
committed by GitHub
parent 6ecb63cd55
commit ff8041000f
1 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
website/src/content/how_to_use/leaflet.md
View File

@@ -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>
```