Displaying a Map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hudhud Maps - Live Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" />
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; font-family: sans-serif; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        .controls {
            position: absolute; top: 10px; left: 10px; z-index: 1;
            background: white; padding: 10px; border-radius: 4px;
            display: flex; gap: 10px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <select id="variant"><option value="light">Light Mode</option><option value="dark">Dark Mode</option></select>
        <select id="lang"><option value="ar">Arabic</option><option value="en">English</option></select>
    </div>
    <div id="map"></div>
    <script>
        const API_KEY = 'pk_YOUR_PUBLISHABLE_KEY';
        const MAP_ID  = 'YOUR_MAP_ID';
        const BASE_URL = 'https://b.hudhud.sa/v1/maps/styles';

        function getStyleUrl(variant, lang) {
            return `${BASE_URL}/${MAP_ID}?variant=${variant}&lang=${lang}&api_key=${API_KEY}`;
        }

        const map = new maplibregl.Map({
            container: 'map',
            style: getStyleUrl('light', 'ar'),
            center: [45.0792, 23.8859], // Center of Saudi Arabia
            zoom: 5
        });

        const updateStyle = () => map.setStyle(getStyleUrl(document.getElementById('variant').value, document.getElementById('lang').value));
        document.getElementById('variant').addEventListener('change', updateStyle);
        document.getElementById('lang').addEventListener('change', updateStyle);
    </script>
</body>
</html>