openfreemap
openfreemap copied to clipboard
hyperknot
Leaflet Snippet
This is a minimum viable Leaflet snippet which seems to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenFreeMap Demo (Leaflet)</title>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- MapLibre GL JS -->
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<!-- Mapbox GL Leaflet -->
<script src="https://unpkg.com/@maplibre/[email protected]"></script>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([51, 0], 10);
L.maplibreGL({
style: 'https://tiles.openfreemap.org/styles/liberty',
attribution: '<a href="https://maplibre.org/" target="_blank">MapsLibre</a>|<a href="https://openfreemap.org/" target="_blank">OpenFreeMap</a>, © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> Data from <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
}).addTo(map);
</script>
</body>
</html>
Thank you @edent this is great! I want to add this and the other snippets in a nice way, with syntax highlighting + actual interactive example into Astro, once I figure that out I'll put this on the website.
Just noting here that this doesn't appear to work anymore. The openfreemap doesn't move when the map is dragged by the user. I think it's an incompatibility with the new maplibre-gl.js.
Also, it looks like maplibre-gl-leaflet doesn't support vite :(
If i have some time, I might look into some alternative libraries for OpenFreeMap.
For now, I'm using raster tiles. Or I could rewrite my codebase to use MapLibre instead of Leaflet.
