Estoy tratando de agregar un mapa de folleto a un sitio web que estoy creando para una tarea, pero el mosaico se carga en diferentes partes, cortando algunas partes. fragmento del mapa confuso

He intentado cambiar algunas de las variables para que encaje mejor, y lo más cerca que he llegado es poniendo el tamaño de mosaico en 800. Pero cuando cambio el tamaño de mosaico, las coordenadas ya no coinciden con el mapa.

Javascript del mapa (copiado del tutorial con cambios menores)

 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1IjoibGVjdG9yd291dGVyIiwiYSI6ImNrM25qZWs1dTB4NHgza240bW0zOG1qZngifQ.1uF5JjJA8l5SpTW3NVQJJQ' }).addTo(map);

html:

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="" defer ></script> <script src="js/cafmmap.js" defer></script> <!-- unrelated html stuff --> <section class="detailItem"> <div id="map"></div> </section>

Mi css solo tiene una "altura: 100%;" aplicado al mapa