<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="utf-8">
    <title>خريطتي الأولى مع Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map { height: 600px; width: 100%; } /* عشان الخريطة تكون كبيرة */
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([24.7136, 46.6753], 10); // إحداثيات الرياض كمثال

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(map);

        // إضافة علامة (Marker) مع نص توضيحي
        var marker = L.marker([24.7136, 46.6753]).addTo(map);
        marker.bindPopup("<b>مرحبا!</b><br>هنا الرياض.").openPopup();
    </script>
</body>
</html>