search

hyperknot / openfreemap

Free and open-source map hosting solution with custom styles for websites and apps, using OpenStreetMap data
https://openfreemap.org/
Other
2.9k stars 60 forks source link

Leaflet Snippet #26

Open edent opened 1 month ago

edent commented 1 month ago

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/leaflet@1.9.4/dist/leaflet.css">
        <script src="https://unpkg.com/leaflet@1.9.4/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/maplibre-gl-leaflet@0.0.22leaflet-maplibre-gl.js"></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>, &copy; <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>
hyperknot commented 1 month ago

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.