openfreemap icon indicating copy to clipboard operation
openfreemap copied to clipboard

Published 20 hours ago • verified publisher icon hyperknot

Leaflet Snippet

Open edent opened this issue 1 year ago • 2 comments

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>, &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>

edent avatar Oct 02 '24 21:10 edent