Doğru anladıysam sanırım bunu istiyorsunuz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harita</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
#map {
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([41.0082, 28.9784], 13);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
maxZoom: 19,
attribution: '© <a href="https://carto.com/">CARTO</a>',
subdomains: 'abcd',
tileSize: 256,
zoomOffset: 0
}).addTo(map);
L.marker([41.0082, 28.9784])
.bindPopup('İstanbul Merkez')
.addTo(map);
</script>
</body>
</html>