<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
body { width: 100%; height: 100%; padding: 0; margin: 0; font-family: Arial, sans-serif; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// Initialize Leaflet map
let map = L.map("map").setView([47.26816, 11.40037], 13);
// Add Maptoolkit tiles as L.tileLayer
L.tileLayer("https://maptoolkit.p.rapidapi.com/tiles/{z}/{x}/{y}/terrain.png?rapidapi-key=your-api-key{ratio}", {
ratio: L.Browser.retina ? "&ratio=2" : "",
maxZoom: 18,
attribution:
"© <a href='https://www.maptoolkit.com' target='_blank'>Maptoolkit</a> \
© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OSM</a>",
}).addTo(map);
</script>
</body>
</html>
