Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Leaflet Snippet #26

Open
edent opened this issue Oct 2, 2024 · 1 comment
Open

Leaflet Snippet #26

edent opened this issue Oct 2, 2024 · 1 comment

Comments

@edent
Copy link

edent commented Oct 2, 2024

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hyperknot @edent