code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
const satellite = L . tileLayer ( 'https://api.maptiler.com/maps/satellite/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY' , { tileSize: 256 , attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>' }); const hybrid = L . tileLayer ( 'https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY' , { tileSize: 256 , attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>' }); const streets = L . tileLayer ( 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , { tileSize: 256 , attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>' }); const map = L . map ( 'map' , { layers: [hybrid] }). setView ([ 41.9028 , 12.4964 ], 12 ); L .control. layers ({ 'Satellite' : satellite, 'Hybrid (labels)' : hybrid, 'Streets' : streets }). addTo (map); content_copy Copyopen_in_new Open
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < 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 > < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script > const satellite = L . tileLayer ( 'https://api.maptiler.com/maps/satellite/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY' , { tileSize: 256 , attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>' }); const hybrid = L . tileLayer ( 'https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY' , { tileSize: 256 , attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>' }); const streets = L . tileLayer ( 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , { tileSize: 256 , attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>' }); const map = L . map ( 'map' , { layers: [hybrid] }). setView ([ 41.9028 , 12.4964 ], 12 ); L .control. layers ({ 'Satellite' : satellite, 'Hybrid (labels)' : hybrid, 'Streets' : streets }). addTo (map); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import L from 'leaflet' ; import 'leaflet/dist/leaflet.css' ; const satellite = L . tileLayer ( 'https://api.maptiler.com/maps/satellite/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY' , { tileSize: 256 , attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>' }); const hybrid = L . tileLayer ( 'https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY' , { tileSize: 256 , attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>' }); const streets = L . tileLayer ( 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY' , { tileSize: 256 , attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>' }); const map = L . map ( 'map' , { layers: [hybrid] }). setView ([ 41.9028 , 12.4964 ], 12 ); L .control. layers ({ 'Satellite' : satellite, 'Hybrid (labels)' : hybrid, 'Streets' : streets }). addTo (map); const satellite = L.tileLayer('https://api.maptiler.com/maps/satellite/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>'
});
const hybrid = L.tileLayer('https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>'
});
const streets = L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
});
const map = L.map('map', { layers: [hybrid] }).setView([41.9028, 12.4964], 12);
L.control.layers({ 'Satellite': satellite, 'Hybrid (labels)': hybrid, 'Streets': streets }).addTo(map); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const satellite = L.tileLayer('https://api.maptiler.com/maps/satellite/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>'
});
const hybrid = L.tileLayer('https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>'
});
const streets = L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
});
const map = L.map('map', { layers: [hybrid] }).setView([41.9028, 12.4964], 12);
L.control.layers({ 'Satellite': satellite, 'Hybrid (labels)': hybrid, 'Streets': streets }).addTo(map);
</script>
</body>
</html> import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const satellite = L.tileLayer('https://api.maptiler.com/maps/satellite/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>'
});
const hybrid = L.tileLayer('https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a>'
});
const streets = L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
});
const map = L.map('map', { layers: [hybrid] }).setView([41.9028, 12.4964], 12);
L.control.layers({ 'Satellite': satellite, 'Hybrid (labels)': hybrid, 'Streets': streets }).addTo(map);
