<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 id="map-custom"></div>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 20px;
font-family: system-ui, "Segoe UI", sans-serif;
background: #f1f5f9;
}
#map-custom {
height: 500px;
width: 100%;
border-radius: 16px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.leaflet-popup-content-wrapper {
border-radius: 8px;
}
.leaflet-popup-content b {
color: #3b82f6;
}
const map = L.map("map-custom").setView([48.8566, 2.3522], 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);
const storeIcon = L.icon({
iconUrl: "https://placehold.co/50x50/3b82f6/ffffff?text=Store",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -50]
});
L.marker([48.8566, 2.3522], {icon: storeIcon}).addTo(map)
.bindPopup("<b>Main Store</b><br>Come visit us!")
.openPopup();
