<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="map-container">
<div id="map"></div>
</div>
* { box-sizing: border-box; }
body {
font-family: system-ui, "Segoe UI", sans-serif;
margin: 0;
padding: 20px;
background: #f8fafc;
}
.map-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
border: 4px solid white;
}
#map {
height: 400px;
width: 100%;
z-index: 1;
}
const map = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution: "© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
}).addTo(map);
L.marker([51.505, -0.09]).addTo(map)
.bindPopup("<b>Hello!</b><br>We are located here.")
.openPopup();
