index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tile Map URL Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        label, input {
            display: block;
            margin-bottom: 10px;
        }
        #result {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Tile Map URL Generator</h1>
    <label for="latitude">Latitude:</label>
    <input type="number" id="latitude" step="any" placeholder="Enter latitude" value="10.762622">
    
    <label for="longitude">Longitude:</label>
    <input type="number" id="longitude" step="any" placeholder="Enter longitude" value="106.660172">
    
    <label for="zoom">Zoom Level:</label>
    <input type="number" id="zoom" placeholder="Enter zoom level" min="0" max="24" value="15">

    <button onclick="generateTileURL()">Generate Tile URL</button>

    <div id="result"></div>

    <script>
        function latLonToTileXY(lat, lon, zoom) {
            const tileX = Math.floor((lon + 180) / 360 * Math.pow(2, zoom));
            const tileY = Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom));
        
            return {
                x: tileX,
                y: tileY,
                z: zoom
            };
        }

        function generateTileURL() {
            const lat = parseFloat(document.getElementById('latitude').value);
            const lon = parseFloat(document.getElementById('longitude').value);
            const zoom = parseInt(document.getElementById('zoom').value);

            if (isNaN(lat) || isNaN(lon) || isNaN(zoom)) {
                alert("Please enter valid latitude, longitude, and zoom level.");
                return;
            }

            const tile = latLonToTileXY(lat, lon, zoom);
            const url = `https://tile.openstreetmap.org/${tile.z}/${tile.x}/${tile.y}.png`;

            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = `
                <p>Tile URL: <a href="${url}" target="_blank">${url}</a></p>
                <img src="${url}" alt="Tile Image" />
            `;
        }
    </script>
</body>
</html>